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

votos
96

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 .

Publicado el 27/03/2009 a las 11:54
fuente por usuario
En otros idiomas...                            


10 respuestas

votos
80

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/

Respondida el 27/03/2009 a las 12:01
fuente por usuario

votos
2

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 yo fijo mi sitio http://gnorml.com/blog/facebook-link-thumbnails/

Respondida el 20/09/2010 a las 02:38
fuente por usuario

votos
33

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)

Respondida el 14/12/2010 a las 16:52
fuente por usuario

votos
97

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

Respondida el 21/01/2011 a las 12:30
fuente por usuario

votos
1

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 lleva a cabo mediante el siguiente, colocado dentro de la etiqueta 'cabeza' del código HTML:

  • Título: <title>INSERT IGNORE POST TITLE</title>
  • Imagen: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
  • Descripción: <meta name=description content="INSERT IGNORE 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á utilizando 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. Vea este ejemplo con ilustraciones .

Respondida el 24/05/2011 a las 02:00
fuente por usuario

votos
0

También tuve un problema en un sitio que estaba trabajando en la semana pasada. He implementado una caja como la caja y probado similares. Luego fui por delante para añadir una imagen a mi cabecera (el ob: Imagen meta). Siendo la imagen correcta no se presentó en mi facebook notificación.

He intentado todo, y llegué a la conclusión de que se almacena en caché cada implementación de un botón. Así que digamos que el reloj del botón como en url A, a continuación, se especifica una imagen en la cabecera y se haga la prueba haciendo clic en el botón de nuevo en Lucas url A. Usted no verá la imagen como la página se almacena en caché. La imagen se mostrará al hacer clic en el botón Al igual que en la página B.

Para restablecer la memoria caché, usted tiene que utilizar la herramienta de pelusa depurador que se menciona más arriba, y validar todas las direcciones URL de los que se almacenan en caché ... Eso es lo único que trabajó para mí.

Respondida el 16/01/2012 a las 22:20
fuente por usuario

votos
21

Facebook utiliza og:tagsy el protocolo Open Graph para descifrar qué información se mostrará en la vista previa de su URL en un diálogo Compartir o en un servicio de noticias en Facebook.

La og:tagscontener información tal como:

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

Aquí hay un ejemplo (tomado de la documentación facebook ) de algunasog: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 del og:tagsy establecer sus valores, puede probar cómo va a ver su facebook URL utilizando el Facebook depurador . La herramienta de depurador también destacará cualquier problema que encuentre con el og:tagsde la página o la falta de.

Una cosa a tener en cuenta es que Facebook hace hacer algo de almacenamiento en caché con respecto a esta información, así que para que los cambios surtan efecto su página tendrá t se raspó como se indica en la documentación:

Edición de Meta Tags

Puede actualizar los atributos de la página mediante la actualización de las etiquetas de su página. Tenga en cuenta que og: título y og: tipo sólo son editables inicialmente - después de que su página recibe 50 le gusta el título se vuelve fija, y después de su página recibe 10.000 le gusta el tipo se convierte en fijo. Estas propiedades son fijas para evitar usuarios sorprendentes que han gustado la página ya. Cambio de las etiquetas de título o tipo, después de que se alcanzan estos límites no hace nada, su página retiene el título original y el tipo.

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

Respondida el 17/01/2012 a las 00:27
fuente por usuario

votos
10

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 entrar en vigor:

<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

Respondida el 15/09/2013 a las 21:45
fuente por usuario

votos
0

La manera más fácil que he encontrado 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.

Respondida el 15/07/2015 a las 09:23
fuente por usuario

votos
0

Así es como esto funciona todo:

  1. Usted necesita la capacidad para 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), descripción b), c) la URL, y d) por 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. Salvar
  2. Abrir un post 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/object/

Consejo Big .. asegurarse 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.

Respondida el 02/11/2016 a las 09:06
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more