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.

 

Instalando tu propio acortador de URLs

Los acortadores de URLs ganaron popularidad con la llegada de Twitter, y su limitación de 140 caracteres por mensaje. Así, si quisiera compartir por twitter la siguiente entrada de este blog:

http://enriquealexandre.es/2010/06/02/¿como-escuchamos-organizacion-secuencial-vs-simultanea/

Necesitaría 93 caracteres sólo para la dirección, así que sólo le quedarían 47 para el mensaje. Una primera idea que se nos podría ocurrir es configurar el wordpress para que nombre a nuestras entradas de una forma más corta, como por ejemplo http://enriquealexandre.es/20100602 o algo parecido. El problema de esto es que al parecer google utiliza las palabras de la URL para indexar, por lo que no es una muy buena idea hacerlo.

Por esta razón desde hace tiempo existen servicios gratuitos como bit.ly o goo.gl que se encargan de convertir esta dirección en una mucho más manejable, en torno a los 20 caracteres. En el caso anterior, las direcciones acortadas quedarían: http://goo.gl/TKWIhttp://bit.ly/daBDoC

Pero entonces, después de toda esta introducción, si ya existen acortadores de URLs gratuitos, ¿por qué iba yo a querer instalar el mío propio? Pues en mi caso particular por varias razones:

  • En primer lugar precisamente porque las que hay son gratuitas, y cualquier día pueden desaparecer, haciéndonos perder todos nuestros enlaces. Un susto ya nos lo dio tr.im hace algún tiempo.
  • Una segunda razón es el control. Si por la razón que sea quiero modificar la dirección de destino (error, migración de servidor, etc.) lo puedo hacer sin problemas.
  • La tercera razón, y quizás la más importante, es por aprender, porque me apetecía.

Pues bien, una vez decidido que queremos instalar un servicio de este estilo en nuestro servidor, lo primero que tenemos que hacer es decidir el nombre del dominio que vamos a utilizar. Hay servicios como domainr, que te dan ideas, pero yo al final me decidí por http://rsnc.es, que tiene 15 caracteres más los aleatorios. Había soluciones más bonitas, pero la mayor parte de ellas eran muy caras (cientos de dólares) o dependían de ccTLDs muy raros, así que al final decidí apostar por lo seguro y utilizar un dominio .es.

El siguiente paso fue decidir el software que iba a utilizar. Existen en la red muchos proyectos de software libre para implementar tu propio acortador de URLs, pero al final opté por YOURLS por las siguientes razones:

  • Es fácil de instalar y de manejar
  • Permite obtener estadísticas sencillas de los enlaces
  • Viene con un plugin para el WordPress que facilita bastante la integración con el blog

A partir de aquí el proceso es muy sencillo y basta con ir siguiendo las instrucciones. En primer lugar tenemos que crear una nueva base de datos MySQL, proceso que variará dependiendo de la configuración de nuestro servidor. En mi caso utilizo cpanel, así que lo único que hay que hacer es ir al asistente de MySQL y decir el nombre que le queremos dar a la base de datos:

y crear un usuario que tendrá acceso a ella:

Posteriormente, una vez descargado el software de YOURLS, debemos modificar algunas líneas del fichero de configuración. En primer lugar, hay que introducir el nombre de la base de datos que hemos creado, junto con su usuario y contraseña:

Después, un poco más abajo, hay que introducir el nombre del dominio que hemos instalado:

Y por último, si queremos que nuestro acortador de dominios sea privado y no público, la lista de usuarios que tienen acceso a él:

Con todo esto no queda más que ir con nuestro navegador a http://nuestrodominio/admin/install.php:

Y después de hacer click en el botón de «Install YOURLS», ya veremos la página de login:

En ella debemos introducir el nombre y contraseña del usuario con acceso al acortador de URLs, y ya veremos la página principal de administración:

Ahora lo único que tenemos que hacer es introducir nuestra URL en el cuadro de diálogo, y cuando pulsemos en «Shorten the URL», nos devolverá una URL corta que podremos utilizar para lo que queramos.

El último paso es la integración de nuestro flamante acortador de URLs con nuestro blog de WordPress. Para ello hay que bajarse el plugin y copiarlo en nuestra instalación de wordpress, en el directorio wp-content/plugins. Después basta con activarlo desde nuestro escritorio y configurarlo siguiendo las instrucciones de la página del plugin.