Publicar la imagen correcta al compartir enlaces en Facebook | Oloblogger Uno de los problemas que quizás me han consultado más en estos años ha sido el de la irregularidad del contenido que aparece al compartir un...

20 de mayo de 2014

Publicar la imagen correcta al compartir enlaces en Facebook

Uno de los problemas que quizás me han consultado más en estos años ha sido el de la irregularidad del contenido que aparece al compartir un enlace de un sitio web en Facebook.

En unas ocasiones el asunto era que las imágenes candidatas (seleccionables) estaban poco o nada relacionadas con la entrada, viéndose un banner, un avatar de un comentarista o cualquier otro gráfico que aparecía en la dirección de destino y que no era en ningún caso alguno de los que nosotros habíamos incluido en el post para ilustrar su contenido.

En otras el problema simplemente era que la miniatura salía muy pequeña, cuando las publicaciones de otros sitios mostraban imágenes más grandes sin problemas, ocupando todo el ancho de la columna central de los muros.


La verdad es que casi siempre respondía que no sabía el motivo de que ocurriera eso, pues tras muchas pruebas y pusiera lo que pusiera en la plantilla, la decisión de Facebook de colocarnos una imagen u otra parecía un poco azarosa y si a eso le añadimos que en ocasiones el título o el resumen de texto también era "raro", descubrir el patrón que haría que todo fuera bien no estaba a mi alcance.

Pero el motivo de esta supuesta aleatoriedad es que hay al menos dos factores que conjugados son los que determinan esto y si actuamos adecuadamente en uno y en otro no, los resultados no serán normalmente los que buscamos. Por tanto la solución está en hacer ambas cosas bien. Son las siguientes:


1. Marcado de datos con Opengraph


Por una parte está lo esencial, el marcado de datos. Con esas marcas es como indicamos a los robots de los buscadores y redes sociales qué elementos de nuestro contenido representan datos interesantes para ellos y también la manera en que los etiquetamos según su tipo. Facebook usa su propio protocolo para esto y es el llamado Opengraph, que incluye además de este marcado semántico algunas utilidades para publicadores y una API para desarrolladores.

De esta manera, para indicar a Facebook qué título, imagen y resumen de texto debe mostrar en su red al compartir un enlace nuestro, lo primero que tenemos que incluir son unas meta como estas después de la apertura del <head> y antes de la etiqueta skin:

<!-- METAS FACEBOOK -->
<meta content='Compartir tus posts en Facebook con la imagen correcta' property='og:title'/>
<meta content='http://1.bp.blogspot.com//s640/miniaturasfacebook.jpg' property='og:image'/>
<meta content='Cómo conseguir que al compartir un enlace de tu web o blog, Facebook muestre los datos sobre título, imagen y resumen de texto que tú desees' property='og:description'/>

Como veis las meta incluyen una propiedad autodescriptiva (en inglés) con el prefijo og: (OpenGraph) y sólo se trata de poner el contenido y la marga og:title, og:image u og:description, según el contenido del que se trate.

Pero claro, esto no es cuestión de estar escribiéndolo manualmente para cada entrada personalizando título, imagen y resumen, así que por ejemplo en Blogger, lo podemos hacer mejor echando mano de las variables data. Sería así:

<!-- FACEBOOK -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>


El título del post existe siempre, pero la imagen obviamente sólo saldrá si el post contiene alguna. Igual pasa con la descripción si no tenemos grabada ninguna para la entrada, sólo que en ese caso Facebook tomará como resumen aquel texto que su algoritmo le dicte.

¿Y dónde se graba esa descripción para controlarla nosotros? Pues es indivicual para cada post y al igual que las etiquetas las encontramos en Blogger en el editor de entradas, la descripción está en un menú a la derecha titulado Configuración de la entrada ¿Os suena haber visto una opción llamada Descripción de búsqueda? Pues esa es la que hay que rellenar. Y no sólo para Facebook sino que también es más que recomendable grabarla de cara a lo que muestran los buscadores sobre nuestros enlaces.



2. Tamaño de las imágenes originales


Este es el otro factor de los dos que os comentaba al principio y que hacen que por mucho que marquemos adecuadamente, a veces las cosas no salgan como queremos.

Al igual que ocurre desde hace unos dos meses con las imágenes en Google Plus, Facebook sólo muestra como elegibles aquellas imágenes que a criterio de su algoritmo tienen un tamaño adecuado. Además esto no ocurre de siempre, sino que ha ido evolucionando a lo largo del tiempo y por eso lo que hace tiempo os funcionaba bien, ahora quizás ha dejado de hacerlo.

Por tanto, si lo del marcado lo tenéis bien, no os calentéis la cabeza. La única solución 100% efectiva es usar imágenes en vuestras publicaciones de al menos 600x315 píxeles para que Facebook la escoja como primera opción. Esta debe ser la pauta para al menos la primera imagen de cada post.

La captura anexa tomada del propio apartado de ayuda de Facebook ilustra y explica esto. Recomiendan que sean de 1200x650, pero esto para la mayoría de casos parece un excesivo e innecesario peso.

Y como para Google+ dijimos que el mínimo era 506px, ya es fácil deducir que para cubrir este tema en esas dos redes lo óptimo sería superar los 600px. Y ojo que Facebook es un poco caprichoso y requiere también una proporción mínima de 1,91:1 para no recortárnoslas. Se trata de imágenes apaisadas y teniendo en cuenta que el mínimo es de 600, de ahí se deduce la altura mínima de 315px.

En un principio, si el tamaño es menor pero suficiente (no sabría decir cual es el mínimo) Facebook nos mostrará igualmente la imagen marcada pero lo hará con un recorte cuadrado presentado a la izquierda del resumen de texto.



Demora en la actualización de datos


Otra cosa que no es relevante pero que también nos marea a veces un poco es que Facebook tiene algún tipo de demora en la actualización de estos datos y aunque lo hayamos hecho todo bien, podría mostrarnos temporalmente los datos marcados mal. Esto no lo he podido comprobar pero en algunos sitios he leído que hasta tres días y que incluso se actualizarán tras ese tiempo los datos de los posts ya publicados en Facebook con anterioridad. Esto último ya me suena un poco raro, pero es cuestión de comprobarlo.


Variante. Mostrar una imagen fija en portada


A algunos le puede interesar mostrar siempre una imagen fija con el logo del sitio o alguna imagen similar y para ello no hay más que incluir en la meta og:image directamente la dirección de esa imagen. Pero si lo que queremos es mostrar una cosa cuando se comparte la dirección de la página principal, páginas estáticas y de navegación, y otra en las entradas, entonces ya tenemos que echar mano de condiciones. Para Blogger sería así:

<!-- FACEBOOK -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='URL_IMAGE_PORTADA' property='og:image'/>
</b:if>
<meta expr:content='data:blog.metaDescription' property='og:description'/>


Comprobar que todo lo hicimos bien


Comenté antes que a veces hay una demora entre que nosotros marcamos y Facebook reacciona, por lo que ¿cómo podemos saber si los cambios introducidos en nuestra plantilla están correctos?

Pues para ello usaremos esta herramienta que es un sencillo depurador en el que introducimos una dirección y se nos indica con pelos y señales todas las marcas OpenGraph que Facebook leer en ella: Developers Object Debugger


Más información en Facebook: Sharing best practices (Ver apartado 4. Optimize your image sizes to generate great previews).

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

