• ¡Bienvenido a XenFácil!

    Estás viendo el sitio como Invitado. Para poder participar en este sitio

    y obtendrás privilegios adicionales, acceso a otras áreas y mucho mas.

    ¡Es gratis!


    ¿Ya eres miembro? Inicia sesión

Mod.Plantilla Agregar iconos Facebook y Twitter en la barra de navegación

descaro

Activo
Mensajes
353
Puntuación de reacciones
129
Puntos
43
19-11-2010 15-27-01.png
1º subir imágenes adjuntas a su website​
2º panel de administración -> apariencia -> plantillas: navigation, editar y buscar:​
HTML:
<!-- no selection -->
Añadir antes (encima):

HTML:
<li class="navTab PopupClosed facebooktab"><a class="navLink" target="_blank" href="http://www.facebook.com/apps/application.php?id=XXXXXXXXXX&v=wall">vuestro dominio at facebook.com</a></li>
<li class="navTab PopupClosed twitterktab"><a class="navLink" target="_blank" href="http://twitter.com/nombre de vuestra página">vuestro dominio at twitter.com</a></li>

3º introducir vuestra la identidad de aplicación de facebook y dominio

4º añade lo siguiente al final de la plantilla <<navigation.css>>y no te olvides cambiar la URL de los iconos.

HTML:
.facebooktab a {
    background: transparent url(http://www.example.com/images/facebook_icon.png) center center no-repeat;
     text-indent: -9999px;
}

.twitterktab a {
     background: transparent url(http://www.example.com/images/twitter_icon.png) center center no-repeat;
     text-indent: -9999px;
}

facebook_icon.png twitter_icon.png

Articulo original
 

descaro

Activo
Mensajes
353
Puntuación de reacciones
129
Puntos
43
indicaciones por la experiencia, para quien le dé problemas: quitar &v del final de vuestra id. de facebook, de esta forma a mi me pitó :)
 

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Bueno, ahora que ya estoy otra vez con firefox en vez de con opera y ya puedo responder, Primero gracias por el aporte.
Segundo, Puesto en el foro. facebook da problemas en el muro de la aplicación ya que debe tener un bug con el tema que hasta Mike se ha ofrecido para solventarselo.

Quito el &v=... corriendo.

Salud2
 

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
65244683.png
Para colocar estos iconos así y que funcionen, he modificado algo el código de descaro. La conexión es a FaceBook, Twitter, MySpace, StumbleUpon, reddit, delicious y Addthis. De todos ellos el más interesante es este último ya que te permite enviar a 416 sitios, incluidos los anteriores.

El código que he usado es el siguiente:
Insertar CODE, HTML o PHP:
<li class="navTab PopupClosed facebooktab"><a class="navLink" target="_blank" href="http://www.facebook.com/apps/application.php?id=TU_ID_DE_APLICACIÓN"><img src="@imagePath/xenforo/social/facebook.png" width="16" height="16" alt="Compartir a Facebook" /></a><script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script><fb:like href="http://www.facebook.com/apps/application.php?id=TU_ID_DE_APLICACIÓN&amp;v=wall" layout="button_count"></fb:like></li>
<li class="navTab PopupClosed twitterktab"><a class="navLink" target="_blank" href="http://twitter.com/#!/soylms/xenfacil"><img src="@imagePath/xenforo/social/twitter.png" width="16" height="16" alt="Compartir a Twitter" /></a></li>
<li class="navTab PopupClosed myspacektab"><a class="navLink" target="_blank" href="http://www.myspace.com/TU_ID_DE_USUARIO"><img src="@imagePath/xenforo/social/myspace.png" width="16" height="16" alt="Compartir a MySpace" /></a></li>
<li class="navTab PopupClosed stumbleuponktab"><a class="navLink" target="_blank" href="http://www.stumbleupon.com/"><img src="@imagePath/xenforo/social/stumbleupon.png" width="16" height="16" alt="Compartir a Stumble It" /></a></li>
<li class="navTab PopupClosed redditktab"><a class="navLink" target="_blank" href="http://reddit.com/submit" onclick="window.location = 'http://reddit.com/submit?url=' + encodeURIComponent(window.location); return false"><img src="@imagePath/xenforo/social/reddit.png" width="16" height="16" alt="Compartir a Reddit" border="0" /></a></li>
<li class="navTab PopupClosed deliciousktab"><a class="navLink" target="_blank" href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"><img src="@imagePath/xenforo/social/delicious.png" width="16" height="16" alt="Compartir en Delicious" /></a></li>
<!-- AddThis Button BEGIN -->
<li class="navTab PopupClosed morektab"><a class="navLink" target="_blank" href="http://www.addthis.com/bookmark.php?v=250&amp;username=TU_USERNAME"><img src="@imagePath/xenforo/social/addthis_64.png" width="16" height="16" alt="Más..." /></a></li>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=TU_USERNAME"></script>
<!-- AddThis Button END -->

        <!-- no selection -->
En la plantilla navigation, justo encima de
Insertar CODE, HTML o PHP:
        <!-- no selection -->
Y en la plantilla navigation.css, al final del todo he añadido:
Insertar CODE, HTML o PHP:
.facebooktab a {
    background: transparent url(@imagePath/xenforo/social/facebook_icon.png) center center no-repeat;
     text-indent: -9999px;
}

.twitterktab a {
     background: transparent url(@imagePath/xenforo/social/twitter_icon.png) center center no-repeat;
     text-indent: -9999px;
}

.myspacektab a {
    background: transparent url(@imagePath/xenforo/social/myspace_icon.png) center center no-repeat;
     text-indent: -9999px;
}

.stumbleuponktab a {
     background: transparent url(@imagePath/xenforo/social/stumbleupon_icon.png) center center no-repeat;
     text-indent: -9999px;
}
.redditktab a {
    background: transparent url(@imagePath/xenforo/social/reddit_icon.png) center center no-repeat;
     text-indent: -9999px;
}

.deliciousktab a {
     background: transparent url(@imagePath/xenforo/social/delicious_icon.png) center center no-repeat;
     text-indent: -9999px;
}
.morektab a {
     background: transparent url(@imagePath/xenforo/social/addthis_64_icon.png) center center no-repeat;
     text-indent: -9999px;
}
He creado un directorio en raíz/styles/default/xenforo que lo he llamado social (su ruta sería raíz/styles/default/xenforo/social) a donde he subido las imágenes que dejo en un zip en adjuntos.

No comento como funcionan ya que lo podéis comprobar vosotros mismos en el foro.

Salud2
 

Adjuntos

  • MarcadoresSociales.zip
    21,4 KB · Visitas: 93

descaro

Activo
Mensajes
353
Puntuación de reacciones
129
Puntos
43
Para colocar estos iconos así y que funcionen, he modificado algo el código de descaro.

dejo claro que éste código lo traje de la página oficial, no es mío, por ello puse el link al articulo oficial :)

gracias lms por las ampliaciones que has facilitado para dicha modificación ;)
 

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Es obvio pero eso no quita para que seas el autor del tema en este foro, no del código en sí.

Salud2
 

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Supongo que si. Es agregar el código del botón.

Salud2
 
Arriba