Botones Sociales para Compartir las Entradas de Blogger

Los botones para compartir entradas del blog en redes sociales, son la llave maestra para cualquier bloggero (avanzado o novato) nada mejor que un usuario al que le gusto una de tus publicaciones pueda compartirla con sus amigos o conocidos, aquí es donde entras los botones sociales ya que ayudan a difundir el contenido de nuestras publicaciones y las mismas atrayendo mas publico y ahorrándonos trabajo de difucion del blog, siendo esto muy importante ahora que las redes sociales tienen un peso mayor sobre los buscadores. En esta entrada te enseñare como colocarlos en tu blog, mas que todo en las entradas individuales, por experiencia propia usaremos los mas populares, como lo son el de Me gusta, Twittear y +1, pero igual tendremos de los otros, también este truco sirve para wordpress y otros sitios web, no confundir, si lo que estas buscando es colocar iconos tipo sígueme en tu blog sigue esta entrada para colocar iconos para seguidores por otro lado si quieres los botones pero para una URL especifica visita esta entrada de botones para difundir la pagina principal, basta de parloteo y manos a la obra.

Si estas en un dispositivo movil, te recomiendo acceder desde una computadora ya que requiere editar la plantilla de blogger, pero puedes aplicar la ultima forma desde moviles.

Primero te presento este diseño de botones que creo ya habrás visto, este queda de impacto debajo del titulo del post o al final del post, míralo a continuación en funcionamiento:

Botones para compartir entradas en redes sociales

Tweet

Imagina que están debajo del titulo de tu entrada, se verían increíble cierto?, te mostrare como colocarlos debajo del titulo y al final del post, para agregar estos botones a blogger:

1. Crear copia de seguridad ( crea un respaldo en caso de fallos)
2. Una ves creado el respaldo dirígete a Blogger, luego a Plantilla.
3. Pulsa en Editar HTML y da click en cualquier parte dentro del html
4. Pulsa las teclas Ctrl F (en Mac ⌘F) para activar el buscador
5. En el buscador que sale busca estos códigos (dependiendo en donde quieres colocar los botones), para cada caso no copiar juntos, buscar cada uno por separado.


• Para colocarlos debajo del titulo de la entrada



<div class='post-header'>
<div class='post-header-line-1'/>



• Para colocarlos al final de la entrada



<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>


Si usas una plantilla de blogger para cada caso te saldrán 2 de estos códigos, cual sea el que hayas escogido nos vamos a la segunda porque la primera es la de moviles.


6. Ahora copia este código:



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='botones'>
<table border='0'>
<tr>
<td align='left'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:107px; height:20px;'/></td><td align='center'><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></td><td align='right'><a class='twitter-share-button' data-lang='es' href='https://twitter.com/share'>Twittear</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>
</tr>
</table></div><style type='text/css'>table{border-collapse:separate;margin:0 0 1.5em;width:100%}#botones {border-bottom:1px solid #ebebeb;border-top:1px solid #ebebeb;height:40px;line-height:40px;margin:10px 0}</style></b:if>




7. Por ultimo pega el código que copiaste entre la primera y segunda linea, la cual hayas escogido, para que queden tus botones sociales en las estradas de tu blog.
8. Guarda los cambios y listo, disfruta tus botones!.

---

Bien, para la segunda forma tengo los mismos botones pero con el diseño diferente, el de tipo caja, puedes ver un ejemplo de ellos como en la imagen que muestro a continuación:

Te daré el código pero a diferencia de los botones de arriba estos no son tan atractivos cuando están alineados, es decir como se muestra en la imagen, pero si que imponen respeto si los colocamos al lado del texto de la entrada como se ve a continuación

Así se ven fantásticos! debajo del titulo y a la par con el texto inicial de la entrada.
Para colocarlos en el blog, seguimos los mismos pasos anteriores, solo que buscaremos cualquiera de estas lineas:

<div class='post-header'>
<div class='post-header-line-1'/>

Nos saldrán 2 de estos códigos, nos vamos a la segunda porque la primera es la de moviles.
y pegamos este codigo justo entre las 2 lineas

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='botones'>
<table border="0"><tr>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:79px; height:60px'/></td>
</tr><tr>
<td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
</tr><tr>
<td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></td></tr> </table></div>
<style type='text/css'>#botones{float:left;position:relative;width:90px;background:#fff;height:220px;margin-top:0px;z-index:1000;}</style></b:if>

Solo guarda los cambios y listo, disfruta tus espectaculares botones para compartir.

---

Tercera forma, unos increíbles y bien diseñados botones para compartir entradas en redes sociales, estilo Inovablog, ligeros de carga, diseño elegante, con efecto de sombra y redondeo al pasar el mause por ellos, estos son también muy buenos para los que no quieren los demás botones, son una muy buena opción, ademas de que no cargan scritps extra como los demás, al dar click sobre ellos abren una pequeña ventana POP up! para compartir el enlace y después de haber echo esto se cierran, mira un ejemplo de ellos en acción:

Están Super!, estos se ven mejor al final de las entradas o debajo del titulo, al igual que los primeros, para agregarlos a blogger sigue los pasos de los primeros botones, solo que en ves de copiar el código de los primeros botones copiaras este en  su lugar:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='botones-para-compartir'>
<a expr:onclick='&quot;window.open(\&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Facebook'><img alt='compartir en facebook' class='facebooki' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY2F3_tqTjt9yWWfUa_-0YRgzdNz5kSg7sVGCwl9jvjVvLL2vxk9X6PGhCglf7zY-rbklIO5WG7AjaEW8Z3MpjjnP7BnQrH9_W5gOtVhg7wgbLRWR9cEsbugghnQSXF7UrApW3xRLm1B4/s320/facebook.png' title='compartir en facebook' width='32'/></a>
<a expr:onclick='&quot;window.open(\&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en google+' class='googlei' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxaDuMJ1HBtE3YZjbKFR6pQcpnyM22n2uPgvksiROcv3QMmxHv_iq-7Wgh7IUoeiELfN6ZYlQVMPVJn-hvTKHXZ2jybkJ1MNcp-RlkCtKn_2qMV6DPyG1ptMIPilGKH-FuiBg3PL2RhXA/s1600/Google%252B+alt.png' title='compartir en google+' width='32'/></a>
<a expr:onclick='&quot;window.open(\&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en twitter' class='twitteri' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMu6htRcZ176F7EkDIg0RxSumRz-sBnWWOV9y_v6P2RSyx5elAvma2VVHex-qIROnk6BRUH0jpThYv0Mj8GWu9r2YfiUPykXfyn7MjLYXqFejQkjn02dZVpVGqc1S7HNXXKz2wnoA9v3c/s1600/twitter.png' title='compartir en twitter' width='32'/></a>
<a expr:onclick='&quot;window.open(\&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en pinterest' class='pinteresti' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvagvlQgxLEMAIJdOnZi9wnr_bKuSX1JRBeU-FsFaqip39H_gHw2dsjg68b7ekkpZ-HUqy5qt7NETNErfeudcKIy28ulYslk2Z3-a5AQgL08bWZ_nz_JAIuYatfL22LYfVlvrkDTPgjvk/s1600/pinterest.png' title='compartir en pinterest' width='32'/></a>
<a expr:onclick='&quot;window.open(\&quot;https://www.linkedin.com/shareArticle?mini=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en likedin' class='likedini' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtFqFoJz7taJL89_aIeNhgSCCEvooRhRRKhYfV5YqhwOtbmocNJVl1YHxCB56SwU0WogEWFIeAJLsf9M-M3NcIaLBCjre3ko5Cc1PPCCCMuQYQHHlN6Ld4wxqS6oyVur4GZeZBwWFsHn8/s1600/linkedin.png' title='compartir en likedin' width='32'/></a></div>
<style>#botones-para-compartir{ text-align:center;}.likedini:hover, .facebooki:hover, .twitteri:hover, .googlei:hover,.pinteresti:hover {border-radius:25px 25px 25px 25px;transition:all .3s ease-out;box-shadow: 0px 0px 5px #000; /* tamaño y color de la sombra */-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}.likedini, .facebooki, .twitteri, .googlei, .pinteresti {transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;margin-left:10px; /* espacio entre cada boton */}</style></b:if>

Y pega el código entre las lineas que hayas escogido. Puedes personalizarlos un poco, en la parte final del código podrás cambiar que tanto están separados, el efecto  de circulo etc.

O que tal estos impecables botones para compartir de estilo Inovablog de forma circular con efecto de giro al pasar el mause por ellos, son una buena opción para los que les gusta los iconos de forma circular y no cuadrada, al igual que los anteriores estos funcionan abriendo una ventana Pop UP! para compartir el enlace.

