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>
Para quien no quiera sufrir ataques de stress, pueden usar este archivo de texto donde sólo deben colocar la imagen por defecto y cambiar los textos "Compartir en Facebook" por cualquier otro o por una imagen.
La ventana pop-up que se abriría sería algo así:
La ventana pop-up que se abriría sería algo así:
Y el resultado en Facebook sería este:
54 comentarios:
muy bueno hermano, el otro día había leído la entrada de las metas en blogger, justamente para este problema del resumen al compartir en fb.. esto lo soluciona por completo al problema :)
saludos
Excelentemente explicado maestro pero no me funciona. Aparece correctamente el enlace pero al hacer click no pasa nada. No sé si habrá algún fallo en el código el problema será mío.
A ver si a otro le funciona.
Saludos
CristJian
No se si lo reuelve pro completo pero, mejora bastante :-D
Daniel Cana:
Lo que está en el post es exactametne lo mismo que tengo colocado en la plantilla en el botón de Facebook debajo de cada entrada. Es idéntico excepto en el texto (uso una imagen) y en la dirección de la imagen por defecto.
¿Tienes un ejemplo online para chequearlo?
Gracias por tu pronta respuesta.
Te dejo una url de ejemplo (al final)
http://www.recursosdeautoayuda.com/2012/01/como-recuperarse-del-agotamiento-fisico.html
No veo problemas, Daniel.
Esta imagen es una captura de la ventana que se muestra al hacer click en el enlace de tu blog.
mmm... creo que ya sé dónde está el problema. ¿Usas firefox? En firefox funciona pero en chrome ni en opera me funciona.
Veo exactamente lo mismo en todos los navegadores. Ahora no puedo chequear tu enlace porque ya no está pero, verifica el de este blog. No se ejecuta nada que un navegador común no interprete correctamente.
Sí efectivamente tu botón se ejecuta perfectamente en Chrome. No se por qué pero si pongo el código de este post en mi blog, en chrome no funciona (por lo menos en mi caso). No sé si será cuestión de plantilla o qué.
En cualquier caso gracias por tu ayuda.
¡Que bueno! ¡Como mejoró la descripción!
Me había resignado simplemente a que cuando compartía la entrada diga: "Leelo en...." . Con esto le da otro gustito.
Un abrazo.
Excelente artículo, muy bien explicado y manejado, me gusto mucho, ya que la forma tradicional no ofrece la variedad de mostrar los datos como debería ser y los muestra de manera distinta o desordenada.
Muy bueno, Saludos.
Que buena explicación, hace rato quería arreglar ese problema, me imagino que también sirve cuando alguien da me gusta, solo cambiando los para metro cierto???
Funcionan perfecto, muchas gracias :D
Esto me suena como un problema que me pasó pero que alguien GENIO!! resolvió :)
¿o serà que tengo que volver a modificar todo?
Daniel Cana
Tendría que ver cuál es el código que colocas con exactitud ya que, la última vez que vi el código fuente de tu blog, se notaba que en algunas partes, lugar de comillas dobles se mostraban entities como "e;
Adrián J. Messina:
Es una mejora, sin duda; el texto es demasiado corto pero ... peor es nada :D
Gracias, Carluís.
Yurika-Chan
El botón de Me Gusta es distinto, desconozco si los parámetros pueden ser cambiados más allá de los que Facebook define.
Perfecto Silencespainter Me :D
Tuky
Es un problema que nos pasó a todos, es Blogger el que envía los datos incompletos :D
Pero mira que me haces trabajar y encima en la noche de Reyes :s
No hace falta que lo hagas hoy, Gem@ ... puedes hacerlo mañana tempranito :D
hola JMiur, quisiera saber si me podrias ayudar, mira te explico vi en una pagina de blogger en la que los videos de youtube no se podian reproducir si no hacias click en me gusta del boton de facebook, era como una capa arriba del video de youtube y al hacer click en el boton de facebook desaparecia y ya despues de eso estaba el video de youtube, dejame ver si encuentro la pagina que te digo en el historial para que la veas nos puedas enseñar como es ese truco
mira acabo de encontrar el sitio,es este
¿Y para qué quieres hacer lo mismo? Es una tontera sin sentido y una idea bastante miserable si se me permite la expresión. Es algo sencillo de hacer pero, no vale la pena.
No hace falta hacer click en ninguna parte, el primer video es este:
http://www.youtube.com/embed/sSHVMR-MfDc
pues puede haber varios usurios que si les interese poder hacer eso, y aparte que te cuesta si dices que es facil, bueno pero no importa :(
Saludos
Es un simple problema ético: me parece que hacer eso es una bajeza, algo egoista; un simple engaño. Un intento muy miserable de conseguir que el numerito de Me Gusta sea mayor ¿para qué? ¿de qué sirve un número que nada significará y que sólo es el resultado de una trampa?
Sí; es un problema de simple ética.
Ya lo puse y no me funciona :(( no sale el resumen ni nada, tengo que cambiar algo en las METAS???
Tendrías que decirme dónde esta tu ejemplo para verificarlo.
Lo puse en este blog http://grupodinamo.blogspot.com/
Alli no veo ningún enlace a facebook.com/sharer, sólo un ícono de Facebook con otro tipo de enlace.
Entonces que estoy haciendo mal, ahora si no entendi :(
Tal vez no lo has colcoado en el includable correcto y por eso no se ve.
El código que pones en la entrada en que parte va???
Hey JMiur ... funciona bastante bien... al fin existe una solución para este problema. En mi caso adicioné una imagen en vez del texto y quedó perfecto. Aunque se sacrifica el número de veces que se ha compartido (con los códigos normales que ofrece Facebook) pero eso no importa, con tal de que la descripción y el titulo sea el indicado al momento de compartir. Te dejo con mi blog para que lo detalles. Gracias y Feliz 2012 para todos ..... http://robinsonchar.blogspot.com/
Angelicsan:
En cualquier lugar del footer de las entradas, donde quieras ver el enlace.
Robinson Char:
Perfecto :D
JMiur, neceisot hacer lo mismo que hiciste aca, pero con Twitter, ya que quiero ponerle un boton en imagen, y el enlace basico para el boton seria este:
https://twitter.com/intent/tweet?original_referer=URL&source=tweetbutton&text=TITULO&url=URL&via=PS3Argento
Quisiera que me ayudes a hacerlo tal cual esta aca, pero no se insetar los datos que necesita Blogger para que los tome... Gracias!
Algo así:
<a expr:href='"https://twitter.com/intent/tweet?original_referer=" + data:post.url + "&source=tweetbutton&url=" + data:post.url + "&via=PS3Argento&text=" + data:post.title'>
pero no puedo asegurlarlo porque habría que probar y desconzoco qué es el original_referer o qué quieres mandar en text
Gracias, sos un capo! funciono perfecto, era para reemplazar el boton de Twittear en cada post :) Saludos!
Soy nuevo en esto y la verdad no se donde poner el código que dices porque yo también tengo eso mismo problema.
Lo acabo de añadir a mi blog y funciona perfecto. Muchas gracias, jefe!
Eso lo puedes poner en cualquier parte del post-footer de tu blog, donde quieras que se muestre el enlace. Es la parte donde suelen mostrarse las etiquetas o el nombre del autor. No sé si eso te ayuda.
Si no, me dices en que blog lo vas a usar y trato de guiarte.
Hola JMiur, ¿no es posible hacerlo con contador? estuve tratando de ponerle el type="button_count" para ponerle el contador pero no funcionó :(
¿Para qué cuente qué cosa? ¿Los clicks? Si es eso, no porque ¿dónde guardarías ese dato?
mmm, es que estaba usando el Sharethis para hacer el blog más sociable, y no me gusta que se tenga que abrir en otra pestaña para compartir en el facebook y el twitter, y por eso quería que se pareciera a los otros botones de compartir, más por estética y que estén todos igualitos :) por ejemplo en esta entrada:
curiosidadinfinita.com/2012/02/analfabetismo-cientifico-tecnico.html
Al final de la entrada están los botones; no sé si se podría editar el código que ofrece Sharethis para que se abran en un popup y no una nueva pestaña, aparte ponerle el código que ofreces aquí con las mejoras del botón compartir del Facebook.
si es posible, estaría muy agradecido que me ayudaras con eso ;)
Gracias :)
Los códigos de sharethis sólo pueden ser modificados con las opciones que da el mismo servicio.
Creo que existe un problema JMiur en las entradas que no tienen una imagen, no pasa nada al dar click sobre compartir, imagino que debe ser algun error en el codigo.
No veo que haya ningún problema.
Me salté este post tuyo o simplemente lo olvidé. Hace una semana tras mucho bregar con el window.open y las puñeteras comillas di con algo muy parecido que funcionaba bien, pero este código tuyo es mucho más completo ¡y me lo encuentro hoy! En fin... Gracias. Lo acabo de modificar y funciona perfecto :D
Es una variante de un código de PHP pero anda bien, es engorroso de escribir pero funciona. A decir verdad, es lo único que vi que funciona siempre :D
hola, acabo de leer este post y es justo lo que me sucede... cuando quiero compartir las entradas en facebook, sólo sale el link, y debería salir el título de la entrada + la imagen de la misma, cierto? ahora, yo para códigos y html estoy fuera, no entiendo nada... tendrás un correo dónde escribirte? para darte el email y el password de mis blogs para que lo hicieras por mí, por favor... porque ya no puedo más con este rollo :/
El mail está en la sidebar pero jamás entro en otros blogs a modificar nada, es una responsabilidad que n oquiero asumir de ninguna manera.
lo que me pasa a mi es raro... para algunas entradas me sirve y para otras no... me parece q es dependiendo de la imagen que use... alguna solucion??
Tendría que ver un ejemplo donde notes un error para intentar saber el motivo.
Si me pasa lo mismo de ves en cuando se presenta algun problema con cierta entrada, esto pasa cuando:
- El titulo lleva algun caracter especial.
- Aveces no logra sacar la imagen (creo que debe ser el problema).
En estas semanas analizare el código, ojala entre todos podamos encontrar una posible solución, saludos.
Si la imagen no se ve es porque Blogegr no la ha reconocido y por lo tanto, data:post.thumbnailUrl es uan cadena vacía.
este es un ejemplo que no me deja compartir.... el boton esta arriba de la imagen http://www.laabdon.com.uy/2012/02/para-mi-no-fue-penal.html
Eso ocurre porque el título tiene comillas. No debe contener ni comillas dobles ni comillas simples, caso contrario, la URL que se genera es errónea..
Hola, soy el de la pregunta en facebook. Ya había leído este post y me parecía interesante mandar especificamente los datos de imagen, resumen y título. Yo tengo mis etiquetas OG bien configuradas, condicionadas de forma que en los post no muestre una descripción para que facebook la busque. Así usaba el plugin del botón me gusta tal y como lo da facebook y todo era muy bueno. La información era leída por facebook y guardada en sus caches, todo muy bien y sin errores, hasta que hace algúnos días google atacó. Hay algo misterioso en el servidor de blogger, que según he leído afecta a muchos; ya me he convencido que no es un problema de código, puesto que cuando publico una entrada, mientras se mantega "fresca", todo funciona bien, pero apenas pasan unos días se vuelve inaccesible para facebook. Desde el Debugger tool de fb puedo ver que mis entradas devuelven una respuesta 503 (vaya a saber lo que eso significa) que para facebook es una mala respuesta. Según él no encuentra nada, una cadena vacía y no es capaz de acceder a ningun dato OG. Verdaderamente no ve nada puesto que el reporte de su bot/scrapper/loquesea es... nada, una página en blanco, cuando normalemente se ve el código fuente de un sitio. Mientras permanezcan las caches de algúnos post todo va estar bien, se publican los enlaces y megusta con las miniaturas, titulos y descripciónes respectivas; pero de algúnas entradas ya se han tratado de refrescar y al no obtener nada sólo publica la fea url de cada post de blogger. Si sabes de algo que se pueda hacer para evitarlo, te agradeceré. Voy a tratar de integrar los parametros que mencionas aquí al botón de megusta. Pero si alguien copia y pega la url en facebook seguirá el problema, quisiera saber si es cuestión de configuración en blogger, pero no encuentro información.
Hasta donde probé:
Error Parsing URL: Error parsing input URL, no data was scraped.
es algo que se ve en al herrameinta de Facebook constantemente cuando se ingresan URLs de blogspot. Da la impresión de ser un problema de la misma herramienta de facebook.
También es cierto que las entradas se comparten mal o que no se ve nada. Si han existido cambios, no se han informado.
Utiliza el sistema descripto en esta entrada que no parece tener problemas.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive
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 ...