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

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

9 thoughts on “Fanbox de Facebook, Twitter y Google+ con efecto acordeón

  • agosto 1, 2014 en 8:52 pm
    Permalink

    muy ingenioso, gracias por compartirlo

    Responder
  • agosto 8, 2014 en 12:44 pm
    Permalink

    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

    Responder
    • agosto 10, 2014 en 9:27 pm
      Permalink

      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+ 😀

      Responder
      • agosto 12, 2014 en 10:25 am
        Permalink

        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.

        Responder
  • septiembre 12, 2014 en 10:05 pm
    Permalink

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

    Responder

Deja un comentario

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