Fanbox para Facebook, Twitter, y Google Plus, flotantes y con efecto deslizante

AVISO
La API de Twitter cambi? y ahora requiere autenticaci?n para obtener los datos de los seguidores, por tal motivo �ste y los dem?s fanbox para Twitter han dejado de funcionar. Si me entero de una soluci?n u otra alternativa lo publicar� de inmediato.

Hace alg?n tiempo vimos c?mo poner el fanbox de Facebook flotante y con efecto deslizante. En esa ocasi?n usamos un plugin de jQuery que aunque es bueno tiene la desventaja que la versi?n gratuita s?lo permite poner una pesta?a nada m?s, adem?s que quienes usan otras librer?as ten?an problemas de compatibilidad.

En esta ocasi?n lo haremos s?lo con CSS, de manera que no utilizaremos ni un solo sript y podremos mostrar no s?lo una sino tres pesta?as, el fanbox de Facebok, el fanbox de Google+, y el fanbox de Twitter.
Puedes ver un ejemplo en esta misma entrada, lo ver?s del lado derecho de la ventana.

Bien, para poner estos fanbox flotantes en el blog s?lo tenemos que ir a Dise?o | A?adir un gadget | HTML/Javascript y ah? pegar el siguiente c?digo:

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6PbfhvgVwmOHo_XI-swo7JXrf9IKhm7P7g069y3yjbsu_LlOdXwBKRqDc6wOFIHOO04NRYPz72g04faBh539MSY_Ja8eXwyBJ-oHtuefR0dkYHeZ6JoVxJGijTIwsXDmL3WrErzPoUtQ/' 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWl9kVvTqTwBV9YC5MnIjEThYc0cqhTzK2dklEtHBDxio0C8J2dewQ_x3WZojuOoULdwMvmSZUDZbn4qzAaDipRNtTz_irCu0H4UBrVSaqGz2au67mAMVgN5U76q0jGFKd9gCB4jDhB6w/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmSXkX0c_MvN-3mKJUL7us429BbFrlqdm-Uhzey7PmS-qzw5maiw_K6E42OsM065zbPud07_yHpYCEaz5LngiQvITffU5oUN_Hf37DRvwrPyijFofp-mwbIYeFbSKG_lAHC_BhyphenhyphenxepLF0/' 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS54E2kPnN9KBiqE1nVI5LtT-Cp1PofqoFGu3y4vue-two7Ay0Ur90tj7yZ7aRcsppKz08EU2_vdTZav8xeRJYn8pw2_cjxxXVJYq1TG-g6JDqsGjT3tWtFA9r0SzOfp49XE8l-S0YxyY/";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)(?=(\d\d\d)+(?!\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>

Agrega donde se indica el nombre de tu p?gina de Facebook, tambi�n pon la ID de tu p?gina de Google Plus en donde est?n las equis en rojo, y el nombre de tu usuario de Twitter tambi�n donde se indica en color rojo.

El ID de tu p?gina de Google Plus lo puedes ver ingresando a tu p?gina, y al final de la URL aparecer?n una serie de letras y n?meros, ese es tu ID.

En el caso del fanbox de Twitter hemos usado el fanbox para Twitter que vimos recientemente, pero puedes usar otro, o bien, quitar la pesta?a, o sustituirla por otro contenido, pues al menos ese fanbox s? usa jQuery y puede causar incompatibilidad con otros scripts.

En caso de que quieras cambiar alguna pesta?a por otro tipo de contenido tendr?s que localizar la URL de la imagen de la pesta?a (color azul) y sustituirla por la que dise?es, luego quitar el contenido de la pesta?a (seg?n sea el caso) y en su lugar poner el c?digo que desees.

La ventaja de este m�todo es que no usamos scripts para las pesta?as, ni para esconderlas, ni para mostrarlas, ni para el efecto deslizante. La contra es que el efecto deslizante son transiciones con CSS por lo que los navegadores que no son modernos no podr?n ver el efecto de deslizamiento. Fuera de esto ?ltimo es un m�todo que adem?s de ser f?cil de aplicar tambi�n es una buena opci?n para tener tus distintos fanbox agrupados y mostr?ndolos de una forma elegante y original.

ACTUALIZACI?N 1:

Si el fanbox de Facebook te marca error puede ser porque a?n no tienes una URL personalizada en tu p?gina de Facebook, en esos casos deber?s cambiar esta parte:

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

Por esta:

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 donde se indica deberás poner en las equis una serie de números que aparecen al final de la URL de tu página de Facebook.

ACTUALIZACI?N 2:

Es preciso mencionar nuevamente que el fanbox de Twitter s? usa jQuery por lo que si ya tienes alguna versi?n de jQuery o si usas otra librer?a de scripts como Scriptaculous entonces no se ver?, en esos casos habr? que eliminar la versi?n de jQuery que incluye el gadget y/o hacer unos cambios para que sea compatible con Scriptaculous. Para m?s informaci?n mira la entrada sobre el fanbox de Twitter.