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

Relacionados

Redireccionar el blog a una nueva dirección Cuando mudamos nuestro blog a otra dirección diferente a la tipica .blogspot.com es bueno redireccionar automáticamente el blog para no perder visit...
Iconos de Suscripción en redes Sociales con efect... En esta ocasión he creado un espectacular truco para tu blog, con el cual agregaras un pack de iconos de suscripción con efecto Zoom al pasar el cur...
Emoticones de Taringa! para Blogger Tal vez muchos conozcan la famosa pagina argentina Taringa! que aglutina a millones de usuarios y es probable que tambien conozcan los emoticones que ...
Marcadores Sociales “style to fashion”... Muchos de ustedes me han pedido unos marcadores sociales que use hace un tiempo asi que hoy os complacere y compartire dichos marcadores a los que pus...

Share

95 comentarios en “Fanbox de Facebook, Twitter, y Google +, flotantes y con efecto deslizante

  1. 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.

  2. 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ú!!!!

  3. 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

  4. 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.

  5. 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

  6. 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

  7. 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!

  8. 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

  9. 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

  10. 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 😉

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>