Añadir botones de redes sociales para compartir tus posts

Si hemos creado un blog, uno de nuestros objetivos será la optimización para Social Media (SMO), es decir, debemos facilitar la viralización de los contenidos. ¿Cuál es la mejor forma de hacerlo? Incluir los botones de las Redes Sociales en nuestros posts.
En este artículo vamos a ver:

  • Cómo crear de manera manual los botones de LinkedIn, Twitter, Facebook y Google+.
  • Cómo añadirlos a nuestro blog.
  • Mencionaremos algunos plugings que hacen todo el trabajo por nosotros.

botones_sociales

Añadir el botón de compartir en LinkedIn

El potencial de LinkedIn es enorme para conocer a gente con los mismos intereses, para buscar clientes, proveedores, darse a conocer, saber la opinión de expertos o incluso para buscar trabajo (de hecho tiene una sección dedicada a esto). Los motivos de cada uno pueden ser diferentes, pero el hecho es que es una herramienta que permite conectarnos profesionalmente unos a otros. Una de las ventajas que podemos aprovechar de esta red social es la de  compartir información a través de grupos, por lo que potenciar la viralización de contenidos en esta red nos reportará tráfico de mucha calidad, y si nuestro contenido es de valor,  podemos obtener una gran cantidad de clientes potenciales.

Para integrar el botón de compartir debemos ir  a la página para desarrolladores Share Plugin Generator, donde seleccionaremos el idioma y el aspecto del botón (puede tener un contador en la parte superior, en la parte lateral o bien puede estar sin contador), pulsamos para finalizar Get Code, copiamos y pegamos donde queremos que se muestre. Anotar que hay un primer parámetro que es la URL, el cuál dejaremos en blanco para hacer referencia a la página del post actual. Finalmente obtendríamos un código cómo el que sigue:


<!-- Idioma = spanish; contador a la derecha -->
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: es_ES
</script>
<script type="IN/Share" data-counter="right"></script>

botones_linkedin

Añadir el botón de compartir en Twitter

El proceso es muy similar en Twitter, vamos a la página oficial de Botones de Twitter, seleccionamos el tipo de botón, que puede ser para compartir un link (será nuestro caso), para hacer un follow, para twittear con un hashtag o para hacer una mención. Nosotros seleccionaremos “Share a Link”, a continuación dejaremos en blanco el parámetro URL debido a que queremos que coja la del post actual, podremos introducir un texto, elegir si queremos o no contador, y rellenar los parámetros vía (quién lo escribe), recommend o hashtag; nosotros sólo hemos añadido en vía el usuario de twitter de nuestro blog. Por último elegimos el tamaño y el idioma. Finalmente obtendríamos un código como el siguiente:


<a href="https://twitter.com/share" class="twitter-share-button" data-via="hablandoenbytes" data-lang="es">Twittear</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

botones_twitter

Añadir el botón para compartir en Facebook

En este caso nos dirigiremos a la página oficial de Facebook del Like Button. Configuraremos el formulario a nuestro gusto. Nosotros, una vez más, hemos dejado en blanco el campo URL. En este caso hemos dejado en blanco también el Width, hemos seleccionado el Layout “button_count”, en Action Type hemos dejado el Like y hemos deseleccionado el “Include Share Button”. Por último, pulsamos en “Get Code” y ya sólo tenemos que insertar el código donde queremos que se muestre:

<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_ES/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Código dónde queremos que aparezca nuestro botón -->
<div data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>

botones_facebook botones_facebook2

Añadir el +1 de Google Plus

Google+ se ha convertir en una red social con un gran potencial en cuanto a usuarios.

Para añadir el botón +1 nos dirigimos a la página oficial, entramos con nuestra cuenta de Google+, lo configuramos y lo insertamos donde queramos.

<!-- Inserta esta etiqueta donde quieras que aparezca Botón +1. -->
<div class="g-plusone" data-annotation="inline" data-width="300"></div>
<!-- Inserta esta etiqueta después de la última etiqueta de Botón +1. -->
<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>

botones_google

Añadir los botones en nuestro blog

Ahora que tenemos todos los códigos sólo nos queda insertarlos en la página de la entrada individual de nuestro blog. En WordPress suele llamarse single.php. Nosotros hemos introducido, además, <div> con clases para el css. Podemos verlo a continuación:

### Código a poner en el blog ###
<div class="share_links">
<!-- Linkedin -->
<div class="share_item">
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: es_ES
</script>
<script type="IN/Share" data-counter="right"></script>
</div>
<!-- End linkedin -->
<!-- Twitter -->
<div class="share_item">
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="es">Twittear</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</div>
<!-- End twitter -->
<!-- Facebook -->
<div class="share_item">
<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_ES/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
</div>
<!-- Facebook -->
<!-- Google+ -->
<div class="share_item" style="padding-left: 24px">
<div class="g-plusone"></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>
</div>
<!-- End google+ -->
</div>


### Código CSS ###
/******* Share Links ********/
.share_links {
width: 100%;
padding: 12px 0 12px 0;
}
.share_item {
padding: 0 12px 0 12px;
width: 22%;
float: left;
}

Plugins que nos facilitan la tarea

En función del CMS que empleemos para nuestra página web siempre suelen haber plugins que insertan de forma automática los botones para compartir en redes sociales. En WordPress, por ejemplo, encontramos Shareaholic, Digg Digg o Share This.

Shareaholic

El mejor, sino de los mejores. Nos ofrece botones sociales, nos muestra contenido relacionado y se integra de forma efectiva con Google Analytics. Una característica muy interesante es que nos muestra los usuarios más activos de nuestro blog, información muy útil si queremos recompensar o reconocer a nuestros lectores más fieles. Ver más información.

Digg Digg

Actualmente es uno de los mejores y más populares plugins para compartir contenido. No tiene un diseño espectacular ni ofrece más funciones que la de compartir, pero es muy fácil de integrar, versátil y rápido.
Digg Digg nos permite colocar los botones para compartir sobre el contenido, al final del post o en una barra lateral flotante. Ver más información.

Share This

Se diferencia del resto de plugins por tener el número más grande de botones de redes sociales (más de 120).
A parte de diferentes diseños de botones que podemos colocar al final del post, nos ofrece la posibilidad de colocar una barra flotante lateral. Share This también nos da estadísticas a través de nuestra cuenta en su web. Ver más información.

Deja un comentario