Widget para que sigan y recomienden tu blog. Incluye: Botones de Twitter, Facebook, Insignia de Google+ y RSS

Creo que todos estamos de acuerdo en la importancia que tiene el tener en nuestro blog las v�as que permitan estar en contacto con nuestros lectores/seguidores a trav�s de las distintas redes sociales que usamos. Por ello, ponemos botones de Twitter, Facebook y Google+, de ese modo cualquier usuario puede acceder a nuestras p�ginas en dichas redes sociales, seguirnos o recomendarnos.



Pensado en eso y en alternativas efectivas para que puedas poner en tu blog, y as� facilitarle a tus usuarios que sigan y/o recomienden tu contenido, vamos a integrar todos esos botones en una cajita contenedora para que todas las opciones est�n siempre accesibles.



Esta cajita contendr�:

1. El bot�n de seguir de "Twitter para que te puedan seguirte desde ah�, sin tener que ingresar a tu p�gina de Twitter".

2. El bot�n de Facebook, para que los usuarios recomienden tu blog.

3. La insignia standar de Google+, para que puedan agregarte a un c�rculo y hacer +1 a tu blog.

4. Agregaremos tambi�n la v�a para que se suscriban al blog, pensando en que usas FeedBurner. Tambi�n un icono para que puedan suscribirse usando alg�n agregador, de los muchos disponibles.



Tal y como la puedes ver a continuaci�n:

C�mo agregar la cajita

Notas: Para la cajita tenga la apariencia que puedes ver, he hecho ajustes claves. En el caso de la insignia de Google+ por ejemplo, el ancho de �sta es mayor al ancho de la cajita contenedora, �sto para que no se vea una caja dentro de otra caja (la de la insignia dentro del contenedor).



El ancho de la cajita contenedora, es de 275 pixeles, por lo tanto, tu columna lateral deber� tener un ancho mayor a �ste. Se puede reducir la cajita y hacer los ajustes para que todo se vea bien proporcionado, pero �sto lo recomiendo a usuarios que ya sepan algo de CSS y adem�s hay que considerar que casi todos los botones e insignia, requieren un ancho m�nimo para que se muestren con sus caracter�sticas.



Bien, pues dicho lo anterior, ahora veamos c�mo agregaras la cajita, y como ya todo est� integrado, t� s�lo tendr�s que agregar los c�digos a tu blog, y editarlos con tus datos.

1. Primero, agregas el siguiente CSS (lo he comprimido), yendo a Plantilla > Personalizar > Avanzado > A�adir CSS. De ese modo, podr�s hacer cambios y ver el resultado desde ah�. No olvides aplicar los cambios en Aplicar al blog.
   
   

#caja-redes{width:275px;padding:0;margin:0;list-style:none;background:#f7f7f7;border:1px solid #dcdcdc;overflow:hidden}

#caja-redes strong, .c-rss{color:#848484;font-size:12px}

#caja-redes div{overflow:hidden}

.cg-plus{height:99px;padding-bottom:6px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;margin:0 -1px 0 -5px}

.c-fb{border-bottom:1px solid #dcdcdc;padding:8px 3px 2px;margin:5px}

.c-tw,.c-mail{margin:5px;padding:6px 3px 0}

.c-rss{margin:5px;padding:12px 4px}

a.c-rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfhmOKkaqQZTNDyvOdeEil7x7oTDcTgGPmmWwdbOEOj8y_oI2FIDrdT-xis6aiMoYwDvHL3GZKC5jX4FIKdKSS1eiykFn522iWUwilv8AxoUBuP4pW_cgUTk-6HaNHF8-HNuXo28O-Bs0/s1600/rss1.png) no-repeat 25% 40%;display:inline;padding:0 0 0 26px;color:#848484}

