¿Cómo selecciona Facebook Sharer imágenes y otros metadatos al compartir mi URL?

393

Al usar Facebook Sharer, Facebook ofrecerá al usuario la opción de usar 1 de algunas imágenes extraídas de la fuente como vista previa de su enlace. ¿Cómo se seleccionan estas imágenes y cómo puedo asegurarme de que una imagen en particular de mi página siempre se incluya en esta lista?

facebook facebook-opengraph facebook-sharer Sampson
fuente
De hecho, funciona cuando se usa la propiedad meta, pero no es válido html, ¡lo cual me parece muy extraño! Intente ejecutarlo a través de un validador y verá. Me desconcierta por qué no pueden hacer que esto funcione con html válido.
1
ver developers.facebook.com/docs/opengraph <html xmlns: og = " opengraphprotocol.org/schema " ...
cope360
3
Consejo: después de realizar cambios ... Ejecute su página a través de la interfaz y Facebook actualizará las miniaturas, etc. para esa página developers.facebook.com/tools/lint
El siguiente artículo también me pareció muy útil: Cómo personalizar qué URL, texto e IMG compartir
J0ANMM

Respuestas:

593

¿Cómo le digo a Facebook qué imagen usar cuando mi página se comparte?

Facebook tiene un conjunto de metaetiquetas de gráficos abiertos que analiza para decidir qué imagen mostrar.

Las claves para la imagen de Facebook son:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

y debe estar presente dentro de la <head></head>etiqueta en la parte superior de su página.

Si estas etiquetas no están presentes, que se verá por su antiguo método de especificar una imagen: <link rel="image_src" href="https://stackoverflow.com/myimage.jpg"/>. Si ninguno de los dos está presente, Facebook mirará el contenido de su página y elegirá imágenes de su página que cumplan con los criterios para compartir imágenes: la imagen debe tener al menos 200 px por 200 px, tener una relación de aspecto máxima de 3: 1 y en PNG, Formato JPEG o GIF.

¿Puedo especificar varias imágenes para permitir que el usuario seleccione una imagen?

Sí, solo necesita agregar varias metaetiquetas de imagen en el orden en que desea que aparezcan. Luego, se le presentará al usuario un cuadro de diálogo de selección de imagen:
Selector de imágenes de Facebook

Especifiqué las metaetiquetas de imagen apropiadas. ¿Por qué Facebook no acepta los cambios?

Una vez que se ha compartido una URL, el rastreador de Facebook, que tiene un agente de usuario facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), accederá a su página y almacenará en caché la información meta. Para obligar a los servidores de Facebook a borrar la memoria caché, use la herramienta de depuración / interfaz de URL de Facebook que lanzaron en junio de 2010 para actualizar la memoria caché y solucionar los problemas de metaetiquetas en su página.

Además, las imágenes de la página deben ser de acceso público para el rastreador de Facebook. Debe especificar las URL absolutas como http://example.com/yourimage.jpg en lugar de solo /yourimage.jpg.

¿Puedo actualizar estas metaetiquetas con código del lado del cliente como Javascript o jQuery? No. Al igual que los rastreadores de motores de búsqueda, el raspador de Facebook no ejecuta scripts, por lo que las metaetiquetas que están presentes cuando se descarga la página son las metaetiquetas que se utilizan para la selección de imágenes.

Agregar estas etiquetas hace que mi página ya no se valide. ¿Cómo puedo arreglar esto?

Puede agregar los espacios de nombres de Facebook necesarios a su etiqueta y su página debería pasar la validación:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
bkaid
fuente
1
Otro lugar se ve: <link rel="apple-touch-icon" href="...">(Así es como se obtiene la imagen SO)
Yarin
2
@Yarin No estoy seguro de que eso sea cierto. StackOverflow tiene establecida la propiedad image_src, que es la que está utilizando. El nombre de archivo para el ícono táctil de apple es diferente y no se está utilizando.
bkaid
3
¿Puedo elegir el orden de la imagen? En mi caso, aparecen otras imágenes antes de la imagen de metaetiquetas.
vicenrele
23
El tamaño mínimo de la imagen ahora es 200x200px.
Tr1stan
1
Woot! He configurado el tamaño del img en 300 px, ahora parece funcionar. Gracias @ Tr1stan
Urs
37

Cuando comparte para Facebook, debe agregar su html en la sección de encabezado junto a las siguientes metaetiquetas: 

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

¡Y eso es!

Agregue el botón como debería de acuerdo con lo que le dice FB.

Toda la información que necesita está en www.facebook.com/share/

Matias
fuente
28

A partir de 2013, si está usando facebook.com/sharer.php (PHP), simplemente puede hacer cualquier botón / enlace como:

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>

Parámetros de consulta de enlace:

p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing 
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook

Es simple: no necesita ninguna js u otra configuración. Es solo un enlace sin formato HTML. Diseñe la etiqueta A de la forma que desee.

Antonio Max
fuente
p[images][0]Era exactamente lo que necesitaba. ogLas etiquetas funcionan para compartir la misma imagen, pero necesito compartir varias imágenes de la misma página.
thekingoftruth
44
Esta debería ser la nueva 'respuesta aceptada', tan simple y directa. Gracias por esto, amigo.
Mike
Antonio, ¿tienes un enlace fuente sobre lo que mostraste arriba? Estoy tratando de ver esto en developers.facebook.com pero no puedo encontrar nada excepto esto . Por favor ayuda.
Mr_Green
@ Mr_Green eso es todo. Esta característica fue 'obsoleta' pero ahora vuelve a los documentos oficiales. De todos modos, creo que mi respuesta cubre la configuración básica para que funcione.
Antonio Max
@ AntonioMax, por favor, explique qué hay s=100en su publicación.
Mr_Green
13

Ponga la siguiente etiqueta en head:

<link rel="image_src" href="/path/to/your/image"/>

De http://www.facebook.com/share_partners.php

En cuanto a lo que elige como predeterminado en ausencia de esta etiqueta, no estoy seguro.

Matt Bridges
fuente
12

Desde mi experiencia, el http://www.facebook.com/sharer.php no usa metaetiquetas. Utiliza la cadena que pasas. Vea abajo.

http://www.facebook.com/sharer.php?s=100&p[titlefont>=THIS IS MY TITLE & p [summary] = ESTE ES MI RESUMEN & p [url] = http: //www.MYURL.com&&p [images] [ 0] = http: //www.MYURL.com/img/IMAGEADDRESS

Las metaetiquetas funcionan con los botones Me gusta / Enviar del desarrollador de Facebook, al igual que la otra información de Open Graph. Entonces, si usa uno de los elementos reales de Facebook, como los comentarios y demás, todo se vinculará con el material de Open Graph.

ACTUALIZACIÓN: Hay dos formas de usar el compartidor * tenga en cuenta el valor? S versus el valor? U en la cadena de consulta
1 ==> STRING: http://www.facebook.com/sharer.php?s + contenido de arriba
~ ~> Extraerá información de la cadena.
2 ==> URL: http://www.facebook.com/sharer.php?u=url donde url es igual a una url real
~~> Raspará la página provista en el valor de url
~~> Puede probar probar los valores aquí: https://developers.facebook.com/tools/debug

Jason Lydon
fuente
Muy útil. ¡Gracias! : D
Aaron Gray
¿Hay alguna forma legal de usar ese compartidor en otro sitio web para obtener el contenido de una URL? No sé mucho sobre API de Facebook y esas cosas ...
Lyth
Intenta usar la opción de URL. Si la página tiene etiquetas OG, FB las raspará. Pruebe la página que desea usar aquí: developers.facebook.com/tools/debug
Jason Lydon
11

A la antigua, ya no funciona:

<link rel="image_src" href="http://yoururl/yourimage"/>

Nueva forma reportada, tampoco funciona:

<meta property="og:image" content="http://yoururl/yourimage"/>

Funcionó aleatoriamente durante el primer día que lo implementé, no ha funcionado en absoluto desde entonces.

La página de Facebook linter, una utilidad que inspecciona su página, informa que todo está correcto y muestra la miniatura que seleccioné ... solo que la página share.php en sí misma no parece estar funcionando. Tiene que ser un error en Facebook, uno que aparentemente no les importa arreglar, ya que todos los informes de errores relacionados con este problema que he visto en su sistema dicen que están resueltos o solucionados.

theo
fuente
También estoy teniendo este problema. El linter no informa de ningún error y muestra mi imagen correctamente, pero cuando hago clic en el botón compartir en mi sitio, no hay absolutamente ninguna imagen en la interfaz de compartir.
Luke Griffiths
image_src ya no funciona para Facebook, PERO algunos servicios todavía lo usan (clientes de Telegram, etc.)
Andres SK
10

Para cambiar el Título, la Descripción y la Imagen, necesitamos agregar algunas metaetiquetas debajo de la etiqueta principal.

PASO 1:
Agregue metaetiquetas debajo de la etiqueta principal 

<html>
<head>
    <meta property="og:url" content="http://www.test.com/" />
    <meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
    <meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
    <meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

SIGUIENTE PASO:
haga clic en el siguiente enlace
https://developers.facebook.com/tools/debug

Agregue su URL en el cuadro de texto (por ejemplo, http://www.test.com/ ) donde mencionó las etiquetas. Haga clic en el botón DEPURAR.

Se hace.

Puede verificar aquí https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

En la URL anterior, u = el enlace de su sitio web

DISFRUTA !!!!

Gaurav123
fuente
El depurador fue útil.
konsolebox
2

Para HTTPS seguro 

<meta property="og:image:secure_url" content="https://image.path.png" />
Stefan Michev
fuente
1

Esto es lo que funcionó para mí: coloqué la imagen en miniatura deseada en la página justo después de la etiqueta y la hice demasiado pequeña para verla ...

<img src="imagename.jpg" width="1" height="1" />

No lo he probado con altura 0 y ancho 0, pero probablemente seguirá funcionando. Esto no garantiza que el usuario seleccione esta imagen.

TAMBIÉN parece que Facebook almacena en caché las miniaturas de su página y no siempre busca nuevas. Intente agregar esto a otra página de su sitio y verá que funciona.

daniel bernal
fuente
1
después de la etiqueta , ¿quiere decir: "después de la etiqueta BODY"?
Alexis Wilke
Sí, creo que eso es lo que quieren decir. Lo hice en un sitio hace mucho tiempo, pero lo usé en style="display:none;"lugar de configurarlo en 1x1 píxeles.
Mike
1

Utilice el cuadro de diálogo de alimentación de Facebook en lugar del cuadro de diálogo Compartir para mostrar imágenes personalizadas

Ejemplo:

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
kittu
fuente
0

No pude hacer que Facebook eligiera la imagen correcta de una publicación específica, así que hice lo que se describe en esta página:

/webapps/18468/adding-meta-tags-to-individual-blogger-posts

En otras palabras, algo como esto:

<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
  <meta content='http://urlofyourimage.png' property='og:image'/>
 </b:if>

Básicamente, va a codificar una declaración if en el HTML de su sitio para que cambie el meta contenido de lo que haya cambiado para esa publicación. Es una solución desordenada, pero funciona.

Michelle Glauser
fuente