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

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

10 comentarios en 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.

Sobre el autor

Ingeniero informático especializado en programación web, dedicado al diseño de páginas web, tiendas online, aplicaciones a medida. Trabajo con PHP, MySQL, Javascript, Jquery, Bootstrap, HTML, CSS, Prestashop y Wordpress.

Etiquetas:

Entradas relacionadas

10 comentarios

  1. Jesus  - 11 mayo 2011 - 14:11
    /

    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. Moisés Varela  - 11 mayo 2011 - 15:26
    /

    De nada, a mí me paso lo mismo y cuando por fin dí con la tecla lo puse publiqué.

  3. Pedro  - 2 junio 2011 - 12:00
    /

    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.

  4. Moisés Varela  - 13 junio 2011 - 18:23
    /

    Por muy novato que seas si usas jQuery es tan simple como pegar mi código en la página que uses el plugin de AddThis entre las etiquetas

  5. alex  - 27 mayo 2012 - 21:42
    /

    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

  6. Moisés Varela  - 28 mayo 2012 - 20:34
    /

    Puedes probarlo en SOFA DIRECTO
    Lo he probado y la URL y la imagen funcionan correctamente, el titulo y la descripción parece ser que no, quizás hayan cambiado algo en Facebook, le echaré un vistazo cuando pueda.

  7. Luis Benito  - 13 diciembre 2012 - 9:51
    /

    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

  8. Moisés Varela  - 20 diciembre 2012 - 0:26
    /

    Pues no, yo tampoco he conseguido averiguar el porque de momento.

  9. José Araujo  - 16 noviembre 2015 - 19:21
    /

    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!

  10. Moisés Varela  - 18 noviembre 2015 - 17:30
    /

    Hola José, mi código es javascript no PHP, puedes meterlo en un fichero .js e incluirlo justo a continuación de la libreria jquery.

Deja un comentario

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

Sígueme en

Volver arriba