JMiur [E]

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:
<a href="http://www.facebook.com/sharer.php?u=URL_PAGINA&amp;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:
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:
<b:if cond='data:post.thumbnailUrl == &quot;&quot;'>
  <a expr:onclick='&quot;window.open(\&quot;http://www.facebook.com/sharer.php?s=100&amp;p[title]=&quot; + data:post.title + &quot;&amp;p[summary]=&quot; + data:post.snippet + &quot;&amp;p[url]=&quot; + data:post.url + &quot;&amp;&amp;p[images][0]=URL_IMAGENxDEFECTO\&quot;,\&quot;sharefb\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript: void(0)'> Compartir en Facebook </a>
<b:else/>
  <a expr:onclick='&quot;window.open(\&quot;http://www.facebook.com/sharer.php?s=100&amp;p[title]=&quot; + data:post.title + &quot;&amp;p[summary]=&quot; + data:post.snippet + &quot;&amp;p[url]=&quot; + data:post.url + &quot;&amp;&amp;p[images][0]=&quot; + data:post.thumbnailUrl + &quot;\&quot;,\&quot;sharefb\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' 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í:


Y el resultado en Facebook sería este:


Este es el sistema que ahora está funcionando en el blog, así que pueden probarlo online.



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

218 comentarios:

CristJian  

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

Daniel Cana  

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

JMiur  

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?

Daniel Cana  

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

JMiur  

No veo problemas, Daniel.
Esta imagen es una captura de la ventana que se muestra al hacer click en el enlace de tu blog.

Daniel Cana  

mmm... creo que ya sé dónde está el problema. ¿Usas firefox? En firefox funciona pero en chrome ni en opera me funciona.

JMiur  

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.

Daniel Cana  

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.

Adrián J. Messina  

¡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.

Carluís  

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.

Yurika-Chan  

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???

Silencespainter Me  

Funcionan perfecto, muchas gracias :D

Tuky  

Esto me suena como un problema que me pasó pero que alguien GENIO!! resolvió :)
¿o serà que tengo que volver a modificar todo?

JMiur  

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 &quote;

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

Gem@  

Pero mira que me haces trabajar y encima en la noche de Reyes :s

JMiur  

No hace falta que lo hagas hoy, Gem@ ... puedes hacerlo mañana tempranito :D

thejigg0695  

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

thejigg0695  

mira acabo de encontrar el sitio,es este

JMiur  

¿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

thejigg0695  

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

JMiur  

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.

Yurika-Chan  

