El enlace es LARGO ... a primera vista: ASUSTA pero, cuando lo vemos más detalladamente ... ES PEOR; sin embargo, funciona y es una buena forma de eludir los problemas que generan los distintos modos de compartir entradas de Blogger en Facebook.
Quién quiera leer de esos problemas puede ver esta entrada pero, la base del asunto es que Blogger no nos permite establecer los datos necesarios en las etiquetas META correspondiente que deben estar SI o SI en el HEAD de la plantilla para que sean leídas correctamente por Facebook.
Uno de esos datos es la imagen miniatura que "adornaría" el post y el otro es el resumen de ese post, es decir, el texto explicativo; ambos datos, no son accesibles en Blogger salvo en el includable post y, como eso es parte del BODY, no hay manera de ponerlos en el HEAD ya que usando JavaScript, serán ignorados; por lo tanto, el resultado a compartir depende siempre de la buena voluntad de Blogger.
Facebook dispone de un plugin para enviar, pero, los datos de ese envío son automáticos, no tenemos control sobre ellos; otra forma es usar un simple enlace, algo que el sistema parece haber depreciado pero, que aún sigue funcionando e imagino que funcionará por mucho tiempo ya que es utilizado por incontables sitios y es la forma más sencilla de agregar un botón para este sistema ya que no requiere aplicaciones o scripts extras.
El enlace básico sería este:
Quién quiera leer de esos problemas puede ver esta entrada pero, la base del asunto es que Blogger no nos permite establecer los datos necesarios en las etiquetas META correspondiente que deben estar SI o SI en el HEAD de la plantilla para que sean leídas correctamente por Facebook.
Uno de esos datos es la imagen miniatura que "adornaría" el post y el otro es el resumen de ese post, es decir, el texto explicativo; ambos datos, no son accesibles en Blogger salvo en el includable post y, como eso es parte del BODY, no hay manera de ponerlos en el HEAD ya que usando JavaScript, serán ignorados; por lo tanto, el resultado a compartir depende siempre de la buena voluntad de Blogger.
Facebook dispone de un plugin para enviar, pero, los datos de ese envío son automáticos, no tenemos control sobre ellos; otra forma es usar un simple enlace, algo que el sistema parece haber depreciado pero, que aún sigue funcionando e imagino que funcionará por mucho tiempo ya que es utilizado por incontables sitios y es la forma más sencilla de agregar un botón para este sistema ya que no requiere aplicaciones o scripts extras.
El enlace básico sería este:
<a href="http://www.facebook.com/sharer.php?u=URL_PAGINA&t=TITULO_ENTRADA"> Compartir en Facebook </a>
Se envían dos parámetros:
u es la dirección URL de la página
t es el título de la entrada
El resultado es pobre pero, según se ve en la web, muchos sitios hablan de la posibilidad de agregar parámetros extras y de ese modo, crear un botón de compartir personalizado; para eso, los parámetros serán otros:
p[url] es la dirección URL de la página
p[title] es el título de la entrada
p[summary] es el texto de la entrada
p[images][0] es la miniatura de la entrada (100x100)
el resultado, sería algo como esto:
u es la dirección URL de la página
t es el título de la entrada
El resultado es pobre pero, según se ve en la web, muchos sitios hablan de la posibilidad de agregar parámetros extras y de ese modo, crear un botón de compartir personalizado; para eso, los parámetros serán otros:
p[url] es la dirección URL de la página
p[title] es el título de la entrada
p[summary] es el texto de la entrada
p[images][0] es la miniatura de la entrada (100x100)
el resultado, sería algo como esto:
http://www.facebook.com/sharer.php?s=100&p[title]=TITULO_ENTRADA&p[summary]=RESUMEN&p[url]=URL_PAGINA&&p[images][0]=URL_IMAGEN
Y ahora, agregaremos el botón de compartir en alguna parte de las entradas, por ejemplo, en el post-footer y allí, empezaremos a colocar los datos que nos provee Blogger:
p[url] la dirección URL de la página = data:post.url
p[title] el título de la entrada = data:post.title
p[summary] el texto de la entrada = data:post.snippet
p[images][0] la miniatura de la entrada = data:post.thumbnailUrl
Abriremos ese enlace en una ventana de tipo pop-up y crearemos dos enlaces diferentes, uno para las entradas que tengan definida una imagen miniatura y otro para las que no las tengan en cuyo caso, agregaremos una imagen por defecto; para esto, usaremos los condicionales de Blogger y el monstruo final, sería este:
p[url] la dirección URL de la página = data:post.url
p[title] el título de la entrada = data:post.title
p[summary] el texto de la entrada = data:post.snippet
p[images][0] la miniatura de la entrada = data:post.thumbnailUrl
Abriremos ese enlace en una ventana de tipo pop-up y crearemos dos enlaces diferentes, uno para las entradas que tengan definida una imagen miniatura y otro para las que no las tengan en cuyo caso, agregaremos una imagen por defecto; para esto, usaremos los condicionales de Blogger y el monstruo final, sería este:
<b:if cond='data:post.thumbnailUrl == ""'> <a expr:onclick='"window.open(\"http://www.facebook.com/sharer.php?s=100&p[title]=" + data:post.title + "&p[summary]=" + data:post.snippet + "&p[url]=" + data:post.url + "&&p[images][0]=URL_IMAGENxDEFECTO\",\"sharefb\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript: void(0)'> Compartir en Facebook </a> <b:else/> <a expr:onclick='"window.open(\"http://www.facebook.com/sharer.php?s=100&p[title]=" + data:post.title + "&p[summary]=" + data:post.snippet + "&p[url]=" + data:post.url + "&&p[images][0]=" + data:post.thumbnailUrl + "\",\"sharefb\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript: void(0)'> Compartir en Facebook </a> </b:if>
La ventana pop-up que se abriría sería algo así:
Y el resultado en Facebook sería este:
ACTUALIZACIÓN:
En lugar de este dato que es la miniatura de 72x72:
data:post.thumbnailUrl
en caso de error, debería probarse este otro que es la imagen real:
data:post.firstImageUrl
En lugar de este dato que es la miniatura de 72x72:
data:post.thumbnailUrl
en caso de error, debería probarse este otro que es la imagen real:
data:post.firstImageUrl
206 comentarios:
Hola. Intento enviar una entrada de mi blog a una página de facebook que administro y me sale: Service Unavailable. Es la primera vez que me pasa esto. Qué hago?? Gracias.
En http://papelitis.blogspot.com no estás usando este sistema sino los botones por defecto de Blogger así que no hay mucho que pueda decirse.
Revisa qué dice la herramienta de Facebook o si muestra errores:
https://developers.facebook.com/tools/debug/
Hola amigo espero no sea tarde y aun puedas dar respuestas es muy interesante tu trabajo y aporte que entregas yo eh tratado de incorporarlo en mi pag web pero no me resulta mi pag no es blogger si no que lo tengo en un servidor de paga esta es la direccion www.corporeosanimados.cl si pudieras chequear y ayudarme ya que no me resulta cuando coloco la direccion en facebook me sale un recuadro que dice index nada mas te lo agradezco mucho.
No veo tu ejemplo pero para sitios que no estén alojados en Blogger, todo dependerá del lenguaje en que estén generados y de cómo puedes accesder a los datos p[title], p[summary], p[url] y p[images][0].
Si es una pa´gina estática, sólo HTML, pueden escribirse de manera literal; si es un sitio con páginas dinámicas (PHP,ASP,etc), deben ser leidos desde la base de datos del sitio.
Esto dejo de funcionar no?... es decir FACEBOOK DEJO DE ACEPTARLO hace unos seis meses... yo he tenido que quitarlo de donde lo puse, gracias facebook.
Sigue funcionando. Es fácil de comprobar haciendo click en el ícono de Facebook que está al final del post junto con los otros.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...