Cómo mostrar una determinada imagen en miniatura, mientras que la aplicación compartir en Facebook?

StackOverflow https://stackoverflow.com/questions/689295

  •  22-08-2019
  •  | 
  •  

Pregunta

Estoy tratando de implementar compartir este método.Estoy utilizando el código como sigue

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

Ahora, cuando Facebook está mostrando lo que muestra algunas de las miniaturas en la parte izquierda.Estas imágenes son recogidas desde mi sitio web.¿Cómo puedo elegir una determinada imagen como miniatura o al menos dejar de muestra en miniatura?

Se puede comprobar con mi la dirección del blog.

¿Fue útil?

Solución

Este blog parece tener su respuesta: http://blog.capstrat.com/articles/facebook-share -thumbnail-imagen /

Específicamente, usar 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 la misma que en el ejemplo.

Haga clic en "asegurándose de que las obras de vista previa"

Nota: Las etiquetas pueden ser correctas pero Facebook sólo se raspa cada 24 horas, de acuerdo con su documentación. Utilice la página de Facebook de pelusa para obtener la imagen en Facebook.

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

Otros consejos

A partir de especificaciones de Facebook, utilice un código como el siguiente: 

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

Fuente: Facebook Compartir

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

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

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

Facebook utiliza og:tags y el Open Graph Protocol para descifrar qué información se mostrará en la vista previa de su URL en un de diálogo compartir o en un feed de noticias en facebook.

El og:tags contienen información como :

  • El título de la página
  • El tipo de página
  • La dirección URL
  • Los sitios web de nombre
  • Una descripción de la página
  • Facebook user_id de los administradores de la página ( en facebook )

Aquí está un ejemplo ( tomado de la facebook documentación ) 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 se ha implementado el correcto marcado de los og:tags y el conjunto de sus valores, se puede comprobar cómo facebook van a ver su dirección URL mediante el Facebook Depurador.La herramienta de depuración también resaltar cualquier problema que encuentre con el og:tags en la página o la falta de.

Una cosa a tener en cuenta es que facebook ¿ hacer algo de caché con respecto a esta información, por lo que en orden para que los cambios surtan efecto su página dispondrá de t raspa como se indica en la documentación :

Edición De Etiquetas Meta

Usted puede actualizar los atributos de la página mediante la actualización de su página las etiquetas.Tenga en cuenta que og:title y og:type son sólo editable inicialmente - después de su página recibe el 50 gusta el título se convierte en fijo, y después de su página recibe 10,000 gusta el tipo se convierte en fijo.Estas propiedades son fijos para evitar sorprender a los usuarios que han gustado la página ya.Cambiar el título o el tipo de etiquetas después de estos límites se llegó no hace nada, su página conserva el título original y el tipo.

Para que se reflejen los cambios en Facebook, debe forzar su página para ser raspada.La página se raspa cuando un administrador para la página de clics el botón o cuando se introduce una URL en el Facebook URL Desfibradora Facebook Depurador...

veo que todas las respuestas proporcionadas son correctas. Sin embargo, un detalle importante fue pasado por alto: El tamaño de la imagen debe ser de al menos 200 x 200 píxeles, de lo contrario Facebook sustituirá a 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 el og: imagen para surtir 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" />

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

Yo estaba teniendo los mismos problemas y creo que lo he resuelto. He utilizado la etiqueta meta de enlace como se menciona aquí para apuntar a la imagen que quería, pero la clave es que si haces eso FB no se tire cualquier otra imagen como opciones. Además, si su imagen es demasiado grande, no tendrá ninguna opción en absoluto.

Así es como me fijo mi sitio http://gnorml.com/blog/facebook- link-miniaturas /

Así es como esto funciona todo:

  1. Es necesario la posibilidad de acceder al código HTML en la página web en particular que usted está compartiendo. Probablemente va a trabajar todo el sitio también si se utiliza un archivo de cabecera común. No he probado esto, pero debería funcionar. Vas a tener la misma imagen para todas las páginas si hace esto sin embargo.

  2. Es necesario añadir estas etiquetas meta HTML en la página en el. No funcionará si lo pones en el. Asegúrese de personalizar su imagen a) por, b) descripción, c) la URL, y d) del 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" />
  1. Guardar
  2. Abra una entrada fresca Facebook, y vuelva a intentar la página que querías compartir.
  3. Si usted está teniendo problemas ... puede depurar con esta herramienta de Facebook. Parece más geek de lo que es. Se da a conocer lo que Facebook está viendo cuando se registra en el URL para compartir.

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

Consejo Big .. asegúrese de que las “comillas” son los mismos que en el código HTML (que debe ser similar 2 marcas rectas y curvas ... a veces no hay programas cambian éstos a diferentes tipos de letra y Goofs el código.

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

Desde el enlace anterior. Para la mejor parte posible, usted desea sugerir 3 piezas de datos en el código HTML:

  • Título
  • Breve descripción
  • Imagen

Esto logra mediante la siguiente, colocado dentro de la etiqueta 'cabeza' del código 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 la plataforma Web HTML estático, que tendrá que hacer esto para cada página usando el editor de HTML.

Si estás usando un CMS como Drupal, puede automatizar mucho de ella (ver el enlace de arriba). Si utiliza WordPress, es probable que pueda implementar algo similar usando el ejemplo de Drupal como pauta. Espero que hayas encontrado estos útiles.

Por último, siempre se puede editar manualmente sus mensajes acciones. Ver este ejemplo con ilustraciones .

La forma más sencilla que encontré para configurar Open Graph de Facebook a todos los artículos de Joomla, era colocar en com_content / artículo anulación / default.php, código siguiente: 

$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 og meta en la cabeza con los detalles de artículo actual.

No afiliado a StackOverflow
scroll top