Fanbox de Facebook, Twitter, y Google +, flotantes y con efecto deslizante

Desde que actualice la imagen de Mil Trucos Blogger, uno de los trucos mas pedidos por los lectores ha sido el de los fanbox de facebook, Twitter y Google plus que se ven en la parte lateral del blog, así que hoy me he decidido a compartirlo con todos ustedes.

Este truco es muy fácil de añadir, y lo mejor es que para el efecto deslizante los fanbox de Facebook y Google Plus usan CSS y no librerías como jQuery que sobrecarguen el blog.

Vista previa del truco (cuando esta desplegado)


Vista previa del truco (cuando esta plegado)

Para añadir este truco a tu blog, solo tienes que ir a Diseño, Añadir Gadget, HTML/JavaScript y pegar lo siguiente:

<style>
#flotante1 {
position:fixed;
top:100px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1002;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante2 {
position:fixed;
top:240px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1003;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante3 {
position:fixed;
top:380px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante1:hover, #flotante2:hover, #flotante3:hover {
right:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left:-45px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}
</style>
<!-- Primera pestaña -->
<div id='flotante1'>
<img src='http://lh3.googleusercontent.com/-vq69jjHi_aA/UKxnEYWptDI/AAAAAAAADdU/1bjiSBYnRSo/fb_tab.png' style='float:left;'/>
<div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:none; overflow:hidden; width:240px; height:325px;'/></iframe>
</div></span></div></div>
<!-- Segunda pestaña -->
<div id='flotante2'>
<img src='http://lh6.googleusercontent.com/-vQ5RYEg0TVU/UOCXFfh4mZI/AAAAAAAADz4/kWTI9_MxfPE/s159/goo_tab.png' style='float:left;'/>
<div style='background: #9A9FA8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap' style="padding-left:20px; padding-top:15px; height:310px !important;">
<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>
</div></span></div></div>
<!-- Tercera pestaña -->
<div id='flotante3'>
<img src='http://lh3.googleusercontent.com/-RhKk8PrLf6Q/UKxmjhdUHAI/AAAAAAAADdI/wUbRpY6XfiQ/tw_tab.png' style='float:left;'/>
<div style='background: #00a0e8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<style>
.follow_box_widget{overflow: hidden; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #fff transparent; position: relative; margin: auto;}
.follow_box{font-size: 11px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; color: #333; line-height: 1.28; text-align: left; direction: ltr;}
.follow_box .follow_top{padding: 5px 10px 0px 5px; margin-bottom: 8px; min-width: 230px; overflow: hidden;}
.follow_box .profileimage{float: left; width: 40px; height: 40px; padding: 0px; margin: 0 10px 4px 0;}
.follow_box img{border: 0;}
.follow_box a{cursor: pointer; color: #3B5998; text-decoration: none;}
.follow_box a:hover{text-decoration: underline;}
.follow_action{padding: 0 0 0 8px;}
.follow_box .follow_action .name{line-height: 15px; font-size: 14px; font-weight: bold;}
.follow_box .follow_button{margin: 5px 0 0;}
.follow_box .total{min-width: 230px; overflow: hidden; display: block;}
.follow_box .connections{padding: 5px 0 4px 0px; border-top: solid 1px #D8DFEA; border-bottom: 1px solid #CCC; min-height: 150px;}
.follow_box .connections .connections_grid{padding-top: 5px; overflow: hidden;}
.follow_box .clearfix{zoom: 1;}
.follow_box .connections .connections_grid .grid_item{float: left; margin:0px; margin-right: 5px; margin-bottom: 8px; overflow: hidden; width: 50px;}
.follow_box .connections .connections_grid .grid_item .name{font-size: 9px; color: gray; overflow: hidden; padding-top: 2px; text-align: center; white-space: nowrap;}
.follow_box .connections .connections_grid .grid_item img{width: 48px; height: 48px;}
.follow_box .follow_widget_footer{ cursor: default; width: 100%; min-width: 230px; overflow: hidden;}
.follow_box .footer_border{ margin-top: 5px;}
.follow_box .uiImageBlock{line-height: 14px;}
.follow_box .follow_widget_footer .footer_logo{float: left; margin-right: 5px;}
.follow_box .follow_widget_footer .footer_text{cursor: default; color: #808080; font-size: 9px; float: left;}
.follow_box .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}
.follow_box .titlecase{text-transform:capitalize;}
</style>
<script>
/*
* Twitter Follow Box jQuery Plugin
* http://jobyj.in/twitter-follow-box-widget/
* Copyright 2012, Joby Joseph
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(a){a.fn.followbox=function(b){function f(a,b){if(a>100)a=100;var c=new Array;for(var d=0;d<a;d++){c.push(b[d])}var e=c.join();return e}var c=a(this);var d="https://lh6.googleusercontent.com/-FnahS38iTbo/UK2l4ayjh8I/AAAAAAAADeg/kiJmxA2CfLc/icon_twitter.png";var e=a.extend({user:"jobysblog",width:292,height:252,theme:"light",border_color:"#AAA",bg_color:"#fff",bg_image:"",title_color:"#3B5998",total_count_color:"#333",follower_name_color:"#BBB"},b);a.ajax({url:"http://api.twitter.com/1/users/lookup.json?screen_name="+e.user+"&include_entities=true",dataType:"jsonp",success:function(b){var g=e.width-2;var h=e.height-2;var i=e.height-115;var j=parseInt(e.width/55);var k=parseInt(i/69)+1;var l=j*k;c.html('<div class="follow_box_main" style="border: 1px solid #bbb; width: '+g+"px; height: "+h+'px;"><div class="follow_box_widget"><div class="follow_box"><div><div class="follow_top clearfix"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><img class="profileimage img" src="'+b[0].profile_image_url_https+'" alt="'+b[0].name+'"></a><div class="follow_action"><div class="name_block"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><span class="name titlecase">'+b[0].name.toLowerCase()+"</span> @"+b[0].screen_name+'</a></div><div class="follow_button"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name='+e.user+'&show_count=false&show_screen_name=false&lang=es" style="width:100px; height:20px;"></iframe></div></div></div><div class="connections"><span class="total"><span class="follow_box_follower_count">'+b[0].followers_count+'</span> personas siguen a <b class="titlecase">'+b[0].name.toLowerCase()+'</b></span><div class="connections_grid clearfix" style="height:'+i+'px;"></div></div></div><div style="height: 23px"><div class="follow_widget_footer"><div class="footer_border"><div class="clearfix uiImageBlock"><a class="footer_logo" target="_blank" href="http://jobyj.in/twitter-follow-box-widget"><img src="'+d+'"/></a><div class="footer_text"><a class="footer_text_link" target="_blank" href="http://jobyj.in/twitter-follow-box-widget">Twitter Social Plugin</a></div></div></div></div></div></div></div></div>');if(e.theme=="dark"){c.find(".follow_box_main").addClass("dark")}c.find(".follow_box_follower_count").text(c.find(".follow_box_follower_count").text().replace(/(d)(?=(ddd)+(?!d))/g,"$1,"));if(a.browser.msie&&!a.support.boxModel)a(".follow_box .connections").css("padding-bottom","14px");if(e.theme=="custom"){c.find(".follow_box_main").css({"border-color":e.border_color,"background-color":e.bg_color,"background-image":'url("'+e.bg_image+'")'});c.find(".follow_box a").css({color:e.title_color});c.find(".follow_box .total").css({color:e.total_count_color})}a.ajax({url:"https://api.twitter.com/1/followers/ids.json?cursor=-1&screen_name="+e.user,dataType:"jsonp",success:function(b){var d=f(l,b.ids);a.ajax({url:"https://api.twitter.com/1/users/lookup.json?user_id="+d+"&include_entities=true",dataType:"jsonp",success:function(b){for(var d=0;d<b.length;d++){var f=a.trim(b[d].name);var g=f.split(" ");var h='<div class="grid_item"><a href="http://twitter.com/'+b[d].screen_name+'" target="_blank"><img class="img" src="'+b[d].profile_image_url+'" alt=""><div class="name titlecase">'+g[0].toLowerCase()+"</div></a></div>";c.find(".connections_grid").append(h)}if(e.theme=="custom"){c.find(".connections .connections_grid .grid_item .name").css({color:e.follower_name_color})}}})}})}})}})(jQuery)
</script>
<script>
$(document).ready(function(){
$('#twitterfollowbox').followbox({
'user':'usuarioTwitter',
'height':'300',
'width':'260',
'theme':'custom',
'border_color':'#ffffff',
'bg_color':'#ffffff',
'bg_image':'',
'title_color':'#3B5998',
'total_count_color':'#333333',
'follower_name_color':'#BDBDBB'
});
});
</script>
<div id="twitterfollowbox" class="follow-box-container"> </div>
</div></span></div></div>

Ahora reemplaza lo que esta en azul, por lo que se indica, en el caso de facebook donde dice nombre-de-la-página-de-facebook  reemplazalo por el nombre de tu pagina en facebook, lo mismo con el usuario de Twitter, lo que cambia es en la parte de Google Plus donde dice XXXXXX la cambias por tu ID de G+, esta la puedes hallar en la URL de tu perfil o pagina en G+, en mi caso la URL de mi perfil es:

https://plus.google.com/u/0/110888572152479100284/posts

Donde  110888572152479100284 es la ID en G+.

Ahora solo queda que guardes los cambios.

Espero que les haya servido el tutorial, y sigan visitando Mil Trucos Blogger 😉

ACTUALIZACIÓN 

Si en el fanbox de Facebook te sale algún error, es posible que se deba a que no tienes una URL personalizada en tu página de Facebook, en este casos deberás cambiar esta parte:

http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook

Por esta otra:

http%3A%2F%2Fwww.facebook.com%2Fpages%2Fnombre-de-la-página-de-facebook%2FXXXXXXXXXXXXXXX

Ahí además de poner el nombre de tu página de facebook donde se indica, deberás añadir en las XXXX una serie de números que aparecen al final de la URL de tu página de Facebook.

Vía. Ciudad Blogger

Share

95 thoughts on “Fanbox de Facebook, Twitter, y Google +, flotantes y con efecto deslizante

  • mayo 10, 2013 at 2:49 am
    Permalink

    Hola Hayder, como te darás cuenta también cambie la plantilla de emprendernegociosmultinivel.blogspot.com, resulta que he estado haciendo todo para que me quede en el blog esta fanbox pero no me aparecen los seguidores de las redes sociales, que estará pasando, copio bien las direcciones de mil sitios pero nada de nada.

    Gracias por tu respuesta.

    Reply
    • mayo 11, 2013 at 7:56 pm
      Permalink

      Amigo haz todos los pasos de nuevo, desde el principio y si aun te sigue sin funcionar me avisas y te ayudo.

      Saludos

      Reply
    • mayo 15, 2013 at 2:26 am
      Permalink

      Hayder, la cosa se puso de que ya no salen los contactos de FB, hice lo de las actualizaciones, no se arregla nada, mi dirección de Twitter es @AgudeloIvan y no quiere, le he intentando con otras formas de nombre en Twitter y nada. Sugiero revisar bien su HTML, algo está pasando.

      Reply
  • mayo 11, 2013 at 4:19 pm
    Permalink

    una pregunta, ya coloque el codigo en mi plantilla, pero solo aparece en la pagina principal del blog mas no en las paginas de entradas.. por favor podrias ayudarme para corregir este error… saludos desde perú!!!!

    Reply
    • mayo 11, 2013 at 7:59 pm
      Permalink

      Wilber seguro es alguna condicional la que evita que salga el fanbox en las entradas.

      Reply
  • mayo 12, 2013 at 3:02 am
    Permalink

    hola estimado Hayder, estaba tratando de aplicar el flotante que mencionas en tu pagina, pero te queria preguntar sobre un problema que tengo. Me carga sin problemas tweeter y +google en mi pagina pero el problema es faceebook el cual me queda en blanco. He copiado mil veces la direcciòn de mi pagina pero nada, sabes cual serìa el problema?, saludos, ah el blog es http://ipemasoc.blogspot.com.ar/ y la face es ipem.asociacioncivil

    Reply
  • mayo 13, 2013 at 9:54 pm
    Permalink

    A todos los que le presenta algún problema el fanbox de facebook, les informo que mañana actualizare la entrada con su respectiva solución a este problema :)

    Saludos a todos

    Reply
  • mayo 13, 2013 at 11:46 pm
    Permalink

    a mi tambien me falla el facebook me aparece en blanco, en twitter me aparecia lo mismo por qu eel nombre de usario lo ponia con @ y es sin @ pero en facebook no eh podido encontrarle solucion.

    Reply
  • mayo 16, 2013 at 7:23 am
    Permalink

    puedo usarlo en wordpress?

    Reply
  • mayo 19, 2013 at 6:20 am
    Permalink

    Hola, Te cuento que puse este truco en el blog y quedó re bien, pero sólo que con los seguidores de google+ no aparecen las caritas y queda en blanco, sale un mensaje que dice que los seguidores son privados. Gracias desde ya y disculpá la molestia !!!
    Mónica.

    Reply
    • junio 18, 2013 at 6:31 am
      Permalink

      Hola Hayder, gracias por preocuparte, el blog es http://www.zoomgraf.blogspot.com
      el de twitter anduvo bien hasta hace unos dias que no aparece nada, pero en el que tenes en esta página tampoco me aparece nada, eso quizas sea mi navegador, disculpa la tardanza en responderte pero no estuve con mucho tiempo estos dias.
      Gracias !!!!!

      Reply
  • mayo 20, 2013 at 5:09 am
    Permalink

    saludos, que tendríamos que modificar para que salga del lado izquierda de la pagina

    Reply
  • mayo 20, 2013 at 6:16 am
    Permalink

    amigo me da el mismo problema no sale ni facebook ni twitter salen en blanco te agradeceria tu pronta ayuda

    Reply
  • mayo 20, 2013 at 7:17 am
    Permalink

    una consulta amigo, en la parte del twitter en lugar de los eguidores si quiero que se vea mi linea de tiempo (timeline) que deberia hacer ? ya lo hice para el facebook pero de verdad en la parte de twitter se me dificulto mucho

    Reply
    • mayo 23, 2013 at 4:27 pm
      Permalink

      Amigo esto no se puede al menos con este código, hay que modificarlo un poco, me diste la idea para un nuevo truco para Blogger 😎

      Reply
  • mayo 23, 2013 at 4:25 pm
    Permalink

    A los usuarios que pese a la actualización les sigue presentando problemas, tal vez se deba a que el fanbox de Twitter usa jQuery, en estos días publicare una nueva actualizacion, espero que esto les solucione todos los problemas

    Reply
    • mayo 26, 2013 at 9:39 am
      Permalink

      Hayder buen truco pero el usuario de twitter no me va lo e puesto con @ y sin @ donde pone ‘user’:’usuarioTwitter’,pongo mi twitter que es Fran_Vicente_V y no va me podrías ayudar.

      Reply
  • mayo 26, 2013 at 10:47 pm
    Permalink

    Disculpa la molestia, pero me gustaría que me ayudaras porque en la parte de twitter no sale mi twitter y se queda en blanco.

    Reply
  • mayo 29, 2013 at 10:12 am
    Permalink

    HOla amigo, primero gracias por compartir el tutorial!

    Tengo un problema, cuando pongo el id de google+ funciona bien, cuando agregue el de facebook me lo tomo enseguida pero cuando puese el id de twitter, no se que paso que nunca me me funciono ni el de twitter ni el defacebook.

    Que puede estar pasando? Porque el de facebook andaba, es mas hasta llegue a darle a me gusta!

    Reply
  • junio 14, 2013 at 10:03 pm
    Permalink

    A PARTIR DEL DIA 14 DE JUNIO ESTA FALLANDO TWITTER, APARECE EN BLANCO

    Reply
  • junio 15, 2013 at 10:04 am
    Permalink

    sí, está fallando el twitter, quedaremos a la espera de solución 😉

    Reply
  • junio 16, 2013 at 8:58 am
    Permalink

    Gracias!! Me funciono muy bien… solo tengo problema con Twitter, no aparece mi usuario… :/ Bueno, espero que me ayudes!! n_n Gracias!!

    Reply
  • junio 21, 2013 at 2:13 pm
    Permalink

    Hola:

    Parece que twitter ha cambiado el codigo, asique seguimos esperando una posible solucion compañero.

    Te doy sinceramente las gracias por compartir estos conocimientos y la verdad que es un gadget muy bueno.

    Gracias y saludos

    Reply
  • junio 24, 2013 at 11:57 am
    Permalink

    La Api de Twitter ha dejado de funcionar, así que por el momento no hay un reemplazo para el fanbox de Twitter, seguiré buscando.

    Saludos

    Reply
    • junio 26, 2013 at 11:40 am
      Permalink

      Vale! Gracias y como puedo quitar solo el de Twitter como tu lo tienes? por que he quitado solo las zonas de Twitter y ha dejado de funcionar todo xD Gracias de nuevo.

      Reply
  • junio 26, 2013 at 3:28 pm
    Permalink

    Gracias por tu trabajo hayder, seguiremos esperado que seguro que das con ello, eres un crack

    Saludos y gracias

    Reply
    • julio 2, 2013 at 9:32 pm
      Permalink

      Jose el fanbox de twitter ha dejado de funcionar debido a que la API de Twitter fue desactivada.

      Saludos

      Reply
  • julio 19, 2013 at 1:21 am
    Permalink

    Tengo un problema con estos fanbox deslizantes.. Al ponerlos en mi blog los fanbox funcionan erfectamente, pero me dejan de funcionar mi Slaider y el efecto de mis entradas. Te dejo el link de mi blog para que veas a que efectos me refiero saludos.

    http://www.cine-hd2.com

    Reply
  • julio 24, 2013 at 2:53 pm
    Permalink

    Una alternativa para evitar el donativo aquí

    Reply
  • agosto 7, 2013 at 5:51 pm
    Permalink

    excelente ayuda….. muchas gracias…..

    que ocurre si no quiero la barra de google + que parte borro del código?

    Reply
  • agosto 16, 2013 at 8:45 am
    Permalink

    Hola. teniendo en cuenta que no funciona lo del twitter, obte por sacarlo. he eliminado desde:
    el resultado es que no me aparece mas la pestaña. pero ahora no me carga los datos de G+. solo el de facebook. alguna sugerencia?

    te agradezco por el trabajo y ya te sigo. un abrazo

    Reply
  • agosto 23, 2013 at 4:55 pm
    Permalink

    Hola para los que necesitaban soluciones con lo de twitter les cuento que una forma de solucionarlo es crear el wigets desde tu twitter y copiar el codigo que se genera reemplazando en la parte final. Deben borrar el ultimos script y pegar el codigo que generaron desde twitter. lo probe en un blog de wordpress y funciono perfecto. espero les sera util como fue esto para mi. saludos y gracias x el codigo 😉

    Reply
    • septiembre 4, 2013 at 9:54 pm
      Permalink

      Silvia te funciono el de Twitter?

      Algo raro, voy a volver a probar el script

      Saludos

      Reply
    • septiembre 16, 2013 at 1:28 am
      Permalink

      No me refiero a las imágenes de los fans jeje, me refiero a la imágen que aparece cuando carga la web (fijate en esta página) el script está funcionando pero la imagen no se ve porque ya no existe…

      Reply
  • octubre 21, 2013 at 4:43 pm
    Permalink

    hola amigos yo intente poner lla pagina esa deslisante pero como ago para pner que cuando miren este mi pagina de megusta

    Reply
  • octubre 21, 2013 at 4:44 pm
    Permalink

    como yo ya puse la pagina deslizante pero como ago para cuando un dan hay salga mi pagina de me gusta
    o mi facebook

    Reply
  • octubre 21, 2013 at 4:45 pm
    Permalink

    aaaaaa quien me esplica como ponerlo

    Reply
  • octubre 21, 2013 at 6:58 pm
    Permalink

    Amigo para personalizar el fanbox con tu fanpage sigue los datos que explico en la entrada.

    Saludos

    Reply
  • diciembre 13, 2013 at 10:07 pm
    Permalink

    para los que no les funciona el slider solo eliminen esta parte y listo

    jquery

    Reply
  • marzo 1, 2014 at 8:45 pm
    Permalink

    hice todo igual y no funciona huce un blog de prueba para ver si servia y no sirvio

    Reply

Deja un comentario

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