¿Cómo mostrar una imagen en particular como miniatura al implementar compartir en Facebook?

Estoy tratando de implementar compartir este método. Estoy usando el código de la siguiente manera

http://www.facebook.com/share.php?u=my_website_url

Ahora cuando Facebook lo muestra mostrando algunas miniaturas en el lado izquierdo. Estas imágenes se seleccionan de mi sitio web. ¿Cómo puedo elegir una imagen en particular como miniatura o al menos dejar de mostrarla?

Puedes comprobarlo con la dirección de mi blog .

Esta publicación de blog parece tener su respuesta: http://blog.capstrat.com/articles/facebook-share-thumbnail-image/

Específicamente, use una etiqueta como la siguiente:

<link rel="image_src" 
      type="image/jpeg" 
      href="http://www.domain.com/path/icon-facebook.gif" />

El nombre de la imagen debe ser el mismo que en el ejemplo.

Haga clic en "Asegurarse de que la vista previa funcione"

Nota: Las etiquetas pueden ser correctas pero Facebook solo raspa cada 24 horas, según su documentación. Utilice la página de Facebook Lint para llevar la imagen a Facebook.

http://developers.facebook.com/tools/lint/

De la especificación de Facebook, use un código como este:

<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />

Fuente: Facebook Share

Mis etiquetas eran correctas, pero Facebook solo raspa cada 24 horas, según su documentación. El uso de la página de Facebook Lint llevó la imagen a Facebook.

Ingrese su URL aquí y FB actualizará los metadatos de su página:

https://developers.facebook.com/tools/debug (enlace actualizado)

Facebook utiliza og:tagsy el protocolo Open Graph para descifrar qué información mostrar al obtener una vista previa de su URL en un diálogo para compartir o en una fuente de noticias en Facebook.

La og:tagscontener información tal como:

• El título de la página
• El tipo de página
• La URL
• El nombre del sitio web
• Una descripción de la página
• Facebook user_id's de administradores de la página (en facebook)

Aquí hay un ejemplo (tomado de la documentación de Facebook ) de algunosog:tags

<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

Una vez que haya implementado el marcado correcto de og:tagsy haya establecido sus valores, puede probar cómo Facebook verá su URL utilizando el depurador de Facebook . La herramienta de depuración también resaltará cualquier problema que encuentre con el og:tagsen la página o la falta del mismo.

Una cosa a tener en cuenta es que Facebook realiza un almacenamiento en caché con respecto a esta información, por lo que para que los cambios surtan efecto, su página no deberá ser raspada como se indica en la documentación:

Editar metaetiquetas

Puede actualizar los atributos de su página actualizando las etiquetas de su página. Tenga en cuenta que og: title y og: type solo son editables inicialmente; después de que su página recibe 50 me gusta, el título se vuelve fijo y después de que su página recibe 10,000 me gusta, el tipo se vuelve fijo. Estas propiedades están arregladas para evitar sorprender a los usuarios a los que ya les ha gustado la página. Cambiar el título o las etiquetas de tipo después de alcanzar estos límites no hace nada, su página conserva el título y el tipo originales.

Para que los cambios se reflejen en Facebook, debe forzar el raspado de su página. La página se raspa cuando un administrador de la página hace clic en el botón Me gusta o cuando se ingresa la URL en el depurador de Facebook Linter URL de Facebook ...

Veo que todas las respuestas proporcionadas son correctas. Sin embargo, se pasó por alto un detalle importante: el tamaño de la imagen DEBE ser de al menos 200 X 200 px; de lo contrario, Facebook sustituirá la miniatura con la primera imagen disponible que cumpla con los criterios de la página. Otro dato es que el mínimo requerido es incluir las 3 metas que Facebook requiere para que la imagen og: surta efecto:

<meta property="og:title" content="Title of the page" />
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:image" content="http://convertaholics.com/convertaholics-og.png" />

¡Depura tu página con el depurador de Facebook y corrige todas las advertencias y debería funcionar como un encanto! https://developers.facebook.com/tools/debug