Ya lo puse y no me funciona :(( no sale el resumen ni nada, tengo que cambiar algo en las METAS???

JMiur  

Tendrías que decirme dónde esta tu ejemplo para verificarlo.

Yurika-Chan  

Lo puse en este blog http://grupodinamo.blogspot.com/

JMiur  

Alli no veo ningún enlace a facebook.com/sharer, sólo un ícono de Facebook con otro tipo de enlace.

Yurika-Chan  

Entonces que estoy haciendo mal, ahora si no entendi :(

JMiur  

Tal vez no lo has colcoado en el includable correcto y por eso no se ve.

Angelicsan  

El código que pones en la entrada en que parte va???

Robinson Char  

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/

JMiur  

Angelicsan:
En cualquier lugar del footer de las entradas, donde quieras ver el enlace.

Robinson Char:
Perfecto :D

PS3 Argento  

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!

JMiur  

Algo así:

<a expr:href='&quot;https://twitter.com/intent/tweet?original_referer=&quot; + data:post.url + &quot;&amp;source=tweetbutton&amp;url=&quot; + data:post.url + &quot;&amp;via=PS3Argento&amp;text=&quot; + 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

PS3 Argento  

Gracias, sos un capo! funciono perfecto, era para reemplazar el boton de Twittear en cada post :) Saludos!

Carlos Manuel Bueno Disla  

Soy nuevo en esto y la verdad no se donde poner el código que dices porque yo también tengo eso mismo problema.

Felipe OI  

Lo acabo de añadir a mi blog y funciona perfecto. Muchas gracias, jefe!

JMiur  

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.

CristJian  

Hola JMiur, ¿no es posible hacerlo con contador? estuve tratando de ponerle el type="button_count" para ponerle el contador pero no funcionó :(

JMiur  

¿Para qué cuente qué cosa? ¿Los clicks? Si es eso, no porque ¿dónde guardarías ese dato?

CristJian  

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 :)

JMiur  

Los códigos de sharethis sólo pueden ser modificados con las opciones que da el mismo servicio.

Chipilofan  

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.

JMiur  

No veo que haya ningún problema.

Oloman Oloman  

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

JMiur  

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

Renzo  

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 :/

JMiur  

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.

La Abdon Porte  

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??

JMiur  

Tendría que ver un ejemplo donde notes un error para intentar saber el motivo.

Chipilofan  

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.

JMiur  

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.

La Abdon Porte  

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

JMiur  

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..

Domin-Omega  

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.

JMiur  

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.

Marina  

Es el mismo problema que yo tengo, además de que me he dado cuenta que el botón FB que viene con Addthis, el que estaba usando hasta ahora, no funciona. Pinchas y sale un +1, pero no te da la ventana popup para ingresar la informacióna FB, o sea que es como si no hubiera hecho nada. Muy raro todo! :S

Frank Osnayo  

No solo pasa en blogger tambiem me paso en mi web solo puedo compartir enlaces antiguos y los nuevos solo se ve la url

María José Moya (Mariajo)  

JMiur, estoy intentándolo pero para que quede con la misma estructura que el resto de botones, en vez de solo enlace de "Compartir en facebook" o enlace con imagen sin más, quería poner la imagen de Facebook con "contador" de clicks asociado (para poder hacerme una idea de qué les es más util a mis compañeros de lo que les informo), pero no encuentro cómo hacerlo.

La cuestión sería un botón para compartir en Facebook idéntico al que ofrece el periódico 20 Minutos en sus artículos, que al pinchar, sale un desplegable como el tuyo, en el que se puede seleccionar a dónde --dentro de Facebook-- quieres enviar la noticia, pero además tiene contador. Se pongo un ejemplo: http://www.20minutos.es/noticia/1322882/0/reforma-laboral/supuestos/analisis/

Si en vez de contador pusiera una imagen de Facebook sin más, tendría que cambiar tooda la forma de visualización del apartado de compartir de mis entradas (previa búsqueda de nuevas imágenes, etc.), lo que sería para mí sería muy trabajoso.

Un abrazo,

PD: mi blog: http://mi-estrella-de-mar.blogspot.com/

JMiur  

Ese que ves el es botón Me gusta o el botón Enviar de Facebook y no es configurable. Este es el botón eviar

Seguramente, tendrás el mismo problema que con el otro ya que n peudes establecer los datos de envio.

Gonzalo  

Y si uso dominio propio tambien funciona??

JMiur  

Sí, funciona del mismo modo.

Gonzalo  

otra pregunta: no hay problema de dejar las metas genéricas del Open Graph en el codigo fuente al inicio de -head- o hay q condicionarlas para q solo se vean en el inicio?? Osea, puedo tener dos botones compartir: uno en el header q se vea en todas las ventanas y q sirva para compartir el home y otro mas abajo en cada entrada para compartir estas sin q haya conflicto??

JMiur  

Si configuras cada botón con datos distintos, puedes tener tantos como quieras.

Gonzalo  

ok, haremos las pruebas, gracias!!

Marina  

Excelentemente explicado JMiur, pero soy un poco cerradita de mollera y no me ha salido bien, he tenido que poner algo mal.

Si no he entendido mal, tendríamos que poner el código que viene en el archivo, por ejemplo debajo de

div class='post-footer-line post-footer-line-1

y sustituir url_imagenxdefecto por la url de una imagen. Lo he hecho, pero no me ha salido nada (no me ha cogido ni el título de la entrada ni la descripción ni la imagen). Y mi pregunta es, si quiero que coja por defecto la imagen de cada post, ¿cómo se indicaría? Porque según entiendo aquí, saldría la imagen que nosotros le marquemos, pero lo que yo quiero es que cuando copie y pegue una dirección de un post de mi blog, salgan todos los datos (antes lo hacía y ahora no).

Mi blog es http://crepesdepapel.blogspot.com

Gracias por todo!

JMiur  

Sí. Se pega allí donde dices y si miras el código verás que tiene una condición, hay dos partes; en una, si no hay una imagen se usa la imagen por defecto que debes definir; en la segunda parte, se usa la imagen del post pero, no cualquiera, sólo aquella que ha sido detectada por Blogger: data:post.thumbnailUrl

Por otro lado, el botón sirve para compartir desde ahí, si pegas la URL de una entrada en Faebook, el resultado será otro, no se verá casi nada, tal como te ocurre ahora pero sobre eso, nada podemos hacer ya que depende de Blogger y Facebook.

En tu blog, no veo el ejemplo colocado.

Marina  

Sí lo tenía quitado porque como no iba, preferí dejarlo vacío. Lo acabo de poner en el footer1 y me ocurre como ayer.

Por otra parte he mirado el blog en el enlace de Url Linter y me lanza error 503 (https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fcrepesdepapel.blogspot.com)

Cuando comparto en FB (copiando y pegando la url en mi estado, por ejemplo) el enlace de la página principal sí que me toma el nombre del blog, pero lanza un texto aleatorio de una entrada. Sin embargo, al tomar una url de una página concreta, no sale nada.

Con el botón que acabo de instalar siguiendo tus pasos, como te comento, no sale nada. Es una plantilla personalizada, quizás tenga algo que ver, aunque me pierdo entre tanto código.

Una vez más, gracias por tu ayuda JMiur :D

Marina  

Te cuento novedades que he visto. No sé por qué, porque no he tocado nada después, funciona sólo en las entradas a partir del 4 de marzo hacia atrás. A las dos últimas no les funciona ni el botón de compartir ni pegar el enlace en facebook.

Otro detalle que he visto es que, en las antiguas, con el botón de compartir toma bien el thumbnail y el comienzo del texto. En Facebook, si se copia y pega el enlace del post, sale la foto pero en lugar del texto, coge este código: summary_noimg = 400;
summary_img = 250;
img_thumb_height = 65;
img_thumb_width = 116;

Es decir, no sale el texto del post, sino eso. Supongo que hay algo mal en el código, pero no sé qué puede ser.

Ya te digo que no he tocado nada desde que te hice la última consulta, no sé si se habrá refrescado algo en la caché o lo que sea...

Disculpa las molestias! Gracias por todo :D

JMiur  

No veo nada malo en el botón de tu página; es decir, no veo que el código generado tenga algún error y sin embargo, no anda ¿por qué? realmente no lo sé. Los datos que tiene son perfectos sale en blanco.

Lo de las fechas es muy extraño. Evidentemente, algo está mal en alguna parte pero no estoy seguro si es un problema de Blogger o algo de la plantilla misma. Seguiré mirando.

Marina  

Muchas gracias por tu tiempo y tu atención. La verdad es que me trae un poco loca, porque sigo todos los pasos y no me sale correctamente y sin embargo en otros blogs lo he hecho y sí que funciona. Me inclino a pensar que tenga algo que ver con la plantilla, aunque ya te digo que ni idea.

Un saludo y gracias de nuevo. :D

JMiur  

Lamentablemente, yo tampoco lo entiendo, Marina. Todo se ve correcto, el código está bien y no funciona. No sé el motivo.

Asociación Por Ti Mujer  

Hola JMiur. He colocado este código en mi blog, pero funciona con unas entradas y con otras no. O abre el pop up de facebook y twitter, o no abre ninguno de los dos, pero siempre si abre el de google+. ¿Puedes darme una mano? Ejemplo de entrada donde no funciona: http://www.asociacionportimujer.org/2012/03/guatemala-vamos-camino-derrotar-la.html
Saludos, Rodolfo.

JMiur  

Lo que veo raro es que, cuando miro el código fuente de esa entrada, lo que veo es que el botón de Facebook y el de Twitter, tienen el mismo código y la única diferencia es la imagen.

Puede ser que el problema esté allí, que en la plantilla haya algún error al copiar y por eso se duplica.

Ricar69  

Lo primero agradecerte el trabajo, somos muchos los que hemos padecido este inconveniente.

Después de varios (por no decir muuuuuchos intentos) lo he conseguido. Por fin se ven la miniaturas y las cabeceras al compartir en fb.

Pero ahora me gustaría cambiar el texto: "Compartir en Facebook" por una imagen. ¿Podríais indicarme como lo hago?

Gracias de nuevo.

Ricar69  

Cacharrenado, cacharreando, ... lo he conseguido, así que me contesto a mi mismo, por si a alguien tan cortito como yo le puede venir bien.

Lo que hay que poner en lugar del texto es:
< img alt='' class='icon-action' src='URL_IMAGEN'/>

ojo: el espacio que hay después de < no hay que ponerlo, pero es que si no lo ponía no podía escribir esta respuesta porque me decía que la etiqueta no está permitida.

Gracias una vez más.

@blogderevistas  

Tengo una problema que no se como solucionar...

Cuando comparto algo , junto con el nombre de mi entrada se comparte el nombre de mi blog

Ejemplo al compartir: (nombre de blog): (nombre de entrada)
Yo solo quiero que se comparta el nombre de la entrada

Efrain Rojas  

no me sale, en mi blog, solo me sale letras y no un boton, ademas me sale en la entrada principal http://sinhuevadas.blogspot.com/ haber si me dices cual es el error, yo quiero q me salga un botón y que aparezca solo en las entradas y no en la pagina principal.
el boton q me gustaría es el q sale en este blog (en sus entradas al final) http://elojoderojas.blogspot.com
Me gustaría que me digas que cambios le tengo q hacer a tu código, por favor. Gracias de antemano

JMiur  

No veo que esté puesto así que no puedo decirte donde está tu error.

El otro sitio al que haces referencia usa el botón Share provisto por Facebook

IMFORMATICA Y JUEGOS  

muy buen aporte

NoticiaCuriosa.com  

Gracias por su ayuda.
No tienes una manera de hacer lo mismo pero sin abrir pop-up sino que automáticamente aparezca en el muro?

Gracias amigo

JMiur  

Facebook requiere siempre la autorización del usuario.

NoticiaCuriosa.com  

si claro, pero cuando tienes la cuenta de facebook abierto, le das en me gusta y automáticamente aparece el artículo en el muro, he visto que en otros sitios es asi, sin la necesiaad de escribir algo.

Gracias.

JMiur  

Para eso, simplemente agrega el botón Me Gusta de Facebook pero, en Blogger, con ese botón no es posible controlar el contenido compartido que es de lo que trata esto.

Simoilalan  

Hola:

Muchas gracias por el post. Pero tengo un problema:

A mi no me sale nada de nada. También es cierto que no tengo ni pajolera idea, jamás había intentado meterme en la plantilla html esta. ¿¿Donde tengo que colocar el código del texto?? Yo cuando busco — div class='post-footer-line post-footer-line-1 — me salen dos lineas iguales. Lo tengo que pegar tras la primera o tras la segunda???

JMiur  

No sé cuáles son las dos que que ves, debería estar dentro de este includable:
<b:includable id='post' var='post'>
probablemente, el otro, es que corresponde al código para móviles.

Rebelware  

Simplemente, GENIO
Justo estaba tratando de arreglar el botón para compartir en facebook, ya que lo que tenia me hacia un desastre.
Gracias a tus publicaciones , puedo hacer funcionar las cosas en mi blog desde hace 1 año que lo empece .

En diseño voy para atrás, pero gracias a vos lo que esta funciona :D

GRACIAS :)

JMiur  

Gracias, Rebelware. Me alegra que funcione :-D

Viviana Muñoz  

Hola

Tengo un problema con el boton me gusta,como puedo colocar el boton de me gusta en blooger para cada entrada, lo e colocado pero cuando se da me gusta para una entrada marcar para todas y eso no tiene gracia, lo ideal es saber cual entrada es la mas votada y que al darle click a la persona le aparezca a pepito perez le gusta xxxxx y al darle clic al enlace le aparezca la entrada que le gusto en facebook

JMiur  

Debes indicarle la URL de la página que en Blogger se lee con data:post.url tal como muestra el primer ejemplo de esta entrada

Alicia (Ἄρτεμις)  

Hola JMiur no se que ha pasado con esto pero no funciona. En mi blog no lo hace ni en el primer post ni en el post individual y si que lo hace en las entradas deslizantes. Aquí en tu ejemplo tampoco funciona

JMiur  

Lo veo funcionar perfectamente.

K.  

Estimado:

Primero, muchas gracias por compartir su sapiencia, espero de corazón que la vida le recompense sus horas de dedicación a esta web y si alguna vez necesita de una mano amiga acá en Chile, contácteme y trataré de ayudarle.

Ahora, acabo de implementar el código en http://www.iuspoetica.com/

y funciona, pero parcialmente.

Le agregué una imagen en vez de texto, pero verá que de las cinco entradas que tiene la pagina principal del blog, no se abre en dos de ellas, a saber, la primera (Humberto Maturana...) y en la cuarta (Derecho y Magia).

En las otras 3, funciona perfect. Alguna idea de porqué?

DiarioWeb  

No me queda muy claro en que parte de la plantilla debo poner el codigo

JMiur  

Donde quieras mostrar ese botón o enlace; probablemente, en el footer de las entradas.

hugo ismael ruiz  

Genio! :) muchas gracias!

