Mil Trucos Blogger

Fanbox de Facebook, Twitter y Google+ con efecto acordeón

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

En esta entrada les mostraré una forma muy original de mostrar los fanbox de Facebook, Twitter y Google+.Este, es un simple gadget que al momento de pasar el cursor sobre el menú, se desplegará con el efecto acordeón un fanbox de dicha red social.El menú está hecho de puro CSS, lo que significa que no sobrecargará tu blog.

La demostración en GIF

O si quieres verlo en vivo, puedes ingresar a este blog de pruebas.Para agregarlo a tu blog, dirígete a Diseño, Agregar Gadget, seleccionas el que dice HTML/Javascript, y ahí pegas lo siguiente:

<style>
 .socialm{
    padding:0;
    list-style:none;
    width:298px;
     font-size:18px;
    background:#fff;
   border: 1px solid rgba(0,0,0,0.8);>
 }
 .socialm li a{
     display: block;
     border-bottom: 1px solid rgba(0,0,0, 0.2);
     border-top: 1px solid rgba(255,255,255, 0.2);
     background:#3e3f44;
     text-decoration:none;
     color:#FFF;
     text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
     filter: dropshadow(color=#000, offx=1, offy=0);
     padding:10px;
     padding-left:20px;
 }
.socialm li a:hover{
     background:#4a6ba2;
     -moz-transition: background 0.3s ease-in;
     -webkit-transition: background 0.3s ease-in;
     -o-transition: background 0.3s ease-in;
 }
 .socialm li a.twitter:hover{
     background:#00B7FF;
 }
 .socialm li a.gplus:hover{
     background:#FF2F2F;
 }
 .socialm ul{
     margin:0;
     padding:0;
     list-style:none;
     height:0;
     overflow: hidden;
     transition:1s;
     -moz-transition:1s;
     -webkit-transition:1s;
}
 .socialm li:hover ul{
     height:265px;
     overflow-y:auto;
     overflow-x:hidden;
     padding:0px;
 }
 .socialm ul li a{
     background:#fff;
     padding:0px;
 }
 .socialm ul li a:hover {
     background: none repeat scroll 0 0 #ccc;
     color: #fff;
     -moz-transition: color 0.4s ease;
     -webkit-transition: color 0.4s ease;
     -o-transition: color 0.4s ease;
     padding:0px;
 }
 </style>
 <ul class="socialm">
     <li><a href="javascript:void(0);">Facebook</a>
       <ul>
         <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FNovedadBlogger&amp;width=300&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe></ul>
     </li>
     <li><a class="twitter" href="javascript:void(0);">Twitter</a>
       <ul>
 <div id="twitter-box"></div>
 <script>
   var tw_user = 'NovedadBlogger';
   var tw_width = 300;
   var tw_height = 258;
   var no_face = 10;
     (function() {
       var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true;
       tw_box.src = '//www.twitter-fanbox.com/tw.js';
       (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
   })();
 </script>
       </ul>
     </li>
      <li><a class="gplus" href="javascript:void(0);">Google+</a>
        <ul>
 <div class="g-person" data-href="//plus.google.com/u/0/116997012830449164523" data-showcoverphoto="false" data-rel="author"></div>
 <script type="text/javascript">
   window.___gcfg = {lang: 'es'};
   (function() {
     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
     po.src = 'https://apis.google.com/js/platform.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
   })();
            </script>
       </ul>
    </li>
  </ul>

Consideraciones finales:

  • Reemplaza lo que se encuentra en negrita y coloreado, por las redes que indica
  • Si tu fanpage de Facebook, no tiene un nombre de usuario, en el código de facebook, reemplaza desde <iframe> hasta </iframe> por esto
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FTu-fanpage%2FXXXXXXXX&amp;width=300&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowTransparency="true"></iframe>

Reemplaza lo el “Tu-fanpage” por el nombre completo de tu fanpage, separado por guíones; y el “XXXXXX” por la serie de números, que es el identificador de tu pagina.

0
Shares
Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

9 Comentarios

  1. Anonymous Anonymous
    agosto 1, 2014    

    muy ingenioso, gracias por compartirlo

  2. agosto 8, 2014    

    Hola, Hayder. Me gusta mucho este fanbox y me resultó fácil de implementar. Hay alguna posibilidad de que en google plus lugar de la foto del autor aparezca la información de los seguidores, como es el caso de facebook y twitter. Hice algunas prueba pero no me resultó. Podrías ayudarme.
    Gracias por todo, y tienes razón, este fanbox es el más liviano de los sugeridos. chao

    • agosto 10, 2014    

      Hola María,
      Bueno, para ello tendrías que reemplazar el código de Google+, por el siguiente:
      <div class=”g-plus” data-action=”followers” data-height=”300″ data-href=”https://plus.google.com/XXXXXXXXXXXXXX” data-source=”blogger:blog:followers” data-width=”240″>
      </div>
      <script type=”text/javascript”>
      (function() {
      window.___gcfg = {‘lang’: ‘es’};
      var po = document.createElement(‘script’);
      po.type = ‘text/javascript’;
      po.async = true;
      po.src = ‘https://apis.google.com/js/plusone.js’;
      var s = document.getElementsByTagName(‘script’)[0];
      s.parentNode.insertBefore(po, s);
      })();
      </script>

      Solo reemplaza el XXXX… por tu id de Google+ 😀

      • agosto 12, 2014    

        Gracias, Jonathan. Intenté hacerlo desde el portátil, pero algo no funcionaba, sólo salía mi perfil en la mitad superior y el resto del cajón en blanco; pero pude hacerlo bien desde el pc, y me gusta. Era justo lo que quería. Sale un poco recostado hacia la izquierda, pero esta bien por el momento. Muchas gracias. He quedado más que satisfecha. Gracias por estar ahí brindándonos su apoyo. Un abrazo.

  3. septiembre 12, 2014    

    Muy buen gadget, lo que si el twitter no me funciona. les agradeceria si me ayudan a solucionarlo. gracias de antemano

  4. julio 19, 2015    

    Gracias amigo, gran aporte y buena página. Saludos desde Colombia.

    • Juvinao Juvinao
      julio 20, 2015    

      Amigo gracias por comentar.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo