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.