Mauro Gadaleta  

es una pena pero no funciona en mobile!

Selene Luna Aeterna  

Buenas noches Sr. JMiur, tengo el siguiente inconveniente:
Puse los metas tags en mi blog, pero ahora cuando quiero compartir una entrada, ya no me aparece el titulo de la entrada sino el nombre de la pagina, antes me aparecía el titulo de la entrada que compartía en facebook, que hago? o tal vez pueda detectar donde está el error. Le dejo el link del blog. Muchas gracias de antemano. Un saludo. Selene

http://elavernodedante.blogspot.com/

JMiur  

No veo que en el blog haya etiquetas META indicando el título por ejemplo. Fíjate en esta entrada

Jairo Noé García Meza  

oye mil gracias caballero.... esta genial. De verdad llevo rompiéndome la cabeza con esto desde hace mucho, gracias de verdad, genio.

Sαbrinα Mαlerbα  

Hola, yo te había escrito en Facebook y me dijiste que te escriba por acá. Quisiera saber qué pusiste exactamente en tu plantilla para que te quedara ese ícono de Facebook y para que, al compartir una entrada, aparezca un breve resumen de la misma. Lo intenté de diferentes formas y no lo logré, así que me sería de mucha ayuda si me dijeras exactamente qué poner y listo...
¡¡Muchas gracias!!

