Facebook, Twitter, Google plus y la caja de suscripción en forma flotante con jQuery

Ya había brindado con anterioridad varias opciones para que añadan botones sociales para que así sus lectores ó visitantes de su blog compartan el contenido en las redes sociales más populares, tales como lo son Facebook, Twitter y Google plus.



En esta ocasión les traigo 4 botones que van de forma flotante al lado derecho de la página, estos botones son:


> Facebook: Aquí se mostrarán los fans de tu página en facebook.


> Twitter: Aquí se mostrarán tus últimos tweets de tu cuenta de twitter.


> Google Plus: Un gadget para que los visitantes y/o lectores de tu blog te añadan a sus círculos en google plus.


> Caja de suscripción: Aquí es para que los visitantes y/o lectores de tu blog se suscriban y reciban tus próximas publicaciones en sus correos electrónicos.




Estos botones mostrarán la caja con el contenido respectivo de cada red social al sobreponer el mouse sobre estos.

VER DEMO




Para añadir estos botones en Blogger, sigue estos pasos:


1) Iniciamos sesión en Blogger > Diseño > Edición de HTML

2) Presionamos (Ctrl + f) y buscamos el siguiente código:

]]></b:skin>

3) Ahora justo encima (ó antes) de ese código, pegamos lo siguiente:

#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:196px;height: 353px;overflow: hidden;}
#twitter_div {width:250px;height: 353px;overflow: hidden;}
#google_plus_div {width:350px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;right: -200px;}
#facebook_right img {position: absolute;top: -2px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
#twitter_right {z-index: 10004;border:2px solid #6CC5FF;background-color: #6CC5FF;width:246px;height: 353px;position: fixed;right: -250px;}
#twitter_right_img {position: absolute;top: -2px;left: -35px;border: 0;}
#google_plus_right {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:200px;height: 143px;position: fixed;right: -203px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10002;background-color: #fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:300px;height: 97px;position: fixed;right: -303px;}
#feedburner_right_img {position: absolute;top: -2px;left: -33px;border: 0;}

4) Luego buscamos lo siguiente:

</head>

5) Ahora justo encima (ó antes) de ese código, añadimos lo siguiente: 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready
(function(){jQuery(&quot;#facebook_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -200}, 500); }); 
jQuery(&quot;#twitter_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery(&quot;#twitter_right&quot;).stop(true,false).animate({right: -250}, 500); }); 
jQuery(&quot;#google_plus_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery(&quot;#google_plus_right&quot;).stop(true,false).animate({right: -203}, 500); }); 
jQuery(&quot;#feedburner_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery(&quot;#feedburner_right&quot;).stop(true,false).animate({right: -303}, 500); }); });
</script>

6) Ahora debemos añadir un código en un gadget de Blogger. Para ello nos vamos a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y dentro de él, pegamos lo siguiente:

<div id="on">
<div id="facebook_right" style="top: 18%;">
<div id="facebook_div">
<img src="http://3.bp.blogspot.com/-XmXmlBqBIsk/T0bpFKqRpbI/AAAAAAAAGps/DqATKGBCHPg/s1600/Facebook.png" alt="boton facebook flotante" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Qui%C3%A9n-me-visita-en-facebook/152132771515923&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356" scrolling="no"></iframe>
</div>
</div>
</div>
<div id="on">
<div id="twitter_right" style="top: 35%;">
<div id="twitter_div">
<img id="twitter_right_img" src="http://1.bp.blogspot.com/-ldfb1FsK_Xk/T0bpHaTD5nI/AAAAAAAAGqE/7y1fL69TQa8/s1600/Twitter.png" />
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 1000,
width: 246,
height: 240,
theme: {
shell: {
background: '#63BEFD',
color: '#FFFFFF'
},
tweets: {
background: '#FFFFFF',
color: '#000000',
links: '#47a61e'}
},
features: {
loop: false,live: true,
scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }
}).render().setUser('BloggeameB').start();
</script>
</div>
</div>
</div>
<div id="on">
<div id="google_plus_right" style="top: 52%;">
<div id="google_plus_div">
<img id="google_plus_right_img" src="http://2.bp.blogspot.com/-Q8SAVb6KRts/T0bpFhy05SI/AAAAAAAAGp0/2lgLMo6TZKQ/s1600/Google+Plus.png" />
<div style="float:left;margin:1px 0px 0px 2px;"><script type="text/javascript">mbgc='006ec9';ww='350';mbc='006ec9';bbc='006ec9';bmobc='3b71c6';bbgc='006ec9';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='ffffff';tc='ffffff';nc='ffffff';bc='ffffff';l='y';t='Agrégame en';fs='20';fsb='13';bw='3F79D5';ff='4';pc='4889F0';b='0'; pid='111423281534388398790';</script><script type="text/javascript" src="http://widgetsplus.com/google_plus_widget.js"></script></div>
</div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 69%;">
<div id="knfeedburner_div">
<center><br />↓ ↓ ↓ ↓ ↓ ↓ Suscríbete ↓ ↓ ↓ ↓ ↓ ↓
<h4 style="color:#F66303;">Ingresa tu correo electrónico y recibe nuestras actualizaciones gratuitamente:</h4> 
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BloggeameBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="tu_correo@mail.com" onblur="if (this.value == &#39;&#39;) {this.value = &#39;tu_correo@mail.com&#39;;}" onfocus="if (this.value == &#39;tu_correo@mail.com&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="BloggeameBlogger" name="uri" type="hidden" /><input value="Enviar" class="submitbutton" type="submit" /></form>
</center>
<img id="feedburner_right_img" src="http://4.bp.blogspot.com/-AQ0-4GevtQw/T0bpGAnWPzI/AAAAAAAAGp8/CnbS1tagM8Q/s1600/Subscribe.png" />
</div>
</div>
</div>

7) Para finalizar, antes de guardar, debemos realizar algunos cambios en el código que añadimos en el gadget, reemplazaremos lo que está de color rojo por nuestra información:


> La primera línea de color rojo lo reemplazas por la URL de tu página de fans de facebook.


> La segunda línea de color rojo lo reemplazas por tu nombre de usuario en twitter.


> La tercera línea de color rojo lo reemplazas por el ID de tu página de fans de Google Plus. Si cuentas con una página de fans de Google plus para tu blog ó si no sabes cuál es la ID de tu página de Google plus, entonces visita esta entrada.


> La cuarta y sexta línea de color rojo lo reemplazas por el nombre de tu feed de feedburner. Si no cuenta con una cuenta en feedburner y deseas crear una, entonces visita esta entrada.


8) Hecho los cambios respectivos, guarda los cambios de tu gadget y eso sería todo. Imprimir artículo