Cómo añadir enlaces sociales a tu blog

Existen multitud de plugins en WordPress que permiten añadir botones para compartir nuestras entradas del blog en distintas redes sociales. El problema es que la mayoría de ellos no me terminan de convencer al 100% ya que no son lo suficientemente configurables como para obtener el resultado que quiero. Además prefería no cargar el blog con un plugin más para algo que no parecía que fuese demasiado complicado.

Como soy bastante cabezón, me dediqué a buscar en Google cómo añadir los dichosos botoncitos y la verdad es que una vez que encuentras la solución no tiene ningún misterio, y te permite dejarlo todo exactamente a tu gusto. En esta entrada voy a intentar explicar paso a paso el proceso por si alguien también quiere hacer lo mismo, para que no tenga que perder el tiempo que yo he perdido.

En primer lugar hay que tener claro en dónde queramos que aparezcan los botones. En principio hay dos opciones: en las entradas individuales y en la página principal del blog. En este blog, por ejemplo, aparecen en ambos sitios. Para el primer caso (entradas individuales) debemos editar el fichero loop_single.php, mientras que para el caso de que queramos que aparezcan en la página principal del blog debemos editar también el fichero loop.php.

Para editar estos ficheros, desde el Dashboard de WordPress debemos ir al menú «Apariencia» y dentro de él a donde pone «Editor». Ahí aparece una lista con todos los ficheros que podemos editar.

Una vez hayamos escogido el fichero que vamos a editar, lo primero es localizar el punto en el que queremos que aparezcan los botones. La vista del código puede asustar un poco a simple vista, pero fijándose la verdad es que es bastante sencillo de seguir, y los nombres de las funciones resultan intuitivos. Como «puntos de referencia» podemos buscar el lugar en el que se llama a la función the_title, que es la encargada de que aparezca el título de la entrada, o bien the _content que se encarga de que aparezca el grueso del texto de la entrada. Yo, por ejemplo, he decidido colocar los botones en la parte superior de la entrada, justo antes de the_content.

Bien, una vez superado el primer escollo lo que queda es copiar y pegar. Dependiendo de la red social en la que queramos que se puedan compartir nuestras entradas tendremos que ir añadiendo trocitos de código. Voy a describir con detalle las más comunes (Twitter, Facebook y Google+) y luego pondré las indicaciones para conseguir cualquier otra que nos interese.

Twitter:

Debemos copiar y pegar el siguiente código:

<a href=«https://twitter.com/share» class=«twitter-share-button» data-url=«<!–?php the_permalink(); ?–>» data-text=«<!–?php the_title(); ?–>» data-count=«none» data-via=«USUARIO_TWITTER» data-lang=«es»>Tweet </a>
<script type=«text/javascript» src=«//platform.twitter.com/widgets.js»></script>

Debes sustituir USUARIO_TWITTER por tu nombre de usuario de twitter, para que aparezca citado en el tweet que se envíe. Si quieres que aparezca un contador con el número de veces que se ha compartido la entrada, basta sustituir data-count=«none» por data-count=«horizontal» o data-count=«vertical».

 Facebook:

En este caso el código que debemos introducir es el siguiente:

<iframe src=«http://www.facebook.com/plugins/like.php?app_id=101060136661102&href=<?php the_permalink() ?>%2F&send=false&layout=button_count&width=100&show_faces=false&action=like
&colorscheme=light&font=arial&height=21» scrolling=«no» frameborder=«» style=«border:none; overflow:hidden; width:73px; height:20px;» allowTransparency=«true»></iframe>

Igual que antes, podemos jugar un poco con las opciones para ajustar la apariencia del botón a nuestro gusto. Por ejemplo, si en lugar de action=like ponemos action=recommend, haremos que cambie el mensaje escrito en el icono.

Google+:

Para Google+ el código que necesitamos es:

<g:plusone size=«medium» count=«false» href=«<?php the_permalink(); ?>»></g:plusone>
<script type=«text/javascript»>
window.___gcfg = {
lang: ‘es-ES’
};
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();

</script>

 

El resultado de todo esto son unos botones como los que se pueden ver en la parte superior de esta misma entrada.

A continuación dejo los enlaces a las páginas de donde saqué todo el código. En ellas se pueden consultar todas las opciones de configuración existentes, que no son pocas.

Si además quieres añadir más botones de otras redes sociales no tienes más que buscar en Google la documentación del API de cada una de ellas. El proceso es siempre el mismo: coger el código que nos den y pegarlo en los ficheros loop_single.php y/o loop.php en el lugar en el que nos interese. En general estas páginas están bastante bien documentadas, así que no tiene pérdida.

Estos son algunos ejemplos de otros botones que podemos añadir de forma sencilla:

Por cierto que para conseguir escribir código en una entrada del blog también tuve que buscar un rato. Al final la solución es tan tonta como cambiar las etiquetas < y > por &lt; y &gt; respectivamente para que no las interprete como código.

(Imagen: Flickr.com)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.