JMiur  

Exactamente el código que indica la entrada y para poner una imagen, cambiando el texto "Compartir en Facebook" por esa imagen:

<img src="url_imagen" />

Sαbrinα Mαlerbα  

¡Sos un genio! ¡Un genio total! ¡GRACIAS!

GoÔnzZzaC  

El código genera la ventana perfectamente, pero al darle click en compartir me aparece el mensaje "El mensaje no pudo ser publicado en este Muro.". Probé con otras cuentas de Fb, y no funciona tampoco.
¿Alguna idea?

Saludos

JMiur  

Tendría que ver tu jemplo porque no veo problemas con el botón agregado en este blog.

GoÔnzZzaC  

Este es el link que se genera, http://www.facebook.com/sharer/sharer.php?s=100&p%5Btitle%5D=Prueba+desde+mi+Pagina&p%5Bsummary%5D=Comparte+tus+mensajes%21&p%5Burl%5D=pagina+de+prueba&p%5Bimages%5D%5B0%5D=http%3A%2F%2Ftueem.com.ar%2Flogo.php, le pedí a varios que probaran y no deja publicar.
Ya probé cambiando el contenido.

Saludos

JMiur  

Estos son los errores que veo:

dice:
http://www.facebook.com/sharer/sharer.php
y debe ser:
http://www.facebook.com/sharer.php

en la url de la pagina no hay una dirección url:
p[url]=pagina+de+prueba

dice:
&p[images][0]
y debe ser:
&&p[images][0]

y la imagen no es una imagen:
http%3A%2F%2Ftueem.com.ar%2Flogo.php

GoÔnzZzaC  

Cuando carga el link se cambia automaticamente a sharer/sharer.php , Lo demás son string y la imagen la envía el php por header.
De cualquier forma, hice los cambios que mencionas y aun no funciona.
¿Será que facebook ya no da soporte a esta forma?

JMiur  

Sigue funcionando perfectamente. Debes revisar el dato de la imagen que es erróneo.

GoÔnzZzaC  

No lo pude hacer funcionar, pero use Metatags como describiste en la entrada http://vagabundia.blogspot.com/2011/07/optimizar-las-etiquetas-meta-para.html y luego envié solo la url por parámetros a share.
Con esto se solucionó, fácilmente.

Saludos!!

Johao Hernandez  

hola amigo

tengo una pregunta, ya instale el codigo y me funciona perfectamente pero el tamaño del pop up no es como aparece aca, si no que es mas pequeño, que le tengo que modificar para cambiar el tamaño a mi antojo?

gracias

JMiur  

Dentro del código dice:

width=548,height=325

ese es el tamaño del pop-up.

METALMUSIC  

muchas gracias, estuve buscando esto por todos lados,

una pregunta, seria posible poner un button_count, y no solo letras o alguna imagen?

saludos!

JMiur  

Puedes poner una imagen cambaido el texto "Compartir en Facebook" por una etiqueta IMG.

Un contador es imposible ya que no tienes manera alguna de contabilizar esos datos.

METALMUSIC  

Una cosa mas, se podría agregar la descripción de las metatags, eso y seria increíblemente perfecto,

gran trabajo, saludos!

JMiur  

Las etiquetas META no pueden ser creadas con JavaScript. Mejor dicho, pueden crearse pero es inútil ya que no serán leídas por ningún servicio o motor de búsqueda.

Lo que debes hacer es establecer descripciones personales para cada entrada cuando las creas (en el menú de la derecha del editor) y agregar en la plantilla esa descripción, tanto general como para Facebook; algo así:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
</b:if>

Juan Da  

Hola JMiur

todo salio de maravilla era justo lo que estaba buscando pero queria saber si hay alguna forma de que la miniatura de la imagen sea mas grande que 100x100 pues me parece que queda muy pequeña y he visto otras paginas y queda mas grande al compartir.

espero me haya hecho explicar gracias me encanta tu blog

JMiur  

Es el dato enviado por data:post.thumbnailUrl; no veo forma en podría cambiarse sin usar javascript.

Diviernet  