241 comentarios :

  1. Jo, genial. Muchas gracias, hacia tiempo que me traía loco este asunto. Voy a probar ;)

    ResponderEliminar
  2. Lo de las descripciones ya lo tenia hace tiempo. Tendré en cuenta el tamaño de las imágenes en mis siguientes entradas a ver que tal.
    Gracias

    ResponderEliminar
  3. Muy bueno, me vendrá bien cuando me vuelva a poner al día con el Blog, porque recuerdo que me molestaba compartir cosas y que apareciese una imagen del banner que no tiene nada que ver con el post.

    Ahora mismo estoy aprendiendo PHP, porque mi hermano hace música y quiere una web en la que se pueda ofrecer la descarga una vez se ha pagado por Paypal o tarjeta, etc.

    Oloman, ¿sabes si hay alguna forma de generar enlaces de descarga directa aleatorios que solo tengan un uso?
    Sería para que la gente no compartiese el enlace directamente. Aunque claro, igual lo podrían resubir, pero ya estaríamos hablando de piratillas.

    Gracias, tanto por este post como por tu posible respuesta.

    ResponderEliminar
    Respuestas
    1. No Klaus, no te puedo ayudar mucho con eso, pero como algoritmo sencillo se me ocurre que podrías generar el número al azar y al facilitarlo al comprador, guardarlo tú en una base de datos. Una vez que alguien lo usara una primera vez, ese número lo borras también en tu base de datos y así no lo usa nadie más. El problema es si el comprador lo pierde o algo así, porque habría que buscar la forma de poderlo recuperar.

      Eliminar
  4. Ami me sale cada imágenes que publicó cada entrada pero otras veces no .. voy a. Probarlo a ver que tal anda..

    ResponderEliminar
  5. tengo un problema con la imagen, cuando pongo el codigo la imagen de facebook se pone del tamaño 140x200 y para compartir de facebook se necesita por lo menos 200x200. Se podra hacer algo? me gustaria utilizar la imagen en tamano completo, se podra?.

    ResponderEliminar
    Respuestas
    1. Braulio ¿dónde y como pones ese código de imagen que dices?

      Eliminar
  6. Amigo Oloman, no pierdes jamás la esencia de tus explicaciones. Gracias por compartir con nosotros tu conocimiento. Saludos en la distancia. -José

    ResponderEliminar
  7. Muy buena noche! buena explicacion!
    amigo, estaba viendo este blog, y noté algo que cuando se comparte una imagen a algun grupo de fb esta sale diferente, y me gusta ese estilo. y queria preguntarte si esta página usa algun tipo de plugin para que salga asi, haz la prueba para verlo tu mismo el compartido en algun grupo de fb. http://www.imagenesgratis.com/imagen/3476 y quiero saber si ese tipo de plugin o lo que use se puede implementar a blogspot

    ResponderEliminar
    Respuestas
    1. He probado a compartir ese post que pones de ejemplo en un perfil personal, en una página y en un grupo, y en todos los casos me ha salido igual. No sé qué diferencia notas. Mándame un par de capturas para comparar.

      Eliminar
  8. Una pena no tener la solución para wordpress.org pero queda apuntado para blogspot. Gracias.

    ResponderEliminar
  9. Hola!, muchas gracias, me ha resuelto lo de la imagen.

    El caso es que el texto que aparece sigue sin ser el de la entrada, aparece el de un comentario que postearon.

    En mi cuadro de edición de entradas no aparece la sección "descripción de búsqueda". Aparece otra distinta, "Etiquetas de robots personalizadas".

    ResponderEliminar
    Respuestas
    1. Creo que eso no puede ser Anam. Te tiene que salir lo que ves en la captura al final del punto 1 de esta entrada y allí verás esa descripción para grabar.

      Eliminar
    2. Quizás los que hemos empezado hace poco tengamos asignada una versión diferente de la interfaz de edición. Si encuentro solución la pondré por aquí.

      Eliminar
    3. Yo creo que no Anam y pienso que todos tenemos la misma interface.

      Eliminar
    4. ¡Hola!, ya sé cómo hacer que aparezca el cuadro para escribir la descripción dentro de cada entrada.

      Vamos a la sección de Configuración del blog, en ella Preferencias para motores de búsqueda, en el apartado Descripción pulsamos Editar y seleccionamos "sí" en Habilitar descripción para búsquedas y guardamos (aparece un cuadro que yo dejo en blanco porque es para el blog en general), entramos en la edición de cada post individual y ya aparece el cuadro de descripción.

      Eliminar
    5. Acabo de ver que lo habías dicho en otro sitio. Yo lo he deducido al ir aprendiendo más sobre metaetiquetas y bichear por la opción para motores de búsqueda, cuando se es principiante no se repara mucho en eso. Espero que esta duda vaya desapareciendo de la red, mucha gente tiene ese problema y está probando toda clase de fórmulas en la plantilla.

      Eliminar
    6. OK. Gracias por escribirlo.
      Es que a veces me cuesta adivinar qué es lo que puede estar fallando. Eso lo tengo activado desde hace años y una vez hecho no se suele tocar, así que no me acordé siquiera de que existía esa opción.

      Eliminar
  10. Gracias Oloman, la única solución que me ha funcionado 100% es la que explicas en este post. Ya tenía añadidas a la plantilla las metas de Facebook pero aún así seguía apareciendo mi foto de perfil de autor de Google al compartir una entrada de mi blog con el boton de Facebook.

    Al colocar la imagen del post con la medida que recomiendas aquí se solucionó enseguida, lo confirmé con la herramienta Debugger. El ancho de la imagen excedía un poco el espacio de la entrada pero lo ajuste con width y height.

    No funciona si la imagen es pequeña y uno le ajusta el width y height a 600x315

    Hice la prueba en una plantilla nueva, active en Diseño - Entradas del blog - Editar - Mostrar el perfil del autor debajo de la entrada

    Y al compartir una entrada con el botón de Facebook aparecía la imagen del autor del blog y no la imagen de la entrada. Captura)

    Y el enlace de la imagen termina siempre en s512-c/photo.jpg (Ejemplo) El tamaño de la imagen es 512x512

    A veces el botón de Google se antoja y hace lo mismo. Desconozco si existe alguna forma de evitar que esa imagen especifica sea cargada por los botones compartir de Facebook y Google.

    ResponderEliminar
    Respuestas
    1. Me perdí Roudy... Dices al principio que te funcionó al 100%, pero al final de tu texto parece que me preguntas por un sistema para evitar que se cargue el avatar. No sé a qué atenerme, pero seguro que el sistema aquí explicado, cumpliendo todos los requisitos, soluciona el problema de que se muestre el avatar.

      Eliminar
    2. Perdón. Voy contestando comentarios masivamente y pensaba que estábamos en esta otra entrada. En ella se explica cómo solucionar el mismo problema para Google Plus y por extensión, para Facebook.

      Eliminar
    3. Gracias Oloman, con la información de este post y el enlace que me pasas del comentario 11.2 me ha quedado claro el tema al compartir las imágenes. Ya lo he solucionado en ambas redes y realmente funciona con la imagen de 600x315

      Eliminar
  11. No se si te ha llegado mi anterior comentario, te lo resumo y además he pinchado ahora lo de la notificación si me respondes. Mi problema es que al publicar desde blogger una entrada (desde la barra donde puedes compartir por twitter, facebook, google+ etc) me deja elegir imagen pero el texto es siempre el mismo, uno que tengo a pie de pagina del blog, y no se publica el inicio de la entrada que comparto, estoy desesperado. no se si puedes visitar mi facebook para que veas lo que intento explicarte. Gracias.
    https://www.facebook.com/pages/Rompecabezas/601354689921504

    ResponderEliminar
    Respuestas
    1. Hola. Eso que debería salir ahí es la descripción de cada post. Utiliza esa palabra ("descripción") en el buscador de la izquierda y verás artículos más apropiados sobre el tema. Allí verás cómo configurar eso, pero sobre todo fíjate en el de fecha más reciente.

      Eliminar
  12. Me gusta tu explicación, pero lo he intentado y en blogger a mi no me aparece lo de descripción de búsqueda, y comparto un post en facebook y me sale otra foto

    ResponderEliminar
    Respuestas
    1. Silvia, la descripción de búsqueda es sólo para el texto, no para la imagen. No obstante, para que te salga en el editor de entradas previamente tienes que ir a Configuración > Preferencias para motores de búsqueda > Etiquetas Meta > Descripción > Editar > ¿Habilitar descripción para búsquedas? > Si

      Eliminar
  13. Muy buena info, tengo un problema y creo que un amigo de arriba también. Cada que se comparte una entrada en facebook siempre sale es el titulo del blog y no del a entrada igualmente la descripción siempre es la misma no se si puedes dar algún tip o algo así para que al compartir salga sea el titulo de la entrada en que se este

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola. Echa un vistazo a tus META. Aquí tienes una pequeña guía para ello.

      Eliminar
  14. Buena noche Oloman. Desde hace un tiempo la imagen que sale al compartir en Facebook se ve con muy baja resolución, pese a que la original, que está en mi blog, sea mucho más grande. ¿Cómo lo soluciono? Un saludo http://cinemacortos.blogspot.com

    ResponderEliminar
    Respuestas
    1. Por lo que yo vi, usas la miniatura de 72px para la etiqueta META property='og:image', que es la que marca la imagen para Facebook. Con 72px no te podrá salir nunca bien, así que usa la META que yo propongo con la variable data:blog.postImageUrl

      Eliminar
  15. Hola Oloman. Le comento que yo uso wordpress y quiero crear un boton similar al que figura en ésta entrada: http://www.lindito.com/nuevo-bebe/ . (similar al boton gigante que dice "compartir en facebook". He tratado de implementarlo con el código que usted expone aqui pero no logro conseguirlo. ¿usted podria decirme como hacerlo? muchas gracias. saludos!

    ResponderEliminar
  16. Hola. No sé si te refieres a la estética o a la funcionalidad, pero como lo segundo es lo más complicado, te remito a esta entrada.

    Sólo tendrás que eliminar el código HTML de los códigos que no necesitas y luego cambiar el aspecto del botón modificando el CSS.

    ResponderEliminar
  17. Hola Oloman, Implementé los cambios que expones en el html de mi blog, y conseguí que apareciese una descripción de mis entradas (antes no aparecía), pero las imágenes salen varias a escoger, algunas de ellas de la barra lateral de mi blog, y otra la de la portada.
    Solo sale en última opción la del post en cuestión.
    Si solo compartiese yo mis entradas no me importaría, puesto que escogería la imagen del post relacionada, pero por defecto a no ser que la escojas me sale una de la barra lateral.

    Probé en la herramienta debugger de facebook y me sale este aviso:

    og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook. Image 'http://4.bp.blogspot.com/-rzfdJd5PHCE/VH-bpjt0gvI/AAAAAAAAC1A/OAM-qBuEO9s/s1600/weird.jpg' will be used instead.

    Siendo la imagen enlazada la de la barra lateral de mi blog.
    Mejor te dejo una captura de pantalla:

    http://oi57.tinypic.com/2cynn8.jpg

    ¿cómo lo podría subsanar?

    ResponderEliminar
  18. Me olvidaba, tambiém me pone esto en la página de debugger de facebook:

    Like Button Warnings That Should Be Fixed
    Admins And App ID Missing fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high click-through rate.
    Like Button Tag Missing og:type is missing. The og:type meta tag is necessary for Facebook to render a News Feed story that generates a high click-through rate.

    ResponderEliminar
    Respuestas
    1. Hola Chitauri.
      Si compruebas, con el segundo post que tienes ahora mismo (11 memes) todo te sale bien. El problema del más reciente (solipsismo) es que la imagen tiene un tamaño original de sólo 188x256px y si leiste la explicación de esta entrada, ya sabrás que es un tamaño demasiado pequeño para Facebook (y para G+).
      Sólo cambia esa imagen por otra más grande y verás que todo va bien.
      Si no te va de inmediato, comprueba este asunto en tu próximo post porque Facebook tiene como "memoria" con eso de las imágenes y otros datos.

      Eliminar
  19. Respuestas
    1. Pues yo sigo viendo la misma imagen del mismo tamaño, pero si dices que ya te funciona...

      Eliminar
  20. Gracias, muchas gracias. Muy agradecido, muy agradecido y muy agradecido.

    ResponderEliminar
  21. Hola! Gracias por el tema, estaba buscando ayuda sobre esto...
    Pero una pregunta: A mi no me sale la opcion descripcion, como lo muestras tu en esta captura:
    http://4.bp.blogspot.com/-m5LXISudY2c/U3k2G-70dTI/AAAAAAAAP6I/YdnfaJcPWPc/s200/configuracion+entrada.jpg

    porque? ..a la actualidad ya no existe esa opcion, sera?

    En lo personal hago mis imagenes de post de 650 x 500
    Esto porque hago imagenes con corel paintshop pro y ps. Entonces mi pregunta es, esto hara pesado con el tiempo mi blog?
    Aunque trato de poner siempre el leer mas, y no dejas las entradas enteras..
    Podrias aconsejarme en ello, es que mi bloggi es nuevo y cualquier consejo me viene bien, para evitar luego que mi blog este lento al abrirlo, no se si me explique bien. Gracias anticipadas.

    ResponderEliminar
    Respuestas
    1. Una cosa mas, es que entre tanta explicacion me enrrede un poco jajaja
      Mi pregunta es: Cual de todos los codigos es que debo tomar?
      Cual me recomiendas? Y.. Como no tengo la opcion de descripcion, que puedo hacer en esos casos?
      Habra otra opcion que haga la misma funcion?
      Espero ancionsa tus respuestas..
      Te dejo saber que yo he tomado el ultimo que dejaste, este: Variante. Mostrar una imagen fija en portada.
      En lo posible porfis, podrias dejarme saber si esta correcto ese o debo agregar algo mas..
      Ahora voy a ver si encuentro dicha etiqueta para agregar el codigo. :)
      Gracias!

      Eliminar
    2. ya lo hice pero la descripcion que me da no es la del post que acabo de compartir. Cada vez que comparto un enlace me toma la misma descripcon. Esta tomando una info que agregue en la siguiente ruta: Comfiguracion / Entradas y Comentarios / Mensaje del formulario de comentarios. Es decir, esta tomando parte de la info que tengo en Mensaje del formulario de comentarios. Ni siquiera toma la descripcion del blog! A la verdad no se...
      Como te dije, al publicar una entrada en mi blog, no me sale la funcion de descripcion en Configuración de las entradas, como muestra tu captura. Me salen todas las demas opciones que muestra tu captura, meno esa de descripcion.
      Ademas, cabe decir que las entradas que siempre trato de compartir en mi pagina de facebook, son entradas que tienen una imagen grande (650 x 500 o 400), y tienen mas de un parrafo de texto, asi que no entiendo porque no toma el texto del post que estoy compartiendo? Ademas que he utilizado esta herramienta para depurar la url de mi post: https://developers.facebook.com/tools/debug
      Y aun asi la descripcion la info de la entrada no sale.
      Agregue el ultimo codigo que dejaste, y lo puse justo encima de : skin
      Depure la url luego y aun asi nada! La imagen se muestra bien, corectamente y en tamano grande como explicas pero la descripcion que da es la que tengo agregada en Mensaje del formulario de comentarios, y no la del post que comparto!
      Uuufffhhh Estoy que rebiento! Porfis ayudame!
      Como lo puedo solucuinar?

      Eliminar
    3. Wow! ceo que ya lo resolvi! Tenia que activar las meta-descripcion en Configuración › Preferencias de búsqueda › Descripción
      Ahora si me sale esa funcion. Aun no se aclara la descipcion de los post que he compartido pero espero que esto pueda resolver en los futuros enlaces que compartan salgan correctamente..
      Perdon por tanto.. Creo que esto lo solucione, aunque como digo aun no me sale la descripcion que agregaue.. :)

      Eliminar
    4. Jajaja... :) Tardé tanto en contestarte que tú solo te liaste y te desliaste.
      Por las vueltas que seguro le diste, esto es algo que seguro que ya no se te va a olvidar ;)

      Eliminar
  22. Acabo de introducir el código en mi blog y todavía no funciona... esperaré unos días :D
    La verdad es que me estaba empezando a agobiar con el tema.. uff. Ahora revisaré también el tamaño de las fotos. Muchísimas gracias!!
    He compartido este post en mi facebook, porque es muy práctico e interesante.
    Saludos desde www.miplanetachic.blogspot.com

    ResponderEliminar
    Respuestas
    1. Funcionará con las entradas nuevas que publiques, sobre todo en Facebook, que parece que tiene como "memoria".

      Eliminar
  23. Hola Oloman,
    Enhorabuena por el blog, es genial. Me funciona todo perfectamente pero me gustaría saber como puedo hacer que las páginas también cojan la imagen que tienen publicada dentro de ellas y no la de la página principal. Gracias.

    ResponderEliminar
    Respuestas
    1. Pues en un principio lo mismo, Veintisietegrados. No hay diferencia, pero mira el comentario 23.1 por si fuera eso lo que te ocurre.

      Eliminar
    2. "Pero si lo que queremos es mostrar una cosa cuando se comparte la dirección de la página principal, PÁGINAS ESTÁTICAS y de navegación, y otra en las entradas, entonces ya tenemos que echar mano de condiciones".

      Me refiero a este apartado. Leyendo esto entiendo que la imagen que designemos a la página principal también será para las páginas estáticas. Independientemente que estas últimas tengan su propia imagen.

      ¿Puedo hacer que las páginas estáticas en Facebook funcionen igual que las entradas? Osea, que al publicar cojan la imagen por defecto de cada página?

      Gracias otra vez.

      Eliminar
    3. Para eso sólo necesitas poner (si tienes Blogger) el segundo trozo de código de la entrada. Ese tercero que comentas es sólo para el caso de querer poner en Facebook siempre la misma imagen... una imagen fija, no la que lleve cada entrada o página estática.

      Eliminar
    4. Lo he intentado, pero poniendo el segundo código de esta entrada al publicar post me va perfecto, pero al publicar las páginas estática no me coge la imagen de la página estática sino una imagen cualquiera.

      Eliminar
    5. ¿En cual de tus blogs te pasa eso que intente verlo?

      Eliminar
    6. Aqui: http://veintisiete-grados.blogspot.com.es

      Gracias.

      Eliminar
    7. Ahora mismo lo que tienes en las páginas estáticas es esta imagen: https://dl.dropboxusercontent.com/u/102556361/%23LasCalmas2015/dise%C3%B1o-web/homepage-image.jpg

      El problema es que Facebook tiene memoria y te guarda la imagen que había programada la primera vez que se compartió en esa red.

      Para actualizarla (que es lo que he hecho yo con la página del "recorrido"), vas a esta herramienta https://developers.facebook.com/tools/debug/og/object/ pones la dirección a actualizar y luego pinchas en el botón de la derecha de los dos que hay. Luego en el izquierdo podrás ver cómo ha quedado.

      Eliminar
    8. Te comento lo que he hecho:
      1) Cambié nuevamente el código número 3 de este post por el número 2.
      2) Guardé los cambios.
      3) Copié la dirección de la página de "recorrido" y la pegué en la página de developers de Facebook.
      4) Le dí al botón de la derecha y luego al de la izquierda.

      Y lo que me hizo fue eliminar la imagen que tenía por defecto para las páginas pero se colocó otra imagen, concretamente la de un banner azul que hay en la homepage.

      Si dejo el código 3 de este post, siempre me pondrá por defecto esa imagen que me pasaste el link.

      ¿Qué puedo estar haciendo mal?

      Eliminar
    9. Depende de lo que quieras, porque ya me estoy perdiendo (no sólo comento contigo). Ahora mismo vuelves a tener en esa página esta imagen https://dl.dropboxusercontent.com/u/102556361/%23LasCalmas2015/dise%C3%B1o-web/homepage-image.jpg que no aparece en el post, por lo que entiendo que algo pusiste para que saliera fija esa, pero desde aquí sólo veo el código ya interpretado (no las variables, no las condiciones que pudiera haber).
      Para que en páginas estáticas muestre otra cosa distinta de la primera imagen que allí encuentre (en los posts parece que no tienes problemas), habría que hacer algo así:
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <meta content='URL_IMAGEN_FIJA_ESTATICAS' property='og:image'/>
      <b:else>
      <meta expr:content='data:blog.postImageUrl' property='og:image'/>
      </b:if>

      Eliminar
    10. Perdona Oloman, porque creo que te estoy haciendo un lío yo. El resumen de todo es que quiero que al publicar en Facebook salga la primera imagen que hay puesta en las páginas estáticas, no quiero que salga ni una imagen por defecto, ni la imagen que quiera coger Facebook (en las entradas me va perfecto).

      Ahora mismo tengo puesto este código:

      meta content='https://dl.dropboxusercontent.com/u/102556361/%23LasCalmas2015/dise%C3%B1o-web/homepage-image.jpg' property='og:image'/>

      Y quiero cambiarlo por algún código que me coja la primera imagen que tiene puesta la página.

      Perdona por las molestias.

      Eliminar
    11. Pues entonces olvida todo lo que hemos hablado y usa el segundo trozo de código del post. Eso te coge la primera imagen de cada entrada... o página. Si no es así es por lo que te enseñé de la "memoria" o bien por que usas una imagen demasiado pequeña como explico en el post.

      Eliminar
    12. Vale, pondré el segundo código que explicas en este post y probaré cambiando el tamaño de las imágenes.
      Gracias ;)

      Eliminar
    13. He cambiado el tamaño de las imágenes de las páginas a 800x433 y ya se publican perfectamente en Facebook. Parece ser que 600x315 era muy poco. Espero que a alguien le pueda ayudar, gracias por todo Oloman :)

      Eliminar
    14. Era la cifra mínima, pero en el post decía que "lo óptimo sería superar los 600px". Personalmente uso el tamaño "extra grande" de Blogger, el de 640px.

      Eliminar
  24. Hola, quiero iniciar un blog, aún no tengo nada, sólo un demo para ver si me pueden ayudar. En vez de que salga el vídeo me gustaría que saliera una imagen (que no estuviera visible dentro de la entrada) y que esa misma imagen sea la que salga al compartir. Gracias.
    http://frucot.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Para eso puedes probar a poner esta META, pero en cada entrada. Evidentemente no se puede automatizar si no pones la imagen a mano.
      <meta content="URL_IMAGEN" property="og:image"/>

      Eliminar
  25. Hola!! No soy ningún lumbreras de la informática y me sucede lo siguiente: tengo un blog, y al publicar el enlace en Facebook, me aparecen fotografías que ya he borrado y al mismo tiempo, no me aparecen algunas nuevas ( mi idea es cada vez que publico el enlace, que aparezca la imagen de ese post...y no veo manera). No se si es que no Facebook no se actualiza, o no se que pasa. Muchas gracias por tu tiempo por adelantado, y buen trabajo!!

    ResponderEliminar
    Respuestas
    1. Hola seguramente te pase lo que yo llamo "efecto memoria" de Facebook. La respuesta en 24.7 creo que te va a venir bien a tí también ;)

      Eliminar
  26. Hola oloman, hasta hace poco he sido un bloggero, he aprendido muchas cosas en internet y decidí entrar al mundo del host, php y todo lo que incluye, pero aun no me queda claro todo el tema de redes sociales.. lo que pasa es que cuando comparto el link de la página en la fanpage de face me sale algo como esto: http://prntscr.com/5rzasx y bueno no se como hacerle para que salga la imágen >.> pues ya he colocado meta content="URL_IMAGEN" property="og:image"/ (no me deja poner etiquetas en la caja de comentarios por eso lo puse incompleto) pero aun no veo ningun cambio. Esperare unos dias porque quizá sea ese "efecto memoria" que dices.

    ResponderEliminar
  27. Hola Juan. Espero que no estés poniendo literalmente URL_IMAGEN sino la URL de una imagen ;)
    En cualquier caso lo mejor es que utilices el código que explico en segundo lugar en esta entrada y uses imágenes grandes.

    ResponderEliminar
  28. Buenas tardes,

    Por mas que lo intento no entiendo nada y no me sale nada.

    Gracias.

    ResponderEliminar
    Respuestas
    1. Evidentemente una cosa es causa de la otra. Sólo puedo indicarte que lo leas todo de nuevo detenidamente y si tienes una duda concreta pues intento resolverla, porque en un comentario como este no podría explicarlo todo otra vez con mayor detalle que en la entrada.

      Eliminar
  29. Hola. La verdad es que todo ese lenguaje y signos son muy difíciles para lo que no tenemos ni idea de todo esto. ¿Podrías hacer una demostración gráfica haciendo un video o algo así? ¡SERÍA FANTÁSTICO! Muchísimas gracias.

    ResponderEliminar
    Respuestas
    1. Quizás sí que lo sería Lumen, pero no dispongo de tiempo ni de otros medios técnicos para hacerlo. No obstante si intentas hacerlo siguiendo las instrucciones que voy dando, paso a paso, apostaría a que sí eres capaz de hacer casi todo lo que planteo ;)

      Eliminar
  30. Hola amigo a ver si me ayudas, intenté hacer esto, pero ahora cada vez q comparto no para de salirme esto:
    ( Cómo conseguir que al compartir un enlace de tu web o blog, Facebook muestre los datos sobre título, imagen y resumen de texto que tú desees)

    cada vez q comparto me sale eso, ya copié de todas las maneras y no logro que quede

    ResponderEliminar
    Respuestas
    1. Jajaja... (perdón por las risas). Eso es porque copiaste literalmente lo que yo puse en el primer trozo de código y como ahí explico, lo mejor es usar el segundo para que no salga siempre lo mismo. Eso o personalizar ese texto con el tuyo propio.

      Eliminar
  31. Anónimo8/2/15, 2:40

    Hola oloman, quiero decirte que me encanta tu blog! simplemente UTIL ademas divertido de leer, segui todas tus instrucciones, sin embargo esto no hizo ninguna diferencia, al momento de compartir un post en facebook, me seguia apareciendo simplemente la informacion de mi blog y no la del post que compartia, buscando y quemandome la cabeza he encontrado la super SOLUCION, para que al publicar todos y cada uno de los post y compartirlos salga exactamente el titulo, descripcion e imagen correspondiente, solo debia agregar el plugin de Facebbok debajo de body en mi plantilla, despues de esto no tuve que preocuparme de nada mas; Si alguien mas tiene este problema esa es lo solucion. POR FA dime como haces para que la seccion de comentarios en tu blog sea tan espectacular, estoy sufriendo con eso, te lo agradecia un montonon.

    ResponderEliminar
  32. Bien Fresita. Gracias por comentarlo.

    Con respecto a la otra pregunta, mira aquí.

    ResponderEliminar
  33. La publicacion de la miniatura de la imagen que aparece como compartir enlace ¿puede vulnerar los derechos de autor del propietario de la imagen?
    YO en mis páginas tengo fotos mias y otras compradas, pero las compradas estan restringidas al uso en página de facebook, twitter..etc o sea de redes sociales.

    ResponderEliminar
    Respuestas
    1. Ufff! No tengo ni idea. Eso habría que preguntárselo a algún experto en leyes. Y ese no es mi caso.

      Eliminar
  34. Hola administro una web en joomla y tengo este problema me carga la misma imagen siempre como puedo utilizar tu codigo dentro de joomla porque probe con todos los plugins que encontre y el problema persiste desde ya gracias

    ResponderEliminar
    Respuestas
    1. Hola. En un principio sería igual, pero claro, lo que en Blogger son variables DATA habría que sustituirlas por las correspondientes de Joomla. El problema es que yo no estoy familiarizado con esa plataforma y no te sabría decir.

      Eliminar
  35. Hola Oloman, antes de nada agradecerte por tu post. Me solucionaste una duda que traia hacia tiempo y por fin puedo compartir en face desde miblog escogiendo la imagen y con descripción. Lo que me gustaria ahora es saber como le hago en el caso de un video, ya sea de you tube o vimeo porque al intentar compartir la entrada no me carga el video sino la imagen que facebook escoge. gracias de antemano

    ResponderEliminar
    Respuestas
    1. La única manera que se me ocurre sería añadiendo a la propia entrada una META con la dirección de la miniatura que proporciona YouTube. Sería algo así:
      <meta content='http://img.youtube.com/vi/B23HcnIMKN0/1.jpg' property='og:image'/>
      Siendo B23HcnIMKN0 la ID del vídeo publicado.

      Eliminar
  36. Hola, me aclaro algo, pero aun no puedo solucionar el problema de la imagen para el enlace, cuando publico el link en facebook me salen las imagenes que vinieron en el slider, porfavor me puedes ayudar? de ante mano gracias.

    ResponderEliminar
    Respuestas
    1. Hola Benjamín. Echa un vistazo a lo que comenté en 24.7. Si después de eso no te funciona, ya me tendrías que concretar cómo te puedo ayudar.

      Eliminar
  37. Hola Oloman.
    Sigo tu web desde hace tiempo y aunque no uso blogger, soy mas de complicarme la vida y programar yo mismo mis blogs y páginas :P, tus consejos me vienen genial para mis proyectos. Este tuto me ha venido de perlas!
    Gracias :)

    ResponderEliminar
    Respuestas
    1. Es que no sólo de Blogger vive el hombre :)

      Y además casi todas las cosas de Blogger se pueden exportar a cualquier otro tipo de web... y lo mismo a la inversa.

      Eliminar
  38. Como puedo hacer si quiero que al compartir una entrada, la miniatura sea diferente a la de portada.

    ResponderEliminar
    Respuestas
    1. Con todo lo que explico en esta entrada, si esta lleva una imagen te la debería sacar. Si te saca la de portada es o bien porque no tiene imagen el post o porque esta es muy pequeña.

      Eliminar
  39. Al fin lo he solucionado, gracias por tu ayuda con este post ;)

    ResponderEliminar
  40. Hola Oloman. Los enlaces de mi Blogger compartidos en facebook aparecen asi: La imagen (esta bien eso) Luego debajo EL TITULO DE MI BLOG : el titulo del post (Quiero eliminar el titulo de mi blog alli) y luego aparece LA DECRIPCION DE MI BLOG (quiero que aparezca la DESPCRIPCION del POST!). Puedo enviarte captura de pantalla por e-mail,si deseas. Como puedo modificarlo? Serias tan amable de explicarlo detalladamente, pues no manejo muchas herramientas de ese estilo, por favor? Saludos cordiales.

    ResponderEliminar
    Respuestas
    1. Echa un vistazo en este mismo post, al final del punto 1. Ahí está la clave, la "Descripción de búsqueda".

      Eliminar
  41. Hola Oloman, sigo tu bloc desde hace tiempo ya que es muy bueno.
    Desde hace muchas semanas, al compartir un enlace de mi sitio, en la ventana que se abre para compartir ya no me muestra la opción de escoger o cambiar la imagen (las flechitas a la izq-der), y ahora recientemente no me muestra ninguna imagen, solo el título y la descripción. Pero en Facebook si muestra la primera imagen que le coloque con el og:image
    Ya use todas las herramientas de depuración de Facebook y según ellos todo está bien.
    Pensé "¿será que actualizaron el plugin de compartir?", me fui a la documentación para desarrolladores, busque el plugin puse la url de una página de mi sitio y lo mismo, no muestra ninguna imagen (que son gigantes más de 2000px)
    Ya me rendí, ¿tendrás alguna sugerencia para esto?
    Que vuelva a mostrar imágenes y permita cambiar o seleccionarla, mil gracias.

    ResponderEliminar
    Respuestas
    1. Alexander, las pruebas tienes que hacerlas con esta página, pero pinchando en "Fetch new scrape information" para que Facebook actualice la información que tiene sobre cada URL de tu blog. De lo contrario puedes estar dando pasos buenos que el informe te de como malos... y viceversa.

      Eliminar
  42. Anónimo3/5/15, 8:20

    Oloman, molestando por este lado. Si pongo el meta que refieres en este post, se publican los post en Facebook o lo tengo que hacer a mano? Por otro lado en la Configuración de la entrada NO ESTÁ " Descripción de búsqueda" Disculpa y gracias.

    ResponderEliminar
    Respuestas
    1. No Stephanie, no se publica nada (automáticamente, entiendo). Esas META sólo sirven para que cuando se comparta un post, Facebook sepa que imagen, título, resumen, etc. tomar para sus resúmenes.

      Y sobre la Descripción de búsqueda, entre en el Escritorio Blogger > Preferencias para motores de búsqueda > Etiquetas META > Editar. Allí marca la casilla "Sí" de "¿Habilitar descripción para búsquedas? " y a partir de ese momento verás como te sale ;)

      Eliminar
    2. Anónimo9/5/15, 6:07

      Gracias por la ayuda y paciencia. Saludos ;)

      Eliminar
    3. Nuevamente molestando. Llegué y encontré "Preferencias para motores de búsqueda" pero después veo un montón de casilleros para llenar que están escritos en ARAMEO. Marco todo ALL? y en el casillero que dice " unavailable_after" se escribe algo? o con el ALL alcanza? :(

      Eliminar
    4. No sé ni dónde estarás mirando, pero si sigues exactamente la ruta que te dije en el comentario anterior, sólo hay un apartado que se llame ETIQUETAS META.

      Eliminar
    5. Estoy en el lugar que señalaste, y marqué la casilla de "Habilitar descripción para búsquedas" pero DEBAJO hay casilleros con una serie de sentencias entre ellas ALL y como no sabía que marcar las puse todas ALL.

      Eliminar
    6. Me temo que no estás dónde debías. Quizás entraste por Entradas y no por el apartado de Configuración, porque me acabo de dar cuenta de que en la ruta me comí esa palabra:
      Escritorio > Configuración > Preferencias para motores de búsqueda > Etiquetas META > Editar, etc.

      Eliminar
  43. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Tienen que tener un tamaño mínimo, Andy. En el post detallo esas medidas.

      Por otra parte, no sé si sabes que tienes una publicidad invasiva que te abre páginas nuevas con ella cuando entras en tu blog :)

      Eliminar
    2. yo entiendo lo del tamaño minimo, pero desde hace dias yo publico y cuando comparto en google salen bien salen una imagen grande, el titulo dela entrada y un texto; pero ahora sale una foto super pequeña, el titulo y ya, ni siquiera se logra casi identificar que tiene una foto, en cuanto a la publicidad, no me habia dado cuenta, como la quito?

      Eliminar
    3. por ejemplo, si usted entra a mi blog y intenta compartir una de mis publicaciones como la de "cartagena de indias" y luego intente compartir la publicación de la entrada "plaza de la paz" y notara la diferencia

      Eliminar
    4. En G+, con ambas entradas me sale una imagen grande Andys. No aprecio diferencia.

      Sobre lo de la publi, ahora no me sale. Quizás tenga una cookie para que sólo salga una vez y por eso tú tampoco la percibes. El problema es que no recuerdo ahora en qué enlace me saltó y cómo.

      Eliminar
  44. Holaa!.HELP!!!!!...todas tus indicaciones me ayudaron a hacer el blog de nuestra asociación. El unico problema es que hay tan poco tiempo para escribir que estoy buscando alguna plantilla de blogger que haga como facebook cuando compartimos un enlace: al poner en el post una url, extraiga una imagen, el título y los primeros párrafos....Es una pena que tenga a nuestro blog abandonado pero es por falta de tiempo...Si esto existe podremos compartir mucha info.....aqui va el blog que ayudaste a construir!!!!. GRAAACIAS!...www.esperanzaparaelautismo.blogspot.com

    ResponderEliminar
    Respuestas
    1. No hay ninguna plantilla que haga eso Mamadealess. Un blog es una cosa y una red social otras.
      Si entendí bien lo que pretendes, quizás podrías incrustar en el blog cosas que previamente hayas compartido en Faceebook. Eso se hace de esta manera

      Eliminar
    2. Mil graciaas!. me lo imaginaba......Voy a probar desde FB como dices!. Gracias otra vez!!!!!.....

      Eliminar
  45. Hola, me gustaría saber cómo hacer para que al compartir una entrada en Facebook, me salga el título de la misma y su descripción (tengo activada descripción de búsqueda ya). El blog es www.bebiendoversos.com. Gracias. Un saludo

    ResponderEliminar
    Respuestas
    1. Tendrías que hacer lo que expliqué en el apartado 1 de esta misma entrada.

      Eliminar
  46. Quiero poner una imagen para cuando comparta mi blog....
    Osea solo una imagen para cuando comparta el inicio de mi blog

    ResponderEliminar
    Respuestas
    1. Tengo que sospechar que no has leído siquiera la entrada, porque hay un título destacado que dice "Variante. Mostrar una imagen fija en portada" y que a continuación muestra cómo hacer eso.

      Eliminar
  47. Hola, Queria saber como pudo poner una imagen a la pagina principal, Osea que cuando comparta mi pagina aparezca una imagen & no la que están al rededor.

    ResponderEliminar
  48. Hola Oloman, te hago una consulta ya que quise colocar el código con condicional y no me funcionó, simplemente siempre se compartía todo con la misma imágen, ahora no coloqué ningún meta y por ejemplo si comparto el post: http://msexcelacademy.blogspot.com.ar/2015/06/toda-mi-vida-utilice-microsoft-excel-en.html se comparte como yo deseo con el thumb de la primer imágen, ahora en este post: http://msexcelacademy.blogspot.com.ar/2015/06/rango-dinamico.html no hay forma de elegir una imagen adecuada. Además en el primero la imagen sale pequeña a la izquierda y en el otro grande y centrada. Como puedo solucionarlo o hacer funcionar el código condicional? Gracias por tu tiempo!

    ResponderEliminar
    Respuestas
    1. Hola Damián. He contrastado la información que sale en esta herramienta y en un principio sale bien. No obstante, las imágenes son de sólo 320px de ancho y si relees el post verás que para que no falle esto nunca, la medida tiene que ser de al menos 600px. Echa un vistazo al punto dos de esta entrada ;)

      Eliminar
  49. Hola! tengo puestos los metatags y todo eso pero me encuentro con que siempre me comparte la imagen pequeña como si fuera de 320. Las imagenes que uso en mis posts son de 1000x523, mas que suficiente para no tener problemas. De hecho no tenia problemas hasta hace poco.

    Revisando el codigo html del post me encontre que las imagenes las pone con links a ciertas carpetas: s1600 para el enlace y s320 para el source. Eso es un error estupido que esta haciendo blogger.


    fijate que el src, lo saca de la carpeta /s320/ como si creara thumbnails de 320 para todas las imagenes. Si reemplazo /s320/ por lo que esta mas arriba /s1600/ el error se soluciona al compartir en face. En el post no cambia nada, ya que igualmente le dice que muestre la imagen con width="320".
    Pero cambiar cada vez el codigo html es una putada. No hay forma de decirle a blogger que deje de hacer estupideces?

    Tu blog es lo mas. Gracias.
    Si queres chusmear mi blog, es http://doctorwhoenlinea.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Leonardo
      La cosa es que no es lo mismo tener una imagen de 320px (s320) que tener una de 1600 (s1600) y luego forzar su tamaño con HTML añadiéndole width="320".

      En el segundo cargas una imagen muy grande (más peso, más tiempo) innecesariamente, porque luego la muestras en calidad 320px. En ese sentido Blogger no se equivoca porque usa el recurso menos pesado para el tamaño que le marcas.

      Ahora bien, para que se vea en Facebook a tamaño grande, como expliqué por ahí arriba, la imagen subida deberá ser al menos de 512px (yo recomiendo 600px), pero es que además no deberías reducirla después marcando "Pequeña" o "Mediana".

      Por favor echa un vistazo a este otro post dónde desarrollo esto último de manera más extensa, especialmente en los apartados "La solución" y "Ajustes".

      Eliminar
  50. no, ojo, yo solo veo el html que el blog crea automaticamente al añadir la imagen. Está generando ese error que comente antes, solito. tengo otros posts anteriores donde los enlaces estan bien. El tamaño de las imagenes está bien (son grandes aunque su peso es reducido). El 320 lo pone solo al decirle en que tamaño queremos que se muestre en el post. Hoy voy a estar creando otro post, vere si se soluciono. Y voy a chusmear ese post.

    ResponderEliminar
    Respuestas
    1. Acabo de ver tu última publicación (Torchwood 02: Day One) y ahora sí sale bien. Una imagen de 1000px, pero redimensionada mediante HTML a solo 320px para que se vea más pequeña en el post.
      1000px quizás es demasiado peso. Si no te es necesario para otra cosa con 640px tienes suficiente.

      Eliminar
  51. nah, las imagenes pesan 80 kb como mucho, simplemente me pasa que el blogger hace esa particularidad que te comente, que antes no hacía. Te pegaría el codigo html para tengas mejor idea de lo que hablo, pero esta ventana de comentarios me lo bloquea...

    ResponderEliminar
  52. a ver, intento así. cuando pongo una imagen, me agrega un div, con el link: "a href="http://blablacodigolargoblah/s1600/imagen.jpg" "img height="167" src="http://blablacodigolargobla/s320/imagen.jpg width="320" /" . La direccion del src esta mal, antes me sacaba ambas imagenes de la misma carpeta: donde dice s1600 en una y s320 en otro, antes decia s1600 en ambas lineas. Me explico? yo lo corrijo cambiando ese detalle, pero es una molestia. y antes no lo hacia.

    ResponderEliminar
    Respuestas
    1. Leonardo, no sé qué rutina sigues para subir las imágenes, pero lo más cómodo es hacerlo desde la pestaña del editor "Redactar" y marcando en ese momento tamaño "Extra grande". De esa manera el link seguirá siendo s1600 y la imagen a mostrar de 640px. Ese tamaño es suficiente para lo que se explica en este post.

      Si luego quieres que se vean más pequeñas, entonces no tienes más remedio que desde la pestaña HTML, añadir un width="320" a la imagen para forzar el redimensionado aparente. No hay otra manera de que todo cuadre si usas imágenes pequeñas en tu blog.

      Eliminar
  53. hola! te molesto nuevamente, necesito estas correcciones meta, pero en lugar de para los posts, lo necesito para las paginas creadas en blogger. Se puede hacer?

    ResponderEliminar
    Respuestas
    1. Sí, claro. Es cuestión de usar la condición oportuna. En lugar de:
      <b:if cond='data:blog.pageType == "quot;item"quot;'>
      ...deberías usar:
      <b:if cond='data:blog.pageType == "quot;static_page"quot;'>

      Tengo un post por ahí con el tema de las condiciones si necesitas más información.

      Ah y para incluir código en los comentarios, pásalo antes por esta herramienta.

      Eliminar
  54. Muy buen post! Hice todas las modificaciones y aún así el Debugger me sigue trayendo este error: "og:image could not be downloaded or is too small".
    Incluso, Fcbk. sigue utilizando una imagen que ya eliminé de mi blog.
    Esta otra herramienta parece leerlo bien... https://coveloping.com/tools/open-graph-tag-tester
    Seguramente es algo temporal.... Seguiré insistiendo.
    Muchas gracias por toda esta info. :-)

    ResponderEliminar
    Respuestas
    1. Ivon y Leonardo. Facebook tiene "memoria" para las marcas open-graph. Para que las actualice cuando realicéis cambios en ellas tenéis que pinchar en el botón de la derecha, el que reza "Fetch new scrape information". En 30 segundos tras el cambio en vuestro blog, ya lo actualiza. Como mucho dos pinchazos...

      Eliminar
  55. a veces al debugger le tenes que dar como 20 veces para que tome el cambio. Debe ser algo de cache.

    ResponderEliminar
  56. Muchas Gracias, por tu ayuda, mi problema es que al postear a facebook no aparece imagen, la verdad que he probado varias cosas y no hay caso, ¿tienes idea que pueda ser?. Saludos

    ResponderEliminar
    Respuestas
    1. Hola. Sólo puede ser lo que explico aquí ¿entre esas varias cosas probaste este sistema? Es infalible con seguridad.
      Caso de que no te funcione la única explicación posible es que tengas más cosas en la plantilla del mismo tipo que te hayas dejado por ahí olvidadas y que estén interfiriendo con las que pongas en el HEAD.

      Eliminar
  57. Solo soy yo, o ya no aparece la opción para escribir la descripción de búsqueda al crear un entrada?

    ResponderEliminar
    Respuestas
    1. Sigue existiendo Wallpapers, pero previamente la tienes que habilitar desde el mismo lugar en el que incluyes la descripción general del blog.

      Eliminar
  58. GRACIAS!!!! No sabes las vueltas que he dado para que me saliese la imagen porque no sé que habíamos tocado que no salían.

    ResponderEliminar
  59. Hola tengo un problemón!!! Puse el código y funcionó pero después tuve que restablecer una copia de seguridad anterior. El caso es que cuando la hice era anterior a haber metido el código pero funcionaba perfectamente. Y ayer de repente dejó de verse la imagen. Metí el código como la otra vez y no funciona. No me sale ninguna imagen, no sale el título de la página ni el título del post. Lo único que se ve es blogger free weblog publishing tool from Google, for sharint text, photos and video. Sin embargo hay dos (de 10) post que sí que sale bien la imagen y el texto, no entiendo nada. No sé si sabes que puede pasar

    ResponderEliminar
    Respuestas
    1. Funciona bien, Meloapunto (aquí la prueba). Es posible que por el "efecto memoria" que expliqué en algunos comentarios anteriores, Facebook tenga para algunos posts la información actualizada. Sólo eso.

      Eliminar
  60. Hola muy buen post felicitaciones! de lo mejor que encontré, espero que puedas ayudarme yo deseo que la publicación salga tipo photo o video, mas lo primero, que propiedades debo cambiar? te dejaré un enlace para que lo veas, gracias.
    https://www.facebook.com/graciasporexistirOFICIAL/posts/970627809662413 lo bueno de este tipo de compartido puede incluir animaciones. La pregunta es que modificar para que la publicación se realice con este formato por defecto. gracias.

    ResponderEliminar
    Respuestas
    1. Pues no tengo ni idea de si se puede hacer esto mismo para GIF animados y vídeos N7w.
      Si lo descubres te agradecería que lo compartieras por aquí.

      Lo único que encontré fue una etiqueta og:video para ese tipo de formato. En este enlace tienes la información.

      Eliminar
  61. Holaaaa, yo tambien tengo el problema de la imagen del post en facebook, he puesto tu codigo pero me sigue saliendo al compartir la imagen de portada del blog, cortada y se ve muy fea..¿que hice mal, me puedes ayudar?

    un saludo Oloman

    ResponderEliminar
    Respuestas
    1. Hola Teo. Pues pueden ser varias coas, pero por ejemplo, en tu última entrada (http://teo.resistenciasaharaui.com/2015/11/sahara-secesion-sin-autodeterminacion.html), la imagen es más pequeña de lo que explico en la entrada. Y la verdad que no es que no salga, sino que sale como segunda opción.

      Eliminar
    2. Gracias por tu respuesta pero mira..a mi me sale siempre la imagen grande de la portada del blog y cuando copio el enlace de alguna entrada para compartirlo me sale tambien la de la cabecera del blog pero cortada, te dejo la url de como sale http://i398.photobucket.com/albums/pp66/Teoferrmi1/Dibujo_1.png

      Eliminar
    3. Con esa entrada de la captura sucede exactamente lo mismo que con la que yo te indiqué... la imagen es pequeña. También sale como segunda opción para poder elegir cuando pones su dirección para compartir en Facebook.

      Eliminar
    4. Yo siento ser pesada pero a mi o me da nunguna 2º opcion, ademas puse tu codigo para que siempre salga la misma imagen y tapoco..esa tambien debe tener las mismas dimensiones?

      Eliminar
    5. Pues entonces es cosa de tu propia configuración, porque mira lo que me sale a mí:
      http://4.bp.blogspot.com/-EqNHk0F7gPY/VlddUCINc6I/AAAAAAAAVp8/lojrXrY9Zzg/s1600/captura.jpg:

      Eso que señalé te va dando distintas imágenes de entre las que encuentra en el post, para poder seleccionar una.

      Eliminar
    6. Y donde puedo arreglar la configuración?

      Eliminar
    7. Lo que quiero decir es que funciona perfectamente porque yo lo veo bien y si tú no lo ves bien, pues entonces la única respuesta posible es que es cosa de tu navegador, tu configuración en Facebook... o yo que sé. No podría decirte cómo hacer para que te salga a tí bien porque para eso necesitaría estar dónde tú.

      Eliminar
    8. No hay por qué pedirlas.

      Eliminar
  62. Yo usé este código que es el que me interesa para mi pagina de aterrizaje justo después de la etiqueta " head " sin conseguir cambios:

    !-- METAS FACEBOOK --
    meta content='El titulo del anuncio' property='og:title'
    meta content='El enlace de la imagen que he subido y que quiero que aparesca presentando mi anuncio' property='og:image'
    meta content='Aqui escribo el contenido de lo que anuncio' property='og:description'

    He usado la herramienta Developers Object Debugger no aparece ninguna modificación
    ¿Hay algo que este haciendo mal?

    Saludos

    ResponderEliminar
    Respuestas
    1. ¿Probaste la página de desarrolladores pulsando el botón "Fetch new scrape information"? (ver comentario 42.1)

      Eliminar
  63. Gracias oloman.
    Creo que era problema del cache, limpie y listo, ya me aparece tal y como lo tenia configurado.
    Por cierto gracias por el material que compartes con nosotros.

    ResponderEliminar
  64. Perdona que le moleste de nuevo.

    ¿Se puede personalizar un post para cada página de mi blog?

    Digamos que cada página va dirigida a un público diferente y todo el contenido lo tengo en un mismo blog y claro si en una página se habla de coches por ponerle un ejemplo, no voy a postear caramelos.

    ¿Cómo debería de hacerlo?

    ResponderEliminar
    Respuestas
    1. No entiendo lo que quieres decir...
      En cada entrada puedes hablar del tema que gustes y en cada página igual :s

      Eliminar
    2. Oloman Oloman siento tardar en responder, pero se demoró tanto en darme una respuesta que me olvide por completo de que le expuse una consulta.
      Bien, a ver como lo explico de modo que me consiga entender.
      Olvidémonos de las entradas.
      Los temas los tengo divididos en paginas y me gustaría personalizar los Post que se van a compartir en las redes sociales (mensaje con su correspondiente imagen que se va a compartir en facebook u otras) para cada pagina.
      De modo que si hablo en una página de gatos, pues el visitante va a compartir en facebook o cualquier otra red social, una descripción del tema con una imagen de gatos y si en otra página hablo de perros cuando el visitante comparta la pagina, se compartirá una descripción de la misma y una imagen de perros y así sucesivamente.
      La pregunta es ¿Como puedo personalizar estos post para cada página que se van a compartir en las redes sociales?

      Usted da un ejemplo practico para las entradas creadas:
      "Pero claro, esto no es cuestión de estar escribiéndolo manualmente para cada entrada personalizando título, imagen y resumen, así que por ejemplo en Blogger, lo podemos hacer mejor echando mano de las variables data. Sería así:

      FACEBOOK
      meta expr:content='data:blog.pageName' property='og:title'
      meta expr:content='data:blog.postImageUrl' property='og:image'
      meta expr:content='data:blog.metaDescription' property='og:description'

      Yo quiero hacer esto con las páginas.

      Eliminar
    3. Es exactamente igual Mercado (Pitiflauticos?). En una página estática puedes grabar la "descripción de búsqueda" que será el texto-resumen que saldrá e igualmente puedes incluir alguna imagen (la primera será la que se comparta).
      Si además incluyes esas META que indiqué y que reproduces, todo funcioará como quieres.

      Y otra cosa... Si cuando dejas un comentario pinchas en la casilla "Avisarme", no tendrás que estar pendiente. Recibirás un correo cuando alguien escriba un nuevo comentario en la entrada.

      Eliminar
    4. El mismo.
      Gracias, lo comprobare en cuanto pueda.
      Pues tiene razón, no caí en darle XD
      Puede que le abra otra consulta en la entada botón de whatsapp, porque me redirecciona a una pagina no encontrada en mi dispositivo movil.
      Gracia por compartir el material y atender las consultas.

      Eliminar
  65. Hola, tengo un blog con mis companeros de clase y queremos compartir en facebook cada post pero nos aparece en la vineta de XXXX y queremos que ahi salga el nombre del companero que lo ha escrito.

    El blog es:
    http://easierlifeabroad.blogspot.kr/


    Un saludo

    ResponderEliminar
    Respuestas
    1. Que yo sepa eso no lo vas poder mostrar por autor, Pilar. En tu caso siempre saldrá "By Easierlifeabroad"

      Eliminar
  66. Muy buen artículo que seguro trae de cabeza a muchos... como a mi... jajajaja voy a probar a ver si conseguimos dar con la clave. Incluso parece que Face trabaja algoritmos diferentes para Las FanPage y para los Perfiles de Usuario, es algo que también estoy investigando.

    ¿Has indagado algo al respecto?

    Gracias.

    ResponderEliminar
  67. Otra cosa... Se me acaba de ocurrir... Y cuando en lugar de una imagen tu Post contiene un vídeo de Youtube? Como haces para que Google y Face lo compartan correctamente? Si, la opción más idónea es hacerlo desde el mismo Youtube, pero de pronto un usuario quiere utilizar tus botones de compartir desde el Blog, y claro, en ese caso no muestra imagen ni video...

    ¿Como podemos solucionarlo al respecto?

    ResponderEliminar
  68. Bueno, acabo de probar todo lo comentado en este Post y :-( Algo falla con mi tema de Blogger porque no consigo dar con la solución... He probado a insertar el código que propones en la descripción de búsqueda, pero al hacerlo empeoran las cosas...

    En mis publicaciones cuando se hace uso de los botones compartir todo sale correcto excepto la imagen para Facebook que no se corresponde nunca con la del artículo que deseas compartir. O bien no sale ninguna imagen o bien sale una imágen de otro artículo distinto.

    Las imágenes tienen el tamaño correcto, son superiores a 600 X 310 pero ni modo de poder configurar correctamente el código para que Facebook comparta correctamente la Imágen.

    Ejemplo: Este Post Por ejemplo, si lo intentas compartir en Face Aparece el texto y el Titulo pero no la imagen:
    http://www.rafaorts.com/2015/11/black-friday-que-es-y-de-donde-viene.html

    Ejemplo: En este En Cambio aparece la imagen del anterior artículo, la cual no tienen nada que ver con el artículo en sí.
    http://www.rafaorts.com/2015/11/como-activar-y-usar-mi-dni-electronico.html

    POR FAVOR!!! AYUDA!!!

    ResponderEliminar
    Respuestas
    1. Prueba con esta utilidad de Facebook, que a mí me da que sí te funciona bien y que quizás no estás actualizando la información para Facebook (Fetch new scrape information)

      Eliminar
    2. Correcto Olo y Gracias por el Apunte. Horas más tarde descubrí esa aplicacion de Face. Mira que lo complican todo jajajaja. Si en principio ya funciona todo correctamente en todas las redes sociales.

      Saludos.

      Eliminar
  69. Gracias!! como siempre muy buenos tus artículos y ayuda para los demás.
    lo acabo de insertar, a ver como funciona.
    cada vez que comparto un enlace, siempre me salen las 2 fotos que tengo en la barra lateral, que encima son de 2 premios que dieron a mi blog y cuando comparto desde el movil como no da a elegir, me sale.
    a ver si con esto se arregla

    lo que no se es por qué me salen esas fotos, porque no son de las "favoritas de facebook" por tamaño y demás

    dejo un enlace a mi último post por si alguien lo quiere comprobar

    http://webpiraguismo.blogspot.com.es/2015/12/feliz-2016.html#.VoT8aFJ2FD4

    GRACIAS Y FELIZ 2016 Oloman

    ResponderEliminar
    Respuestas
    1. Hola Dani, yo ya conseguí que funcionara al 100%. Es importante actualizar los enlaces con la herramienta de Face.

      https://developers.facebook.com/tools/debug/og/object/

      Eliminar
    2. Hola Rafa
      ahora me salen a elegir la imagen del post, y las dos imagenes que tengo en la barra lateral que son de unos premios que dieron a mi web, algo avanzamos porque ahora ya puedo elegir la imagen del post, el problema será cuando lo haga desde el movil que ahí no deja elegir.

      que tendré puesto en esas dos imagenes para que salgan siempre si o si.
      están puestas con un gadget html y el enlace simple.

      será ir probando.
      Muchas gracias!

      Eliminar
    3. hola Dani, he echado un vistazo a lo tuyo. Probablemente el motivo es que el tamaño de la Imagen de Feliz Año no es lo suficientemente grande. He probado a compartir, pero a mi sólo me aparece como única opción la imagen del Premio de la federación de Piragüismo. Asegurate de que el tamaño de la imagen del post que quieres que recoja face es la adecuada. Yo suelo usar imágenes de 700x450 más o menos y de ese modo no estoy teniendo problemas.

      Revisa los tamaños de las imágenes. Utiliza el depurador de objetos de Face una vez que hayas actualizado los tamaños de imágenes introduciendo la URL del POST y dándole al botón "Fetch new scrape information". y luego prueba. Avísame si quieres para que yo pruebe a ver si me sale correcto.

      Aquí te dejo una captura para que veas que sólo me deja compartir esa imagen. Suerte, ya me dices si te funciona lo que te comento. Captura Compartir Post de Dani Duran

      Eliminar
    4. Gracias Rafa, creo que lo arreglé, baje el tamaño de las fotos del premio y parece que facebook ya no las elige. Tomo nota de tu consejo sobre el tamaño de las fotos para las próximas.
      no quería que saliese la foto del premio cada vez que compartía algo en facebook porque parecía que cada vez que ponía algo estaba presumiendo del premio, porque la gente creía que yo la ponía adrede y no me gustaba.

      en la actualización de hoy probe y me dá a elegir entre la foto de portada (bien) las foto del post (bien) y la foto del icono del google+ (no bien, pero me da igual)
      ahora a ver que hace cuando lo haga desde el movil que desde allí no da a elegir.

      MUCHAS GRACIAS!!!!!

      Eliminar
    5. Gracias en primer lugar a Rafa por "cubrirme" estos días de fiesta en que estuve algo alejado del blog.

      Sólo añadir que quizás la pega está en lo que mencioné en el post sobre usar imágenes que no fueran de la proporción 600x315, ya que he visto que Dani en sus últimos posts usa imágenes muy apaisadas.

      A pesar de eso, Facebook las reconoce, pero por algún motivo que desconozco elige la del premio ver).

      De todas formas he visto un fallo que consiste en la duplicidad de las META para Facebook. Si buscas en tu plantilla, por ejemplo, "og:image", comprobarás que hay un segundo paquete de METAS en el body que nada bueno pueden hacer. Esas segundas mejor las eliminas.

      A ver si con eso se te resuelve todo.

      Saludos

      Eliminar
    6. Anónimo8/1/16, 8:26

      jejejeje, De nada Oloman! Todo bien, entiendo esta problemática de Face y en ocasiones es un quebradero que uno quiere solucionar al instante. Si es para ayudar entre todos lo hacemos!!!

      Eliminar
  70. Oloman, en que lugar de blogger debo escribir el código:

    "

    ResponderEliminar
    Respuestas
    1. No salió parte de tu mensaje Juan, pero si te refieres a las META para Facebook en el apartado 1 de esta entrada se explica: Entre la apertura del HEAD y la del SKIN.

      Eliminar
    2. Ok Oloman, pero donde encuentro el HEAD/SKIN....Porque En cada ENTRADA al poner la opcion HTML no salen.

      Eliminar
    3. Eso está en la plantilla Juan, no en las entradas. Edita tu plantilla y allí es dónde tienes que insertar eso.

      Eliminar
  71. Hola, tengo un problema, copie lo de html y aun cuando tengo varias imagenes en mis artículos, cada vez que comparto en facebook aparece la misma y es la unica (dos manos estrechándose), y esa no tiene relación con varios artículo pues la temática varia, como hacer para que cada de vez que comparta me aparezca las imagenes que estan dentro de mis artículos (cada vez sean diferentes y concuerden con el contenido del artículo).¿que puedo hacer?.

    gracias tus artículos son muy útiles!

    ResponderEliminar
    Respuestas
    1. Prueba a poner como primera imagen de tus posts, una de un tamaño más grande. De unos 600px de ancho al menos.

      Por ejemplo, con esta entrada tuya que tiene una imagen más grande, te funciona bien.

      Eliminar
  72. Anónimo8/1/16, 8:29

    Aprovecho para plantear la siguiente duda!!! Ya que es algo que hasta la fecha no me había planteado:

    Ya sabemos como solucionar el compartir una publicación con la foto correcta en Facebook pero... ¿Supongamos que lo que queremos compartir es una página estática? Yo ya he hecho algunas pruebas, y claro, en este caso nada. La etiquetas de la publicación no me sirven, porque pase lo que pase siempre me comparte la foto del logo de mi Blog, pero no comparte ninguna de las imágenes de la página estática.

    ¿Alguien se lo había planteado? ¿Alguien sabe como solucionarlo? Es por ahorrarme la pensadera, aunque no me urge, pero es algo que tarde o temprano si que quiero hacer...

    Gracias!
    Rafa Orts

    ResponderEliminar
    Respuestas
    1. Yo tengo puesta una imagen genérica para cuando no encuentra la del post, cosa que pasa efectivamente en las páginas estáticas, pero no hay nada que impida poner etiquetas META manuales (sin variables data) en una entrada. Como no deberías tener muchas páginas estáticas, quizás esa sería una solución para tí... incluir las meta a mano.

      Como complemento creo que se deberían condicionar las metas del HEAD referentes a las imágenes para que sólo salieran cuando no se está en página estática. Quizás con esto último hasta sea suficiente.

      Eliminar
  73. Hola Oloman,
    (perdon no tengo tildes en este teclado)
    Estoy volviendome loco con este tema ya que no se como la ultima vez consegui cambiar la foto utilizando este enlace y ahora no hay manera.

    http://www.facebook.com/sharer.php?
    s=100
    &p[url]=ENLACE DEL POST
    &p[images][0]=AQUI EL ENLACE DE LA FOTO

    Mi pregunta, aunque haya leído todos los comentarios, es que en todos mis post sale la foto de cabecera de mi blog y no se exactamente que códigos usar en html. Yo quiero que cada post salga con la foto que yo elija, no tiene por que estar en el propio post incluso.

    Podrías ayudarme?

    Este es el ultimo post por ejemplo

    http://www.miaventuraviajando.com/2016/02/isla-paradisiaca-karimunjawa-secreto-mejor-guardado-indonesia.html

    Gracias de antemano crack!

    Javier

    ResponderEliminar
    Respuestas
    1. Hola Javi. Mira esta entrada. Aunque es para más botones, allí podrás encontrar cómo redactar el código para Facebook con variables DATA.

      Eliminar
  74. Hola de nuevo Oloman,

    Pero eso no tiene que ver. Yo quiero poder elegir la imagen de cada post al compartir en facebook, no añadir un botón de facebook en cada post.

    No se si me explico bien.

    Quiero que no me salga siempre la misma fotografía de cabecera.

    Gracias!

    ResponderEliminar
    Respuestas
    1. El único código que me pusiste en tu comentario es para un botón y eso fue lo que entendí que querías: uno que compartiera cada vez una imagen del propio post compartido y no una siempre igual que fuera la cabecera.

      Elegir en Facebook qué imagen saldrá es algo que directamente se gestiona desde Facebook. Tú compartes el link y automáticamente te sale una. Antes de aceptar salen miniaturas de otras posibles imágenes y puedes elegir cuál (o cuáles incluir) ¿es eso?

      Eliminar
    2. (perdona no tengo tildes en este teclado)
      Quiza me exprese mal. Yo quiero una imagen DIFERENTE en cada post, NO la misma siempre. Si te fijas, al compartir el enlace de esta entrada sale mi cabecera de blog (yo señalando con un atardecer) pero me gustaría elegir la imagen en concordancia con el propio post. Esa imagen de mi cabecera sale como predeterminada en la mayoría de mis publicaciones.

      http://www.miaventuraviajando.com/2016/02/isla-paradisiaca-karimunjawa-secreto-mejor-guardado-indonesia.html

      En mi fan page si puedo elegir la imagen en miniatura como tu dices, pero no al compartir en mi Facebook personal o en grupos de Facebook, que es lo que mas me importa.

      Eliminar
    3. Vale. Entonces no quieres un botón con el tipo de enlace que me pusiste ni elegir desde Facebook qué imagen compartir, sino que quieres que al compartir (cualquier persona) una de tus entradas en Facebook, salga una imagen relacionada con el post en cuestión.

      Realmente sólo ocurrirá esto si el post tiene una imagen, pero para ello, precisamente es todo el código que expliqué en esta entrada. Al preguntarme e incluso sugerirme un código, pensé que querías otra cosa.

      Por lo que veo no has utlizado lo que expliqué en el post. Esa es la manera.

      Eliminar
  75. Querido Oloman, pese a que me he leído de todas las formas posibles este post magnífico, sigo teniendo muuuchas dudas y un miedo atroz a destrozar mi blog. :((
    Desde hace unas semanas Facebook no carga las imágenes correctas al compartir alguno de los posts publicados desde que esto no funciona bien. O bien la imagen está en blanco aunque ocupa el espacio correcto o se inserta una imagen extraña o alguna de algún post cercano. He utilizado la herramienta Open Graph e indica que la imagen es demasiado pequeña o que no se ha podido cargar. Por supuesto, las imágenes son lo suficientemente grandes. Así que aquí estoy, con la cabeza hecha un ovillo ahora mismo. He buscado en la plantilla HTML para ver si remotamente veía la palabra Facebook en algún sitio, pero no esta. No hace falta que diga que NO tengo ni idea y que la ultima vez que tuve un percance gordo, lo solucione gracias a ti. lo que siempre te agradecere.
    En este caso, supongo que es necesario insertar entre el head y skin el código que has proporcionado en tu post para poder controlar de nuevo todos los posts y que nuevamente Facebook los comparta correctamente. Es así?? Es el siguiente código el que debo insertar entre el head y skin?? Tal cuál?? Ayudaaaaaa!!!! :((( Por favor. Muchas gracias
    “Lo podemos hacer mejor echando mano de las variables data. Sería así:
    aqui estaria el codigo del que te hablo

    ResponderEliminar
    Respuestas
    1. Sí Noor, exactamente. Eso que no escribiste es lo que hay poner en tu plantilla.
      Y además usar imágenes de unos 640px de ancho (Extra Grande) para que ya funcione 100% bien.

      Eliminar
    2. Muchas gracias por tu aclaracion y tiempo en responderme.
      El tamaño de las imagenes lo tengo claro, gracias.
      Eres muy amable. Te felicito de nuevo por tu blog. Cuando las cosas se van de madre, aqui esta el salvavidas!!
      Con cariño, Noor.

      Eliminar
    3. Querido Oloman, despues de insertar el codigo facebook en su sitio, todo funcionaba bien pero solo en apariencia. Acudo de nuevo a ti despues de haberlo probado creo que todo sin resultado positivo. Esto es un verdadero quebradero de cabeza. A raiz del problema con las imagenes de face, que al compartir hacia lo que le venia en gana menos lo que tenia que hacer, cree un blog de pruebas para poder sobrevivir a cualquier intento sin cargarme un blog que me ha costado sudor y lagrimas. Ya sabes que no tengo NI idea de esto y que buenamente me espabilo como puedo. Te cuento que el blog de pruebas es una copia html exacta al original. face reconoce las imagenes en el blog prueba, pero NO en el original. es para ponerse a llorar de frustracion. Ya no se que hacer. Como puede ser?? tambien añado, que si hago un copia-pega de un post del blog prueba al original, entonces facebook comprende que tiene que mostrar la imagen del post y lo hace sin problema. Ademas y a titulo informativo por si acaso, aunque creo que no tiene relacion, en la config de ambos blogs estan inhabilitadas las funciones de RASTREADORES E INDEXACION. nunca lo he tocado porque repito que NO tengo idea y el blog siempre habia funcionado bien.
      Te agradeceria mucho si tuvieras la amabilidad y por supuesto el tiempo de echarme otra mano porque me encuentro en un camino sin salida y no se que hacer.
      Muchas gracias por leerme y por la santa paciencia que Dios te ha dado. Un abrazo grande y todo mi cariño, Noor.

      Eliminar
    4. Pregunto: Puede ser que a veces funcione y otras no?? es que tengo la sensacion que esta pasando esto. jope....

      Eliminar
    5. Bueno, las cosas ya estan mucho mas claras. Con el paso de las horas lo voy desliando, o eso creo...
      Los nuevos posts se comparten bien en facebook pero los antiguos, los publicados durante estas ultimas semanas en las que no ha funcionado bien, esos se mantienen sin cambio, o sea no aparece ninguna imagen o es equivocada. Tengo claro que los tendré que eliminar y publicar de nuevo. Mi pregunta es de qué forma puedo mantener las visitas que han tenido. Porque es necesario eliminar, he comprobado que modificando face no se entera del cambio. Incluso cambiando la imagen por otra. Sí que tiene buena memoria, sí...
      Nos iria mejor si no tuviera tanta!!!
      Bueno, si no dices lo contrario, puedo mantener los RASTREADORES E INDEXACION del blog inhabilitados?? o crees que es importante modificarlo??
      Por otro lado, solo me queda saber de que forma puedo guardar esas visitas o si eso es posible.
      Muuuuchas gracias!!!

      Eliminar
    6. No tienes que eliminarlos y publicarlos de nuevo. Será suficiente con que vayas a la herramienta Debugger de Facebook y desde allí refresques los datos de las entradas que quieras actualizar.

      Eliminar
    7. Ya he probado el debugger mil veces y no hay forma de que cambie la imagen que comparte. Ve la nueva imagen, pero no la comparte, se sigue quedando con la antigua por mas veces que refresco. Y esto me trae de cabeza porque no lo entiendo. Por eso preguntaba lo de eliminar y volver a publicar

      Eliminar
    8. Esto es todo lo que sé sobre este tema:
      https://productforums.google.com/forum/#!topic/blogger-es/717EYeMjwoA

      Si tras leerlo no encuentras el fallo, por favor indícame la dirección de una de las entradas que te salen más.

      Eliminar
    9. Muchas gracias. Lo leo y si la cosa no va bien te digo.
      Mil gracias!!!

      Eliminar
    10. Ok, lo he leido varias veces y esta bien claro. Lo tengo todo bien en apariencia. He comprobado de nuevo con el debugger un post de hace pocos dias y nada. La imagen tiene 800x528, lo que es suficiente. He esperado un buen rato y lo he refrescado varias veces y nada, no hay forma que cambie la imagen que saco de algun sitio cuando lo publiqué.
      te dejo el enlace para que puedas verlo cuando tengas un rato y si no es molestia, por supuesto. muchas gracias por tu amabilidad y paciencia.
      http://noortarot-canalespiritual.blogspot.com.es/2016/02/crecimiento-espiritual-siente-las.html

      Eliminar
    11. Noor, la imagen de esa entrada es la que lleva la dirección https://2.bp.blogspot.com/-guc28nZ1fCY/VsTKlWKoK8I/AAAAAAAANu0/aGcTpp0pAVU/s400/noor.jpg y eso quiere decir que estás usando una de tamaño 400px, no la de 800 que comentas. Échale por favor un vistazo al enlace del foro, en la parte referente al tamaño de las imágenes.

      Eliminar
  76. Buahhhh!!! Qué frustracion!! Este no es mi camino, esta CLAROOOO!!
    Tienes mas razon que un santo. Sorry... :(( y MIL GRACIAS POR TU PACIENCIA. Hasta pronto..., nono, mejor hasta nunca!! ajajajajaj!!
    ;)))

    ResponderEliminar
  77. Oloman, sigues por aquí?, tengo un problema con el codigo que sirve para mostrar la imagen predefinida para entradas y la que pones para portada, esto a que es debido?. Es decir he puesto el segundo código empezando desde arriba.

    Y me va perfecto con las entradas, pero si pongo el otro (Variante. Mostrar una imagen fija en portada) me da un error en las entradas (al publicarlas, me sale en la parte superior), será que esta mal formado o yo estoy entendiéndolo mal?, que conste que he puesto la url de la imagen con las medidas comentadas.

    En resumen Oloman, quiero que me salga la imagen de la entrada cuando publico las entradas en Facebook, pero tambien quiero que me salga una imagen que yo elija cuando comparta la url a secas de mi blog, que seria mi cabecera. Me entiendes? Gracias de antemano y disculpa.

    ResponderEliminar
    Respuestas
    1. Hola AlexTfe26

      El que debes usar en tu caso es el código que está en tercer lugar, bajo el título que dices (Variante. Mostrar una imagen fija en portada). Si lo pusiste dónde indiqué te debe funcionar, pero para ver si hay un error, ponlo en tu plantilla y luego mira el código fuente para ver qué es lo que se interpretó por parte del navegador.

      Si no encuentras el fallo pero dejas el código y me avisas, le puedo echar yo un vistazo.

      Eliminar
  78. Hola Oloman, mi problema es que en las páginas estáticas de mi blog, no se comparte la imagen del post, sino una de la barra lateral.
    Tengo entendido que para solucionarlo, tengo que copiar un código en cada post individual de las páginas, de ser así que código tengo que copiar?

    ResponderEliminar
  79. ¡Oloman, ayuda, por favor! Al compartir mi blog en facebook no sale ninguna imagen de portada, a pesar de añadir la meta después de head siguiendo tus indicaciones.
    Cuando voy a comprobarlo en el facebook for developers me sale este aviso: og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook. Image 'http://3.bp.blogspot.com/-9kVKkWEIan8/UaY3S907S-I/AAAAAAAAK9U/HBsqCT19X2U/s1600/lasitakas-05.jpg' will be used instead. Consult http://developers.facebook.com/docs/sharing/webmasters/crawler for more troubleshooting tips.

    ResponderEliminar