publicar - ¿Cómo se muestra una imagen particular como miniatura mientras se implementa compartir en Facebook?

publicar la imagen correcta al compartir enlaces en facebook wordpress

Question

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 son recogidas de mi sitio web. ¿Cómo puedo elegir una imagen en particular como miniatura o al menos dejar de mostrar la miniatura?

Puedes consultarlo con la dirección de mi blog .

Answer 1

Así es como funciona esto:

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

2. Necesita agregar estas metaetiquetas HTML en la página en. 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 verdadero ejemplo.

<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 nueva publicación en Facebook y vuelva a intentar la página que desea compartir.
5. Si tiene problemas ... puede depurarlo con esta herramienta de Facebook. Se ve más geek de lo que es. Te dice lo que Facebook está viendo cuando publicas en la URL para compartir.

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

Consejo importante ... asegúrate de que las "comillas" sean las mismas en tu HTML (deben verse como 2 marcas rectas y sin curvas ... a veces los programas las cambian a fuentes diferentes y el código se complica.

Answer 2

Desde las especificaciones de Facebook, usa 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

Answer 3

Esta publicación del 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 "Asegurándose de que la vista previa funcione"

Nota: las etiquetas pueden ser correctas pero Facebook solo raspa cada 24 horas, de acuerdo con su documentación. Use la página de Facebook Lint para obtener la imagen en Facebook.

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

Answer 4

Estaba teniendo los mismos problemas y creo que lo he resuelto. Utilicé la metaetiqueta de enlace como se menciona aquí para apuntar a la imagen que quería, pero la clave es que si lo haces, FB no seleccionará ninguna otra imagen. 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/

Answer 5

Facebook usa og:tags y Open Graph Protocol para descifrar qué información mostrar cuando se realiza una vista previa de su URL en un cuadro de diálogo compartido o en un feed de noticias en Facebook.

Las og:tags contienen información como:

• El título de la página
• El tipo de página
• La URL
• El nombre de los sitios 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 algunos og: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 las og:tags y establezca sus valores, puede probar cómo Facebook verá su URL mediante el https://developers.facebook.com/tools/debug . La herramienta de depuración también resaltará cualquier problema que encuentre con las og:tags en la página o carezca de ellas.

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

Edición de Meta Tags

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 se pueden editar inicialmente: una vez que su página recibe 50 Me gusta, el título se vuelve fijo y, una vez que su página recibe 10,000 Me gusta, el tipo se vuelve fijo. Estas propiedades se arreglan para evitar que los usuarios sorprendentes que ya hayan querido la página se arreglen. Cambiar el título o las etiquetas de tipo una vez que se alcanzan estos límites no hace nada, su página conserva el título original y el tipo.

Para que los cambios se reflejen en Facebook, debes forzar que se raspe tu página. La página se elimina cuando un administrador de la página hace clic en el botón Me gusta o cuando la URL se ingresa en el URL de https://developers.facebook.com/tools/debug Linter ...

Answer 6

La forma más fácil que encontré para configurar Facebook Open Graph para cada artículo de Joomla fue colocarlo en com_content / article / default.php anular, 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 la cabeza con detalles del artículo actual.

Answer 7

Mis etiquetas eran correctas, pero Facebook solo raspa cada 24 horas, de acuerdo con su documentación. El uso de la página de Facebook Lint tiene la imagen en Facebook.

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

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

Answer 8

También tuve un problema en un site 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 (ob: imagen meta). 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 similar está en la memoria caché. 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 Lucas nuevamente en la URL A. No verá la imagen mientras la página está en la memoria caché. La imagen aparecerá cuando haga clic en el botón Me gusta en la página B.

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

Answer 9

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 hecho es que el mínimo requerido es incluir los 3 metas que Facebook requiere para que la imagen 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" />

Depure su página con depurador de Facebook y corrija todas las advertencias, ¡y debería funcionar como un hechizo! https://developers.facebook.com/tools/debug

Answer 10

Compartir en Facebook: cómo mejorar sus resultados mediante la personalización de la imagen, el título y el texto

Desde el enlace de arriba Para obtener la mejor cuota posible, querrá sugerir 3 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 usando su editor de HTML.

Si está utilizando un CMS como Drupal, puede automatizar una gran cantidad (consulte el enlace anterior). Si usas wordpress, probablemente puedas implementar algo similar utilizando el ejemplo de Drupal como guía. Espero que encuentres estos útiles.

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