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)

WordPress para el iPad

Acabo de descubrir un plugin para el wordpress que me ha parecido muy interesante. Se trata de Onswipe, y se encuentra disponible tanto para los blogs alojados en wordpress.com como para aquellos que cuenten con servidor propio. La instalación en cualquiera de los dos casos es tremendamente sencilla, y con sólo un par de clicks de ratón lo tenemos funcionando.

Está basado en HTML5, y soporta los gestos típicos del iPad como arrastrar con el dedo para pasar página o rotaciones de pantalla. La verdad es que es de lo más resultón, y le da al blog una apariencia de aplicación de lo más realista. Además tiene bastantes opciones de configuración con las que se puede jugar para darle un aspecto todo lo personalizado que queramos.

Por último destacar que también incorpora herramientas para poder compartir las entradas que leamos en distintas redes sociales como Twitter o Facebook.

Por último lo mejor de todo: es gratis.