input[type="text"].campo,input[type="submit"].enviar{border:1px solid #dcdcdc;float:left;color:#848484;display:block;height:20px;font-size:11px}

input[type="text"].campo{text-indent:3px;width:145px;margin-right:-3px}

input[type="submit"].enviar{height:24px;cursor:pointer;text-shadow:0 1px 0 #fff;background:-webkit-linear-gradient(top,white,#d8d8d8);background:-moz-linear-gradient(top,white,#d8d8d8);background:-ms-linear-gradient(top,white,#d8d8d8);background:-o-linear-gradient(top,white,#d8d8d8)}


   
   


2. Luego, Vas a "Dise�o" y seleccionas un gadget en la secci�n de la columna lateral, con la opci�n de HTML/Javascript, y pones el siguiente c�digo que tendr�s que editar con tus datos. Una vez editados, guarda los cambios.
   
   <div id="caja-redes"><div class="c-fb"><iframe src="//www.facebook.com/plugins/like.php?locale=es_ES&amp;href=http%3A%2F%2Fwww.compartidisimo.com&amp;send=false&amp;layout=standard&amp;width=260&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=42" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:42px;" allowtransparency="true"></iframe> </div> <div class="c-tw"><a href="https://twitter.com/compartidisimo" class="twitter-follow-button" data-dnt="true"  data-lang="es" data-dnt="true">Seguir a @compartidisimo</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div><div class="cg-plus"><div class="g-plus" data-width="286" data-href="//plus.google.com/109627432877953314897" data-rel="publisher"></div></div><div class="c-mail"><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=compartidisimo&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><strong>Compartid�simo directamente a tu e-mail</strong><p><input class='campo' name='email' placeholder='ingresa tu e-mail' type='text'/></p><input name='uri' type='hidden' value='compartidisimo'/><input name='loc' type='hidden' value='es_ES'/><input class='enviar' type='submit' value='Suscr�bete'/></form> </div> <div class="c-rss">O suscr�bete por otras v�as:<a class="c-rss"  href="//feeds.feedburner.com/compartidisimo" title="V�a RSS" target="_blank">RSS</a></div>
   
   

 Edita los datos, de arriba hacia abajo tomando en cuenta que en:


• www.compartidisimo.com pones la URL de tu blog, omitiendo el http:// pondr�as por ejemplo miblog.blogspot.com, pensado que usas subdominio. 


• compartidisimo ah� pones el nombre de usuario de Twittter.


• Seguir a @compartidisimo  es el texto del bot�n de twitter.


• 109627432877953314897 ah� pones el ID de tu p�gina de Google+, o el del perfil. Para conseguir ese n�mero tienes que ir a la p�gina en Google+, y copiar la numeraci�n que aparece en la barra de direcciones de tu navegador.


• compartidisimo ah� pones la URI de FeedBurner. Puedes obtenerla accediendo a la p�gina de FeedBurner,y luego haces click en el icono de RSS que est� a un lado del nombre de tu blog, luego se abrir� una ventana con tus feeds. El nombre de la URI es el texto que aparece despu�s de la barrita diagonal "/" en la barra de direcciones. 


• Compartid�simo directamente a tu e-mail ese es el texto que aparece antes del campo para que ingresen el e-mail para la suscripci�n del blog.


• compartidisimo otra vez pones la URI de FeedBurner.


• O suscr�bete por otras v�as: este es el texto que esta antes del icono de RSS.


• compartidisimo ah� va de nuevo la URI de FeedBurner.

�Y listo!, ya habr�s agregado una cajita con todos los elementos para que sigan y recomienden tu blog ;)





Notas finales:

• El c�digo que esta de morado es de los scripts de Twitter y Google+ respectivamente (de arriba hacia abajo. He eliminado el script de G+, ya que ahora por defecto lo agrega a la plantilla por lo que no es necesario volverlo a poner*) Si ya usas algunos de esos elementos, no vuelvas a agregar el script, y aseg�rate que est� colocado hacia abajo despu�s del �ltimo bot�n.


• En el caso de la secci�n de facebook, no vayas a disminuir el alto en el c�digo (si usas el mismo ancho) , ya que hasta ahora, se muestran distintas leyendas si has o no ingresado a tu cuenta de Facebook.

Ah!, a prop�sito de facebook, hace mucho que quit� el bot�n para que hagas me gusta al blog, agradezco a quienes compartieron el enlace sin que yo tuviese el bot�n.  Todos los me gusta se perdieron al hacer el cambio de dominio, as� que si te gusta el blog, no olvides compartirlo en Facebook haciendo "Me gusta" ;)



�Quieres ver la cajita en acci�n?, entonces echa un vistazo a la demostraci�n.

Demostraci�n

Importante: Si vas agregar la insignia usando el perfil, y no una p�gina de Google+, necesitar�s cambiar el alto del espacio reservado para la insignia, (ya que ah� no se muestran los avatares, y por lo tanto, �sta es menos alta). Lo haces en esta parte del CSS (del paso 1)

.cg-plus{height:99px; ...

Cambia 99px,  por 52px. Ten cuidado de no borrar el punto y coma al final.



Enlaces de las p�ginas de las distintas redes sociales, con los botones oficiales

Bot�n de Seguir de Twitter

Bot�n de Me gusta de Facebook

Insignia de Google+



*Actualizado 29/Enero/2014. Hubo cambios en la insignia de Google, por lo tanto tuve que cambiar el alto del espacio reservado para �sta en la cajita. Tambi�n elimin� el script de Gogle+, ya que Blogger lo agrega por defecto a la plantilla.