:( gracias pues la verdad no entiendo mucho de codigos

cholo5247  

oye como le puedo colocar una imagen en vez del texto eske no se como hacerlo me pudieras decir???

JMiur  

Cambiai el texto "Compartir en Facebook" por una etiqueta IMG con la dirección de la imagen:

<img src='url_imagen' />

Farmers Lokos  

Hola me gustara me ayuden con un problema, el dia de ayer hice cambio de plantilla de blogger, pero siempre me he guardado los codigos de redes sociales y otros de interes, resulta que el boton compartir de facebook no me toma la primer imagen en miniatura como lo hacia antes de cambiar plantilla y me urge lograr ponerlo asi, ya que mi blog depende el ingreso de usuarios por la primer imagen que aparezca en los muros de los que la comparte, pero al darle compartir empieza a cargar muchas imagenes del blog para elegir una cada vez que se da clic y hasta imagenes que estan fuera de la entrada... espero me puedan ayudar... porque no quiero volver a poner la plantilla anterior

JMiur  

Sin saber cuál es el sitio, no se puede aventurar ninguna respuesta. Revisa los cambios realizados.

Farmers Lokos  

Cambie toda la plantilla mira este es el blog, y encontré una forma depurando el link y agregando un codigo con enlace a una imagen en la misma entrada, pero tener que hacer eso cada vez que posteo algo es mucho trabajo me gustaría hacerlo que automáticamente reconozca la primer imagen de los post http://farmerslokos.blogspot.com/

JMiur  

Allí no se ve ninguna etiqueta META que indique la descripción o la imagen. Revisa lo que dice la herramienta para desarrolladores de Facebook cuando analiza una entrada de tu blog.

Farmers Lokos  

No entiendo busco los meta de la plantilla anterior y todo esta igual a esta...

y ahorita la unica solucion que he encontrado es agregando este codigo en cada entrada definiendo una imagen, pero eso es trabajo, quisiera que siempre el boton tome la primer imagen de cada entrada para compartir, y en meta ya no se que agregar porque todo lo veo igual

Laura Delgado  

Hola, es la primera vez que escribo aunque suelo leerte mucho para tunear mi blog. Esta entrada me recuerda mucho a algo que estoy intentando hacer y que me gusta de este blog, pasa el cursor por encima de las imágenes:

http://www.designlovefest.com/?s=point

Intenté copiar los códigos, no se nada de ellos e imagino que mi fallo está en que utiliza unos que no acepta blogger (creo que es wordpress, no?)que es lo que utilizo yo. CSS también lo copié pero sirve para blogger?. Podrías echarme un cable, creo que lo que explicas en este port se parece mucho a lo que se debe hacer para conseguir el dichoso efecto sobre las imágenes.
Gracias y un saludo

JMiur  

Tendría que ver tu ejemplo para tratar de ver dónde puede estar el error. No, no hay diferencias entre Blogger y WordPress en cuanto al CSS, es igual el cualquier tipo de sitio y por lo que se ve allí, no debería ser difícl de hacer pero, como dije, debo ver tu ejemplo concreto para eso.

Laura Delgado  

Cómo podría enviarte los codigos? he probado por aquí pero no me deja.

JMiur  

El código no es necesario por ahora. Sólo dime en que sitio has colocado el ejemplo para verlo online.

Laura Delgado  

Lo quité porque no funcionaba y lo dejé escrito para ver si lo podría miarar otro día, pero si vas a la página que te comento y te colocas en alguna de las imágenes e inspeccionas el elemento, que en este caso es el botón pin it, es lo mismo que copié, sólo cambié las imágenes y los enlaces y lo metí en una entrada, pero no salió. Yo sólo copié el CSS lo puse en mi plantilla y el html lo puse en la entrada, pero creo que se me ha olvidado algo más en la plantilla principal, es lo que deduzco después de leer tu post. Mira a ver si puedes ver esto en google drive:

https://docs.google.com/document/d/1Byr2Kd2f_op80HM_P5YUQx0EL6IzJkNIdETZc79_hDY/edit

no te puedo dar otra cosa, espero que no te suponga mucha molestia.

JMiur  

Sin ver tu ejemplo concreto, es imposible decir nada ya que se debe analizar en el contexto en que está colocado.

Laura Delgado  

Lo vuelvo a colocar y te digo?

JMiur  

Adelante, Laura.

Crónica  

He incorporado esta pluging con los condicionales y funciona, pero en IE los acentos no los interpreta. Firefox Chrome y resto lo hacen perfecto. He modificado utf-8, he puesto ISOreconozcan ñ y acentos, pero el restultado es el mismo. El script lo incorporo al final del artículo en footer.


Por cierto que he revisado el funcionamiento del compartir de Vagabundia en IE y le ocurre lo mismo ¿es uj problema de blogger, o de IE). Tanto da que sea IE8, como IE7
http://cronicadigitalcomarcal.blogspot.com

Gracias

Crónica  

Añadiendo más datos. Tanto en la web de Vagabundia como en la nuestra, si en IE se llama una vez al sharer.php los acentos están mal, pero si sin cerrar ese cuadro, se le vuelve a llamar para compartir otra vez, los acentos salen bien. Es como si le faltara cargar algo y lo carga cuando ya está ejecutado, por eso la segunda vez sale bien. Gracias
http://cronicadigitalcomarcal.blogspot.com

JMiur  

Eso ya no depende de Blogger sino del navegador y de Facebook mismo.

Pozo+10™  

Cómo hago para cuando comparto un enlace en Facebook se vea una imagen concreta de la entrada? Que código debo colocar en mi plantilla?

JMiur  

No hay ninguno. Se toma la primera imagen establecida por Blogger.

Pozo+10™  

Pero si usted acá lo tiene aplicado. Si yo comparto esta entrada en Facebook automáticamente detecta esta imagen, y en cada entrada sucede lo mismo. Eso es lo que yo quiero saber como hacerlo, cual es el código que debo colocar en mi plantilla. Y si miro el código de fuente figura así:

<link rel="image_src" href="http://3.bp.blogspot.com/-vrUub-F0leA/TwTGtfL_3nI/AAAAAAAATQk/R-JkkfUGoEI/s72-c/faceshare_1.png" />

Así que yo supongo que en la plantilla tengo que colocar el siguiente código:

<link rel="image_src" href="(acá que va? para que se muestre una imagen diferente para cada entrada)" />

JMiur  

Tu preguntas se refiere a ver una imagen concreta y la respuesta es que no se puede, la imagen es definida por Blogger; en el script que muestra la entrada, el dato es este:

data:post.thumbnailUrl

ese dato lo proporciona Blogger mismo y es el mismo que agrega en:

<link rel="image_src" ....... >

si ese dato no existe o no es agregado por ellos, no hay forma de agregarlo manualmente.

Si ese dato existe, tambien puede agregarse en una etiqueta META ya que el el head, esa url se encuentra disponible en:
data:blog.postImageThumbnailUrl

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
<b:else/>
<meta content='URL_IMAGENxDEFECTO' property='og:image'/>
</b:if>

