1. Este sitio usa cookies. Para continuar usando este sitio, se debe aceptar nuestro uso de cookies. Más información.
  2. ¡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
Descartar aviso
Become a vip user! / ¡Házte usuario VIP!
Download free all our add-ons
descarga gratis todos nuestros complementos
Look into XenForo's Manual in spanish
ver gratis el Manual de XenForo en español
Upgrade to user VIP and download free all our add-ons, look into XenForo's Manual in spanish, see all tutorials entirely, and much more....
Actualiza a usuario VIP y descarga gratis todos nuestros complementos, podrás ver gratis el Manual de XenForo en español, ver completamente todos los tutoriales y mucho más....

Become a vip user! / ¡Házte usuario VIP!

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

Tema en 'Modificaciones Plantilla' iniciado por descaro, 19 Nov 2010.

  1. descaro

    descaro Activo

    Registrado:
    7 Oct 2010
    Mensajes:
    353
    Me Gusta recibidos:
    129
    Puntos:
    43
    Género:
    Masculino
    Ubicación:
    Espana
    19-11-2010 15-27-01.
    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. twitter_icon.

    Articulo original
     
    A 3 personas les gusta esto.
  2. descaro

    descaro Activo

    Registrado:
    7 Oct 2010
    Mensajes:
    353
    Me Gusta recibidos:
    129
    Puntos:
    43
    Género:
    Masculino
    Ubicación:
    Espana
    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ó :)
     
  3. lms

    lms Administrador

    Registrado:
    6 Oct 2010
    Mensajes:
    7.314
    Me Gusta recibidos:
    2.055
    Puntos:
    2.613
    Género:
    Masculino
    País:
    España
    Versión de XenForo:
    1.5.14
    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
     
  4. lms

    lms Administrador

    Registrado:
    6 Oct 2010
    Mensajes:
    7.314
    Me Gusta recibidos:
    2.055
    Puntos:
    2.613
    Género:
    Masculino
    País:
    España
    Versión de XenForo:
    1.5.14
    PayPal:
    Donar dinero a este usuario
    Página web:
    Web
    [​IMG]
    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:

  5. descaro

    descaro Activo

    Registrado:
    7 Oct 2010
    Mensajes:
    353
    Me Gusta recibidos:
    129
    Puntos:
    43
    Género:
    Masculino
    Ubicación:
    Espana
    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 ;)
     
  6. lms

    lms Administrador

    Registrado:
    6 Oct 2010
    Mensajes:
    7.314
    Me Gusta recibidos:
    2.055
    Puntos:
    2.613
    Género:
    Masculino
    País:
    España
    Versión de XenForo:
    1.5.14
    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
     
  7. emilianomax

    emilianomax XenForoUser

    Registrado:
    15 Nov 2011
    Mensajes:
    56
    Me Gusta recibidos:
    5
    Puntos:
    8
    Género:
    Masculino
    Wow lms, se puede agregar google mas a esos iconos ?? Saludos
     
  8. lms

    lms Administrador

    Registrado:
    6 Oct 2010
    Mensajes:
    7.314
    Me Gusta recibidos:
    2.055
    Puntos:
    2.613
    Género:
    Masculino
    País:
    España
    Versión de XenForo:
    1.5.14
    PayPal:
    Donar dinero a este usuario
    Página web:
    Web
    Supongo que si. Es agregar el código del botón.

    Salud2
     

Compartir esta página

Este sitio usa cookies, propias y de terceros.
Si se continúa con nosotros entendemos que se acepta el uso de cookies.