Estaba teniendo los mismos problemas y creo que lo he resuelto. Utilicé la metaetiqueta de enlace como se menciona aquí para señalar la imagen que quería, pero la clave es que si lo hace, FB no extraerá ninguna otra imagen como opciones. Además, si su imagen es demasiado grande, no tendrá ninguna opción.

Así es como arreglé mi sitio http://gnorml.com/blog/facebook-link-thumbnails/

Así es como funciona todo esto:

1. Necesita la capacidad de acceder al HTML en la página web particular que está compartiendo. Probablemente también funcione en todo el sitio si usa un archivo de encabezado común. No lo he probado, pero debería funcionar. Sin embargo, obtendrá la misma imagen para todas las páginas si hace esto.

2. Debe agregar estas metaetiquetas HTML en la página en formato. No funcionará si lo pones en el. Asegúrese de personalizar según su a) imagen, b) descripción, c) URL yd) título.

Un ejemplo real.

<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />

<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015." />

<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />

<meta property="og:title" content="Coaches Wisdom Telesummit" />

3. Salvar
4. Abra una publicación de Facebook nueva y vuelva a intentar la página que deseaba compartir.
5. Si tiene problemas ... puede depurarlo con esta herramienta de Facebook. Parece más geek de lo que es. Te dice qué está viendo Facebook cuando publicas en la URL para compartir.

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

Un gran consejo ... asegúrate de que las "comillas" sean las mismas en tu HTML (deberían verse como 2 marcas rectas y sin curvas ... a veces los programas las cambian a fuentes diferentes y se equivoca el código.

Compartir en Facebook: cómo mejorar sus resultados personalizando la imagen, el título y el texto

Desde el enlace de arriba. Para compartir lo mejor posible, querrá sugerir 3 piezas de datos en su HTML:

• Título
• Breve descripción
• Imagen

Esto se logra mediante lo siguiente, colocado dentro de la etiqueta 'head' de su HTML:

• Título: <title>INSERT POST TITLE</title>
• Imagen: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
• Descripción: <meta name=description content="INSERT YOUR SUMMARY TEXT"/>

Si su sitio web es HTML estático, tendrá que hacer esto para cada página utilizando su editor de HTML.

Si está utilizando un CMS como Drupal, puede automatizar muchos de ellos (consulte el enlace anterior). Si usa wordpress, probablemente pueda implementar algo similar usando el ejemplo de Drupal como guía. Espero que te hayan resultado útiles.

Finalmente, siempre puede editar manualmente sus publicaciones compartidas. Vea este ejemplo con ilustraciones .

También tuve un problema en un sitio en el que estaba trabajando la semana pasada. Implementé una caja similar y probé la caja similar. Luego seguí adelante para agregar una imagen a mi encabezado (el ob: meta de imagen). Aún así, la imagen correcta no apareció en mi notificación de Facebook.

Probé todo y llegué a la conclusión de que cada implementación de un botón Me gusta se almacena en caché. Así que digamos que marca el botón Me gusta en la URL A, luego especifica una imagen en el encabezado y la prueba haciendo clic en el botón Luke nuevamente en la URL A. No verá la imagen ya que la página está almacenada en caché. La imagen se mostrará cuando haga clic en el botón Me gusta en la página B.

Para restablecer la caché, debe usar la herramienta de depuración de pelusa que se menciona anteriormente y validar todas las URL de las que están en caché ... Eso es lo único que funcionó para mí.

La forma más fácil que encontré para configurar Facebook Open Graph en cada artículo de Joomla fue colocar en com_content / article / default.php override, el siguiente código:

$app    = JFactory::getApplication();
$path   = JURI::root();

$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:title" content="YOUR SITE TITLE" />');
$document->addCustomTag('<meta property="og:name" content="YOUR SITE NAME" />');
$document->addCustomTag('<meta property="og:description" content="YOUR SITE DESCRIPTION" />');
$document->addCustomTag('<meta property="og:site_name" content="YOUR SITE NAME" />');
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) : 
    $document->addCustomTag('<meta property="og:image" content="'.$path.'<?php echo htmlspecialchars($images->image_fulltext); ?>" />');
else :
    $document->addCustomTag('<meta property="og:image" content="'.$path.'images/logo.png" />');
 endif;

Esto colocará etiquetas meta og en el encabezado con detalles del artículo actual.