Pozo+10™  

Muchas gracias, es lo que necesitaba, ya que Blogger no proporcionó ese dato en mis blogs. Agregué la etiqueta META y ahora si funciona bien, sólo me gustaría saber si se puede cambiar algo. Las imágenes aparecen con el tamaño s72-c, hay forma que se muestren con su tamaño original, s0 o s1600?

JMiur  

Sólo podría cambiarse con JavaScript pero no tendría efecto alguno en Facebook.

Pozo+10™  

Muy bien! Muchas gracias por la ayuda brindada!

Pozo+10™  

Perdón que lo moleste de nuevo, pero ahora me gustaría saber que etiqueta META debo colocar en mi plantilla para que al compartir una entrada en Facebook se muestre en la descripción los primeros textos de cada entrada. Desde ya muchas gracias!

JMiur  

Primero que nada, habilita la descripción en Configuración | Preferencias de Búsqueda.

Luego, en cada entrada, utiliza la Descripción de Búsqyeda que se meustra como opción a la derecha.

Por último, puede agregar lo siguiente en el head donde data:blog.metaDescription es justamente ese texto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot;. DESCRIPCION&quot;' property='og:description'/>
</b:if>
<b:else/>
<meta content='DESCRIPCION_POR_DEFECTO' name='description'/>
<meta content='DESCRIPCION_POR_DEFECTO' property='og:description'/>
</b:if>

Pozo+10™  

Le agradezco mucho!

Mil Chistes  

Hola Jmiur :) justamente estaba buscando información de esto y encontré este último comentario, el problema es que cuando alguien le da like a alguna entrada (en este caso yo) se ve todo borrosa la miniatura en el facebook http://k39.kn3.net/6F80B1B03.png

Lo que sucede es que tengo esta meta tag para facebook cuando hay alguna imagen en la entrada para la propiedad og:image

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>

y las miniaturas salen a 72x72 y al pasar a facebook con los likes las agranda perdiendo calidad, ¿hay alguna otra etiqueta aparte del data:blog.postImageThumbnailUrl que en vez de buscar la miniatura de la primera imagen, pueda obtener la dirección de esta mismo sin necesidad de un thumb para que no pierda calidad?

ejemplo (si es que existe esto jeje)

<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
</b:if>

JMiur  

El dato data:blog.postImageThumbnailUrl es una imagen de 72x72; si bien es posible cambiarlo con JavaScript y mostrar un thumbnail más grande ( s72-c indica una imagen cuadrada de 72x72 ) eso no tendría uso práctico ya que no sería leído por los servicios externos.

No conozco la existencia de ninguna otra etiqueta que haga algo similar.

Jose Romero  

Hola Jmiur,

Creo que hay un fallo en el script. Facebook coge bien el enlace pero al mostrar en el perfil usa el titulo de la raiz del blog, quizas sea necesario añadir las etiquetas open graph para que añada estos valores.

Le dejo un enlace donde lo estoy aplicando.

El boton esta justo debajo de "Read More" en la parte izquierda de la pantalla.

Un saludo y gracias por ayudar

JMiur  

Los únicos dos datos que estás definiendo, son correctos.
El enlace que se muestra es:
u=http://blog.phorest.com/2013/02/the-difference-between-reminder-text.html
y el título:
t=The%20Difference%20Between%20a%20Reminder%20Text%20and%20a%20Confirmation%20Text
el resto, depende de lo que Facebook detecte y para eso se usan las etiquetas meta.

Crónica  

Desde hace unos cinco dias, la miniatura (imagen) no la respeta facebook, cuando se comparte pone adecuadamente el título y el texto, pero la miniatura no la detecta. Incluso he probado en este blog y también está fallando. Hasta hace cinco dias, iba perfecto ¿Es posible que ha ya hecho algún cambio facebook en sus pluggings?.
Saludos y gracias por sus continuas actualizaciones

JMiur  

Lo desconozco. Por ahora, todo lo que leo dice lo mismo así que habrá que seguir investigando.

Farmers Lokos  

Lo que pasa que hoy facebook toma la imagen mas grande de la entrada ya no acepta imágenes inferior a los 200px, esos cambios como que no son nada buenos..

Crónica  

Gracias. ha sido un cambio inmediato. Si sirve de algo, cuando en lugar de usar esta rutina, se comparte por medio de situar la URL en facebook para que él detecte los datos, la imagen si que aparece.

Un saludo

JMiur  

Esa podría ser una explicación razonable. Prueben cambiar:

data:post.thumbnailUrl
que es la miniatura de 72x72

por
data:post.firstImageUrl
que es la primera imagen en el tamaño en que ha sido publicada.

Crónica  

Gracias de nuevo

Esa ha sido la solución, cambiando en la rutina la imagen de 72 por la imagen a tamaño original, que siempre la ponemos por encima de 200, ha funcionado.

Saludos y de nuevo gracias por sus continuas actualizaciones

JMiur  

Me alegra que haya servido. Facebook es retorcido :-D

Ariel I  

Gracias, problema resuelto ;)

Nekoko Shan  

Perdón, pero no entiendo donde debo colocar el código del .txt
No se si me podrías explicar eso.

Desde ya muchas gracias.

JMiur  

Es lo que explica la entrada. Donde quieras ubicar el enlace dentro del includable post.

Nekoko Shan  

Perdón, pero sin entender en que parte de la plantilla de Blogger debería colocarlo.

JMiur  

Dependerá de tu plantilla y lo que quieras hacer. Por ejemplo, en el footer de las entradas.

Aviber  

Hola Jmiur:
Gusto en saludarte nuevamente,tenía el problema que facebook había dejado de cargar las miniaturas y texto,seguí tus instrucciones y hete aquí que ahora funciona todo perfectamente.-
Gracias por compartir

JMiur  

Perfecto, Aviber. Me alegra que funcionara la idea.

Alex Soplopuco Tume  

