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.


9 comentarios

Anonymous · agosto 1, 2014 a las 8:52 pm

muy ingenioso, gracias por compartirlo

María Eugenia Marínez Garcés · agosto 8, 2014 a las 12:44 pm

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

    Jonathan Lozano · agosto 10, 2014 a las 9:27 pm

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

      María Eugenia Marínez Garcés · agosto 12, 2014 a las 10:25 am

      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.

juan perez · septiembre 12, 2014 a las 10:05 pm

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

@Jolombiano · julio 19, 2015 a las 6:23 am

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

    Juvinao · julio 20, 2015 a las 4:26 pm

    Amigo gracias por comentar.

Responder a juan perez Cancelar la respuesta

Marcador de posición del avatar

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