Integrando «me gusta» y «tweet» en WordPress

Ayer estaba un poco hinchado de pelearme con Silverstripe a la par que me enteré del propio botón de Twitter para los píos. En estas que me dije: pues voy a complicarme la vida con otra cosa. Y me puse a tratar de integrarlo aquí, en WordPress. Porque añadirlo en sí no es complicado. Se pueden seguir los propios manuales de las páginas de las respectivas utilidades[Like Button de Facebook y Botón de Twittear de Twitter], o incluso hay plugins que las integran, pero lo complicado viene cuando nos gusta intentar contentar las recomendaciones del W3C.

Consejo: siempre viene bien respetar el tipo de documento, y muchas veces los problemas se arreglan eligiendo uno adecuado a nuestras necesidades en puesto del más estricto que haya.

Para Facebook se describe el procedimiento de crear una aplicación y añadir a la bitácora las líneas necesarias en este hilo del foro de desarrolladores [inglés]. Pero ojo que ahí describe el procedimiento utilizando XFBML tal cual, sin apaños para la validación. Quien quiera ser algo más correcto con los estándares tendrá que mirar también en este mensaje de un hilo de Seo Workers [inglés]. Aunque yo aconsejo también cambiar el doctype a uno que admita bien las meta-etiquetas de Open graph protocol:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

Para Twitter el asunto es más sencillo. El validador se vuelve a quejar porque hay parámetros que no entiende pero la solución es muy parecida a la que se adopta para Facebook: JavaScript. Y ya si en la página de fans de Facebook se quiere que aparezcan sólo determinados tweets entonces hay aplicaciones como Selective tweet status que sólo publicarán mensajes de Twitter en dicha página si acaban con el hashtag #fb.

Yo por ejemplo donde he querido que aparezcan los botones de «me gusta», «tweet» y hacerse fan de la página he puesto en su lugar unas capas que más tarde JavaScript se encarga de completar con el código que hace posible que se muestren los botones.

Para Facebook, en single.php y sidebar.php respectivamente:

<div id="fblike"></div> y <div id="fblikebox"></div>

Para Twitter:

<div id="twitter"></div><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Antes del cierre del elemento body se añade una capa que Facebook requiere y se enlaza a un script en JS que será el encargado de cumplimentar las capas de más arriba. Configurado a mi gusto queda:

<div id="fb-root"></div>
<script type="text/javascript" src="dirección/hasta/donde/este/la/plantilla/facebook-y-twitter-pasan-de-estándares.js"></script>

Y el script contiene:

//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: 'ID-DE-LA-APLICACIÓN', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/es_ES/all.js';
document.getElementById('fb-root').appendChild(e);
}());

var l1 = document.getElementById('fblike');
var l2 = document.createElement('fb:like');
l2.setAttribute('width', '400');
l2.setAttribute('show_faces', 'false');
l1.appendChild(l2);

var b1 = document.getElementById('fblikebox');
var b2 = document.createElement('fb:like-box');
b2.setAttribute('stream', 'false');
b2.setAttribute('connections', '0');
b2.setAttribute('profile_id', 'ID-DE-LA-APLICACIÓN');
b1.appendChild(b2);

var t1 = document.getElementById('twitter');
var t2 = document.createElement('a');
var texto = document.createTextNode("Tweet");
t2.setAttribute('href', 'http://twitter.com/share');
t2.setAttribute('class', 'twitter-share-button');
t2.setAttribute('data-count', 'horizontal');
t2.setAttribute('data-via', 'TU-USUARIO-DE-TWITTER');
t2.setAttribute('data-lang', 'es');
t2.appendChild(texto);
t1.appendChild(t2);
//]]>

Pero a cada cual le pueden gustar otros tamaños, mostrar iconos de usuarios, una marquesina vertical de novedades,.. No obstante yo en JavaScript soy muy malo y nunca me ha gustado, así que seguro que esta solución es bastante mejorable. 😀

3 comentarios en “Integrando «me gusta» y «tweet» en WordPress

  1. Yo sigo sin entender jaja a mi solo me pregunto si queria un boton en los comentarios le di click y ya :/

    Supongo que esto es para los que tienen dominio y descargan wordpress y todo eso

    Saludos 😀

Deja una respuesta

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