hola q tal hice el truco pero a la hora de compartir en vez de salir el titulo de la entrada sale el titulo del blog en general y me gustaria saber como para que salga el titulo de la entrada y algo de texto del cuerpo ya intente varias cosa pero noc q mas hacer? gracias espero tu respuesta

JMiur  

Tendrías que decirme en cuál blog l oteienes agregado.

marioeca  

Hola amigo, me ha sido de mucha ayuda este post. Solo tengo un problema, en casi todos mis posts cuando pongo el link en el debugger de facebook, me muestra el siguiente error:

Small og:image: All the images referenced by og:image should be at least 200px in both dimensions, with 1500x1500 preferred. (Maximum image size is 5MB.) Please check all the images with tag og:image in the given url and ensure that it meets the recommended specification.

og:image should be larger: Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'http://cdn.appstorm.net/ipad.appstorm.net/files/2012/10/Shuffler.fm_.png' will be used instead.


Es decir, el og:image esta tomando la imagen del thumbnail que esta en 72x72 y facebook me dice que esta muy chica. Hay alguna forma de cambiar el data:blog.postImageThumbnailUrl para que tome la foto del post y no el thumbnail? Gracias por tu ayuda.

Saludos,

Mario

JMiur  

Busca lo siguiente:

<div class='post hentry'>

y cambia por esto:

<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>

Fíjate en una plantilla original de Blogger para ver cuáles son las etiquetas que ellos han agregado.

No es lo ideal pero no tienes muchas más alternativas.

data:post.firstImageUrl sólo es accesible dentro del includable post

Mariela Marianetti  

Hola JM, te quería pedir si podés revisar lo que he hecho ( he estado toda la tarde); ya que, al implementarlo en mi Blog, acepta el Código, comparte un resumen del título, pero las imágenes solo se ven en algunos Post ( muy pocos, de hecho, confirmados, uno). Bueno, espero sugerencias.
Igualmente es un gran avance lo de compartir título y resumen de texto. Muchas gracias.

JMiur  

No veo dónde está funcionando tu ejemplo, Mariela.

Mariela Marianetti  

Hola Jm, lo he colocado en Letras y en Pensamientos, abajo del botón Addthis ( no me preguntes códigos ni nada), creo que al expandir plantilla, en Blog1, en el tercer triángulo ( o por ahí...prohibido reírse ¿ eh?)) Yo tengo Crome y veo claramente que dice compartir en facebook, he compartido contenido, y sale perfecto el primer párrafo del Post, pero no logro colocar una imagen y no sé cuál es mi error... Un abrazo y gracias.

JMiur  

¿Has cambiado el código tal como sugiere la actualización?

Usar:
data:post.firstImageUrl
en lugar de:
data:post.thumbnailUrl

Esto es debido a que Facebbok deshecha las imágenes pequeñas y data:post.thumbnailUrl es una imagen de 72x72

Mariela Marianetti  

Si JM, lo he cambiado, no sé qué puedo hacer ya que me gustaría que las entradas estuvieran adornadas con las imágenes, creo que eso puede inducir a leer un poema.
Te envío un saludo y estamos en contacto.

JMiur  

Dos cosas, lo primero es que veo que en muchos enlaces, aparece como imagen este texto:
URL_IMAGENxDEFECTO
en la plantilla, cambia ese texto por la dirección url de una imagen para que sea la que se comparta cuando en Blogger no se ha detectado ninguna.

Por otro lado, veo que las imágenes que agregas tienen este tipo de url:
https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTd8lddG17bi_CfkNoiyUnM9nU3mF9YxUG9PuauU8_kD_RtIjcKWw
y es muy probable que entonces, como no se trata de una imagen "directa" sino la url de una página que "muestra" la imagen o la genera automáticamente, Facebook no la reconoce como imagen. Es probable que el mismo Blogger no la detecte como imagen y por eso no están los datos y siempre se muestra la imagen por defecto.

¿Por qué no sube la imagen directamente a Blogger?

Mariela Marianetti  

Hola JM, la verdad es que no sé como subir la imagen directamente a Blogger ¿ Cómo lo hago?

JMiur  

En el editor de entradas, incluso en un borrador que luego puedes eliminar. Hay un ícono para eso.

Luego, miras el código HTML y copias la dirección que está en <img src="xxxxxxxxx

También puedes entrar a tu cuenta de Picasa que está asociada a la cuenta de Blogger:

http://picasaweb.google.com/home

César Martínez Romero  

Hola! Ya no se que hacer! He leido mil cosas y no hay forma.

Estoy preparando un blog con el que voy a empezar a publicar en septiembre, y estoy haciendo pruebas. Cuando quiero compartir en facebook lo más que he conseguido es que siempre salga lo mismo. Me vale cuando quiero compartir la dirección del blog, pero cuando trato de compartir un artículo concreto no consigo que salga la imagen del artículo y sobre todo el título del artículo y el principio del artículo.
¿Me puedes ayudar? Aunque lo suelo tener privado, lo dejo público para que lo puedas ver. Muchas gracias. www.corazonesinteligentes.com

JMiur  

Si vas a utilizar los botones de compartir de Blogger, lo único que puedes hacer es agregar las etiquetas meta que sugiere Facebook:
http://vagabundia.blogspot.com/2011/07/optimizar-las-etiquetas-meta-para.html
y revisar el sitio conn la herramienta que ellos proveen:
https://developers.facebook.com/tools/lint/

César Martínez Romero  

Muchiiiiiiiiiiiisimas gracias!!!!!

Al principio no me funcionaba, pero después de seguir también http://vagabundia.blogspot.com/2012/03/las-opciones-de-las-etiquetas-meta.html y http://vagabundia.blogspot.com/2012/03/nuevas-opciones-para-configurar-blogger.html ... Ha funcionado!!!! Muchas gracias!!!!

Mariela Marianetti  

Muchas gracias JM. Un saludo, lo voy a intentar

Equipo tecnico  

COMO SERIA PARA WORDPRESS

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???

JMiur  

Hace mucho que no uso WordPRess así que algunas cosas pueden haber cambiado. En el loop:

p[url] sería <?php the_permalink();?>
p[title] sería <?php the_title(); ?>
p[summary] sería <?php the_excerpt(); ?>

Y la url a la miniatura de la entrada me parece que debe hacerse de manera indirecta:

get_permalink( get_post_thumbnail_id( $post->ID ) );
o bien
wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) );

Tendrías que fijarte en el Codex de WordPress, en la sección funciones

macorisa  

¡Por fin! Era lo que necesitaba, ¡¡¡¡¡mil gracias!!!

macorisa  

Una cosa, JMiur.

El enlace compartir me aparece tanto en la página principal del blog, en cada entrada, como dentro de cada entrada y me parece que me queda muy saturado.

¿Cuál puede ser la razón?

Mi blog es éste http://macorisa.blogspot.com.es/

¡¡Gracias!!

Connie.

JMiur  

Utiliza los códigos condicionales de Blogger para definir el típo de página donde se mostrará.

macorisa  

Gracias, lo leo, lo hago y te cuento.

Saludos :)

Connie.

macorisa  

¡¡Lo conseguí!! :D

Después de muchas pruebas, pues el resultado no quedaba a mi gusto ya que al quitar la opción de Compartir de cada una de las entradas de la página principal, también me quitaba la opción en las demás páginas del blog.

Al fin, el código que me dio el resultado que esperaba fue el siguiente:



... código que abre el enlace de la opción Compartir



No tengo palabras para agradecerte, seguramente pensarás que era cosa de poco pero el que te tomes el tiempo para resolver la duda de cada uno de los que participamos en tu página, desde mi punto de vista, es para quitarse el sombrero.

Ya te tengo entre mis favoritos, eres el mejor punto de referencia para editar los blogs de blogger.


Mil gracias :)

Connie



Francis Clanel  

Hola muy interesante lo del link para compartir contenido de nuestro sitio en FB.
Mi duda es como hacer que una imagen que uno haya personalizado en su sitio se convierta en el link compartir en FB? gracias de antemano

JMiur  

En Blogger no puede hacerse ya que no exiten códigos para eso. Sólo puede ser usada la imagen detectada por el sistema como miniatura.

Dj Butimix  

Estimado:

Si al "compartir un post" y quiero que el titulo de compartir me lo tome directamente como tengo que hacer?

1ero: Donde tengo que hacerlo: en la plantilla o en la direccion de la ventana a compartir?

2do: si es en la plantilla, tengo que hacer algo asi?


meta property="og:title" content="TITULO DEL POST"


Osea donde dice TITULO DEL POST, quiero poner algo como: data:post.title
para que me tome el titulo del post cada vez que comparto, como hago?

Gracias.

JMiur  

No se entiende la duda. Tal como dice el post, el título es data:post.title que es la variable de Blgger que contiene el título de la entrada..

Para las etiquetas meta, mira esta otra entrada

Dj Butimix  

Lo que quiero es, cuando comparto una entrada de blogger en facebook, que me coloque automaticamente el titulo de la entrada en la parte de og:title. Como tengo que hacer?

JMiur  

Mira la entrada que te indiqué.

Ignacio Solsona  

Hola JMiur.

Muchas gracias. El aporte es muy bueno. Lástima que no se pueda solucionar completamente.

He puesto el botón de share, y me funciona en la primera entrada:

http://www.segunda-edicion.com/2013/09/la-prueba-del-acoso-laboral.html

Pero en otras entradas no coge la imagen, e incluso en otras se niega a compartir; como en esta:

http://www.segunda-edicion.com/2013/09/enemigo-publico.html


Por otra parte, para evitar que los usuarios cojan el link de un artículo y lo compartan en facebook de cualquier manera, ¿no podría ponerse una miniatura por defecto que aparezca siempre?

Yo prefiero eso, ya que así los usuarios ven la "imagen por defecto" y yo tengo la posibilidad de "subir una imagen" manualmente, cuando comparta en una fanpage.

Muchas gracias por la atención, maestro.

JMiur  

En esa entrada no funciona porque el texto contiene comillas y por lo tanto, el enlace resultante es erróneo.

Al compartir en Facebook, un usuario puede editar el título, el contenido y muchas veces, seleccionar la imagen. No creo que eso se malo sino todo lo contrario.

Ignacio Solsona  

Y en el resto de los casos ¿por qué no coge la imagen?

http://www.segunda-edicion.com/2013/09/segunda-edicion-se-estrenara-en.html

http://www.segunda-edicion.com/2013/09/multiples-perjuicios-para-la-salud-de.html

http://www.segunda-edicion.com/2013/09/un-castellonense-inventa-la.html

http://www.segunda-edicion.com/2013/09/no-hay-dinero-para-eurovegas.html



Y un largo etcétera.

Gracias JMiur. ;)

JMiur  

Imposible saberlo; prueba cambiar el código que identifica la imagen miniatura tal como se dice en el final de la entrada. El resto, depende del humor de Facebook.

Ignacio Solsona  

Gracias. Última pregunta si no es molestia. Puedo poner un código html para que comparta siempre la misma imagen. Independientemente de la entrada que se trate. En todas las entradas una misma imagen.

¿Es posible?

Gracias, y perdón por las molestias.

JMiur  

En el script que uestra la entrada, simplemente cambia data:post.thumbnailUrl por la url de la imagen por defecto tal como se indica en el primer ejemplo.

Alicia (Ἄρτεμις)  

No aparece el resumen cuando comparto las entradas :(

Ignacio Solsona  

Buenos días, esto es MUY interesante. Cuando inserto en una de mis entradas, un vídeo de Rtve, siempre tiene designada una imagen en su código html. Y cuando comparto esa entrada en facebook, SIEMPRE, sin excepción, coge la imagen designada por Rtve.

Deduzco que en el código ofrecido debería estar la solución a nuestro problema con las miniaturas de blogger en facebook.

Ejemplo:

http://www.rtve.es/noticias/20131215/parte-primer-ave-directo-desde-barcelona-hacia-paris/821780.shtml

¿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

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 ...

 
CERRAR