Cómo agregar los botones de redes sociales a tu blog

Se conocen con el nombre de «botones sociales» a los que se suelen poner al final de las entradas de un blog con objeto de que el usuario pueda compartir contenidos en sus perfiles de redes sociales.

En las líneas que vas a leer a continuación te enseñaré cómo agregar los botones de redes sociales a tu blog. Veremos los correspondientes a las cuatro principales plataformas: Twitter, Facebook, LinkedIn y Google+). 

Fundamentalmente, existen dos tipos de botones que puedes añadir a tu blog: el de «follow» y el de «share/like». El de «follow» («sígueme») te permite promocionar los perfiles de tus redes sociales en el blog, lo cual es, indudablemente, una extraordinaria manera de darte a conocer y un paso más en tu estrategia de marketing 2.0. Por otra parte, el botón de «share/like» («compartir/me gusta») proporciona a tus visitantes una forma fantástica de compartir tus contenidos entre sus seguidores de los medios sociales y amplificar la audiencia de lo que publicas. Los botones para compartir deben incluirse al final de cada entrada del blog, mientras que el de follow deber ir en la página de «about» (acerca de) y en el sidebar (columna lateral) del blog.

 Apadrina este post

A continuación los botones de redes sociales para compartir entradas, entre otras funciones, y cómo integrarlos en tu blog.

Botones para Twitter

Botón de Follow. ir a la siguiente dirección, configurar las opciones (cuenta a la que seguir, tamaño y lenguaje) copiar el código y pegarlo allí donde se desee que aparezca: https://twitter.com/about/resources/buttons#follow Para más información ver la documentación de Twitter en https://dev.twitter.com/docs/follow-button.

Botón de Share. Acudir a la siguiente dirección, configurar las opciones, copiar el código y pegarlo en el sitio en donde se quiere mostrar: https://twitter.com/about/resources/buttons#tweet Para leer más información, ingresar en la documentación de Twitter en https://dev.twitter.com/docs/tweet-button.

Botones de hashtag y mención. De forma similar a los botones para seguir y compartir, existe la posibilidad de implementar botones para ver un hashtag y para publicar un tweet mencionando a un usuario. Para ello, ir respectivamente a las direcciones https://twitter.com/about/resources/buttons#hashtag y https://twitter.com/about/resources/buttons#mention.

Twittear enlaces. Existen herramientas como http://clicktotweet.com/ para incluir enlaces que permitan a tus visitas publicar tweets escritos por ti. Por ejemplo: ¡Twittea este artículo! 

Widgets. Los widgets proporcionan un mecanismo para crear timelines de Twitter dinámicos que se pueden insertar en cualquier sitio. Para crear el código de un widget, ingresar en https://twitter.com/settings/widgets/new, seleccionar el tipo (cronología, favoritos, lista o search), configurar las preferencias y copiar el código necesario para llevarlo a tu blog.

[Tweet «Me gusta este artículo sobre cómo agregar los botones de redes sociales a tu blog»]

Botones para Facebook

Botón de Follow. Ve a la dirección https://developers.facebook.com/docs/reference/plugins/follow/ y personaliza el botón a tu gusto. Genera el código (HTML5, XFBML O IFRAME) y ponlo en el lugar en el que quieres que aparezca.

Caja de Like («me gusta»). De forma similar al botón de Follow, acude a la dirección https://developers.facebook.com/docs/reference/plugins/like-box/. También existe el botón de like: https://developers.facebook.com/docs/reference/plugins/like/

Botón de enviar. Para facilitar a los usuarios que visitan tu blog que puedan compartir los contenidos en sus perfiles crea el botón de enviar en https://developers.facebook.com/docs/reference/plugins/send/

Compartir enlaces. Si quieres que tus visitantes compartan enlaces directamente, dirígelos a http://www.facebook.com/share.php?u=http://bit.ly/133DbQF donde el enlace despues de «u=» (en este caso, un enlace de bit.ly) es el link al artículo que se quiere compartir. Por ejemplo: ¡Comparte este artículo!.

Todos los botones están recogidos en la página de Facebook https://developers.facebook.com/docs/plugins/.

Botones para LinkedIn

Botón Seguir. El botón para seguir en LinkedIn se crea y configura en https://developer.linkedin.com/plugins/follow-company.

Caja con el perfil de tu compañía. LinkedIn ofrece este plugin para crear un bloque de información de tu compañía que, además, incluye el botón seguir: https://developer.linkedin.com/plugins/company-profile-plugin. Para marcas personales, acude a http://developer.linkedin.com/plugins/member-profile-plugin-generator

Botón compartir. El botón para compartir contenido en LinkedIn se crea en https://developer.linkedin.com/plugins/share-button. Configura la URL del artículo a ocmpartir y genera el código necesario con el fin de incluirlo en el sitio donde quieres incorporarlo.

