Addthis – Facebook: Cambiar título, url, imagen y descripción

Para todos aquellos que useis el plugin Addthis en vuestras blogs o páginas para compartir el contenido seguro que os habréis encontrado con el problema de que Facebook captura el título, la imagen y la descripción de los Metas de la página, esto no supone un verdadero problema cuando tenemos un único artículo o producto o elemento para compartir por página ya que se pueden configurar los Metas adecuadamente, el verdadero problema está cuando tenemos varios artículos o productos o elementos por página para todos ellos los Metas van a ser los mismos y entonces es donde se complica el asunto.

Para resolverlo podemos implementar el siguiente código haciendo uso de la libreria jQuery:


function FB_AddThis() {
   var enlace = null;
   //Mediante el selector jQuery pongo en un array
   //todos los botones de compartir en facebook que
   //haya creado el plugin AddThis
   var misaddthis = $("a.addthis_button_facebook");

   //Ahora compruebo si está definido el enlace del primero
   //de ellos ya que hay que esperar a que el plugin los genere
   try {
      enlace = typeof($(misaddthis[0]).attr("href"));
   } catch (e) { }

   //Si el enlace no está definido aún repito la llamada
   if (enlace == "undefined") {
      setTimeout(FB_AddThis, 100);
   } else {
      //Si ya están los enlaces generados procedo a cambiarlos
      for (var i=0; i<misaddthis.length; i++) {
         cambiarEnlaceFB(misaddthis[i]);
      }
   }
}

function cambiarEnlaceFB(id) {
   //Cambiamos el enlace del botón por este otro en el que se le pasa
   //el título, la imagen, la url y la descripción que previamente hemos
   //configurado en el plugin AddThis
   $(id).attr('href', "http://www.facebook.com/sharer.php?s=100&p[title]="+encodeURIComponent($(id).parent().attr("addthis:title"))+"&p[url]="+encodeURIComponent($(id).parent().attr("addthis:url"))+"&p[images][0]="+encodeURIComponent($(id).parent().attr("addthis:image"))+"&p[summary]="+encodeURIComponent($(id).parent().attr("addthis:description")));
}

//Sólo nos queda poner la llamada a la función en cuanto
//el DOM esté listo
$(document).ready( function() {
   FB_AddThis();
});

En este enlace podéis ver como configurar AddThis indicando un título, url y descripción.

10 comentarios en “Addthis – Facebook: Cambiar título, url, imagen y descripción”

  1. Amigo, me sorprende que no tengas comentarios en este post. Llevo horas buscando la forma de que me funcione el compartir los datos en facebook mediante addThis . Me estaba volviendo loco con los dichosos META.

    Gracias a este post he conseguido que funcione a la perfección. Muchas gracias!!

  2. Hola. He llegado a tu página buscado como loco. Me puedes enseñar un ejemplo completo, es que no consigo que funcione. Disculpame pero soy un poco novato.
    Gracias.

  3. Hola Moises he usado tu código pero no me funciona para nada, sabes si sigue teniendo soporte o algun ejemplo práctico no soy novato y por ello me extraña, gracias

  4. Buenos días Moisés,

    gracias antes de nada por el código, todo un hallazgo después de mucho ineficaz googleo. Lo he probado y me ocurre lo que apuntas en tu comentario del 28/05: funciona la URL y la imagen, no así título y descripción.
    ¿Has podido averiguar a qué se debe? Lo cierto es que he probado distintas modificaciones pero ninguna ha surtido efecto, y por la documentación del Open Graph tampoco he sacado nada en claro.

    Gracias por tu respuesta y por aportar tu conocimiento.

    Saludos,

    Luis Benito

  5. Hola, Moises, espero que estés bien; te agradezco mucho por compartir este conocimiento. Yo realmente no he podido aplicarlo correctamente o eso creo. Yo lo que he implementado en mi web son muchos metatags, para cada una de las redes sociales; eso me ha corregido la descripción de lo que se comparte, pero sigo sin poder corregir el título y nunca me aparece, usando AddThis, la imagen al momento de compartir en facebook. Me gustaría al menor poder poner la imagen, tú puedes por favor explicarme dónde hay que reemplazar tu código con el mío? yo lo que hice fue crear un archivo .php, en el cual puse tu código y lo invoco desde la noticia en la cual he creado los botones de AddThis. ¡Gracias por tu tiempo!

Deja un comentario

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