¡Son de lo mejor! para ponerlos en tu blog sigue los mismos pasos que los primeros botones solo que en lugar de copiar el código de esos botones copia este:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='botones-para-compartir'> <a expr:onclick='&quot;window.open(\&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Facebook'><img alt='compartir en facebook' class='facebooki' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjchOCiJv-zaI0KNrhpxjAUU4y6Mhymqd36YMPbhJz-Y4-S2kLsZbsyB7mOaQ-y7SX-o7iK-QBuqNGB80wog7BxboIUTGKp_-Awkl7RcYokYzQFpg3HYmfPiyP7AoN67uP1zWyILAg8yEs/s1600/facebook-long.png' title='compartir en facebook' width='40'/></a> <a expr:onclick='&quot;window.open(\&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en google+' class='googlei' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhreeeqJIIj0mx0-sebVZd3Taz3OXYCk-VGp_2SbaaYPr8AHjkuV2TZ2nMwqbvWxXeN1uP8dZVDZ1oG4mmuF395oAwwcoSUv3MvkV4rgCKCv36yrxa6TWU1Mw4CkVu5TgVgHaskVgH0Jnc/s1600/google-long.png' title='compartir en google+' width='40'/></a> <a expr:onclick='&quot;window.open(\&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en twitter' class='twitteri' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzdMp4-Z0oZneGVnj_abGpInwwQhUDrY8R87FzkVOnNbA2DSanNcszb9kGvaUAkNTqCN6wdvmeQE_yJOxVXyQ3EsqKPRLhF0tS9kUB_WkKM_ZL8vIo8L1JAwYQkdTkxf_S4fXF4pzff74/s1600/twitter-long.png' title='compartir en twitter' width='40'/></a> <a expr:onclick='&quot;window.open(\&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en pinterest' class='pinteresti' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy6tNBtDiasQh0QUXymqyxZ2wo9uVlRfOmcuddh1AjgscYImGc4TBq5lxx6rb6vAlcWlbPIwZUx1cpsH3eYc0utpxJHFunRDOpJHnhQ8rV3I_usU-N9IXS24dqdrNicavBX1bJ5oohXiE/s1600/pinterest-long.png' title='compartir en pinterest' width='40'/></a> <a expr:onclick='&quot;window.open(\&quot;https://www.linkedin.com/shareArticle?mini=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en likedin' class='likedini' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsrGSgbEr9seDeugPYsr_1CSKbK7b9zImo47AvQUwklc-nnU1Q5CyLrN6GEp7ifMuddbqFKWCtSlwpo5s45bS8FlVo9AGUREAb_jUI-bD2Kqmy4QLTQKb0ni0I97IsfIMyeRwmWY4pRMk/s1600/linkedin-long.png' title='compartir en likedin' width='40'/></a></div> <style>#botones-para-compartir{ text-align:center;}.likedini:hover, .facebooki:hover, .twitteri:hover, .googlei:hover,.pinteresti:hover {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);transform: rotate(360deg);transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}.likedini, .facebooki, .twitteri, .googlei, .pinteresti {transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;margin-left:10px; /* espacio entre cada boton */}</style></b:if>

Y pega el código entre las lineas que hayas escogido. Puedes personalizarlos un poco, en la parte final del código podrás cambiar que tanto están separados, el efecto  de  rotacion, etc.

BONUS!

Particularidad de estas 2 formas de botones, si no te gustaron los iconos que tienen simplemente puedes descargar tus propios iconos y cambiarlos, asi de simple, Ejemplo si quiero poner otro icono en cualquiera de los dos casos busca lo que esta en color azul en este codigo y remplazo todo lo que esta en color rojo por la URL del nuevo icono.

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjchOCiJv-zaI0KNrhpxjAUU4y6Mhymqd36YMPbhJz-Y4-S2kLsZbsyB7mOaQ-y7SX-o7iK-QBuqNGB80wog7BxboIUTGKp_-Awkl7RcYokYzQFpg3HYmfPiyP7AoN67uP1zWyILAg8yEs/s1600/facebook-long.png'

---

Botones sociales para compartir de ShareThis

Para la forma final, usaremos un servicio muy completo, llamado ShareThis, es una pagina que nos genera botones para compartir en casi todas las redes sociales posibles incluyendo otros servicios para compartir, imagínense, a quien no le gustaría tener este botón para compartir en todas esas paginas, tienen 3  posibles diseños 2 de ellos parecidos a las primeras 2 formas que vimos en esta entrada, la mas usada es la que te muestro en esta imagen a continuación

Como pueden ver el botón verde, al presionarlo, despliega un sin fin de redes sociales y paginas para compartir el contenido de nuestro sitio, muy bueno y completo

Para colocar estos botones dirígete a esta pagina que Genera botones sociales llamada sharethis.

1. Ve a la opción que dice Free Sharing Buttons.
2. Nos llevara a una pagina donde eligiéremos la plataforma en la cual esta basada nuestra pagina, en este caso podemos elegir la de Blogger o también la de Website, en general, esta ultima nos da mas opciones de diseño, ya depende de ti cual quieres.
3. Sigue con el segundo paso, en este eliges el diseño, escoja el que quieras.
4. Ahora sigue con el tercer paso, aquí podemos escoger el tamaño de los botones y elegir cuales serán los botones iniciales, es decir puedes arrastrar un botón mas a los que se muestran Ejemplo: podemos agregar el de Google+. En la pagina también explican este paso.
5. Finalmente cuando todo este listo selecciona: Get the Code o obtener código.
6. Te saldrá un cuadro que te aconseja registrarte o entrar con una cuenta social, para obtener el código, puedes usar tu cuenta de facebook o google por ejemplo para no tener que crear una cuenta.
7. nos muestra una pagina donde nos da el código para copiarlo y pegarlo en nuestra pagina.
8. Si elegiste la plataforma Blogger copia el código que te dan y pegalo en un gadget HTML/Javascript, guarda y listo.
9. Si escogiste la opción de sitio web en general, te aparecerán dos códigos, copia ambos y ponlos en un gadget HTML/Javascript. y listo