Botón para recomendar productos. El botón para recomendar productos se crea en http://developer.linkedin.com/plugins/recommend-button y  para aprender a crear productos en tus páginas de LinkedIn, acude a http://ayuda.linkedin.com/app/answers/detail/a_id/5287 

Puedes encontrar todas las posibilidades de LinkedIn, en cuanto a botones se refiere en http://developer.linkedin.com/plugins.

Botones para Google+

Botón seguir. Para crear y generar el código del botón seguir de Google+, ingresa en https://developers.google.com/+/web/follow/.

Caja de Google+. La caja de Google+ tiene el mismo propósito que la caja con el perfil de compañìa de LinkedIn. Para generar el código correspondiente y poder insertarlo en tu blog, ve a https://developers.google.com/+/web/badge/.

Botón +1. El botón +1 de Google+ se crea en http://www.google.com/webmasters/+1/button/

Botón compartir. Genera el botón de compartir yendo a la dirección https://developers.google.com/+/web/share/.

Compartir enlaces. En Google+ puedes invitar a tus lectores a compartir enlaces configurando la siguiente URL con el link al artículo a compartir: https://plusone.google.com/_/+1/confirm?hl=en&url=http%3A%2F%2F%20http://bit.ly/133DbQF El enlace de bit.ly que va al final de dicha URL es la dirección del artículo a compartir. Por ejemplo: ¡Publica este artículo en Google+!.

Caso práctico

A continuación veremos, con un caso práctico, cómo se incluyen los botones de redes sociales para Blogger. Para ello, incluiremos la botanadura al final de cada entrada, como es habitual. Añadiremos los siguientes botones:

• +1 de Google+
• Twittear
• Compartir en Facebook
• Seguir en Twitter

Lo que nos interesa es proporcionar a nuestros visitantes un mecanismo sencillo para que ellos puedan compartir nuestros posts en Google+, Twitter y Facebook.

Para ello, te proporciono el código correspondiente, basado en la guía incluida en este artículo, y las principales indicaciones para que no tengas problema en la configuración en Blogger.

Código a añadir en tu plantilla de Blogger

Copia el código siguiente en tu plantilla de Blogger (un poco más adelante te explico en qué lugar exacto debes hacerlo).

Sustituye [usuario de Twitter] por tu usuario de Twitter.

[php]
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<table cellspacing=’0′ width=’100%’>
<tr>

<td>
<!– Botón +1 de Google+ –>
<div class=»g-plusone» data-size=»medium» data-annotation=»none»></div>
<script type=»text/javascript»>
window.___gcfg = {lang: ‘es’};

(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/platform.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</td>
<td align=’left’>
<!– Botón para twittear, sustituye [usuario de Twitter] por tu usuario de Twitter –>
<a class=’twitter-share-button’ data-lang=’es’ data-via='[usuario de Twitter]’ href=’https://twitter.com/share’>Twittear</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
</td>
<td align=’left’>
<!– Botón para seguir a tu usuario de Twitter, sustituye [usuario de Twitter] por tu usuario de Twitter –>
Seguir a @[usuario de Twitter]
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
</td>
<td align=’left’>
<!– Botón para compartir en Facebook –>
<div id=»fb-root»></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = «//connect.facebook.net/es_LA/all.js#xfbml=1»;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<div class=»fb-share-button» data-layout=»button_count»></div>
</td>
</tr>
</table>
</b:if>
[/php]

Algunas puntualizaciones sobre el código

• La botonadura social que incluye Blogger por defecto (y que se configura en el apartado «Diseño > Entradas del blog» activando la opción «Mostrar botones para compartir») no funciona. Por eso se debe añadir el código en el sitio concreto que te indico.
• Para que la ristra de botones solo aparezca en las entradas individuales del post, y no en la página home, se engloba el código entre las sentencias <b:if cond=’data:blog.pageType == «item»’> y </b:if>
• En Facebook, se elige el tipo de layout button-count y no se pone el parámetro href para que la página a compartir sea aquella en la que se encuentra el código (cada entrada del blog, en este caso)

Pasos a seguir

• 1. Haz una copia de seguridad de tu plantilla. Ve a «Plantilla > Crear/Restablecer copia de seguridad» y haz clic en el botón «Descargar plantilla completa». Guarda el archivo .xml a buen recaudo.
• 2. Duplica el archivo previamente descargado en 1 y, usando tu editor de texto preferido (compatible con código), busca el siguiente literal: <div class=’post-footer-line post-footer-line-3’> Busca el final de ese div (alineado con la etiqueta de comienzo). En la imagen se señala el sitio en el que debes pegar el código de la botonadura.
• 3. A continuación del bloque de instrucciones encontrado en el punto 2, pega el código indicado anteriormente.
• 4. Guarda el archivo y súbelo, yendo a «Plantilla > Crear/Restablecer copia de seguridad», seleccionando el archivo en el apartado «Sube una plantilla desde un archivo de tu equipo.» y haciendo clic en el botón «Subir».