¿Cómo Facebook Compartidor seleccionar imágenes y otros metadatos al compartir mi URL?
https://stackoverflow.com/questions/1138460
-
16-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Cuando el uso de Facebook compartidor, Facebook ofrecerá al usuario la opción de usar 1 de unas pocas imágenes extraídos de la fuente como una vista previa de su interconexión. ¿Cómo se seleccionan estas imágenes, y cómo puedo garantizar que cualquier imagen en particular en mi página es siempre incluido en esta lista?
Solución
¿Cómo le digo Facebook qué imagen se utilizan cuando mi página se comparte?
Facebook tiene un conjunto de abrir-gráfico de etiquetas meta que mira para decidir qué imagen para mostrar.
Las claves uno 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 etiqueta <head></head> en la parte superior de la 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="/myimage.jpg"/>. Si ninguno está presente, Facebook se verá en el contenido de la página y seleccionar las imágenes desde su página que cumpla con sus criterios de imagen de acciones: La imagen debe ser de al menos 200 px por 200 píxeles, tener una relación máxima de aspecto de 3: 1, y en Papua Nueva Guinea, JPEG o GIF.
¿Puedo especificar varias imágenes para permitir al usuario seleccionar una imagen?
Sí, sólo tiene que agregar la imagen de múltiples etiquetas meta en el orden que desea que aparezcan en el usuario será presentado con un selector de imágenes:.
he especificado las etiquetas apropiadas imagen meta. ¿Por qué no está aceptando los cambios de Facebook?
Una vez que un sitio de Internet ha sido compartida, el rastreador de Facebook, que tiene un agente de usuario de facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), se entra a la página y almacenar en caché la información de metadatos. Para obligar a los servidores de Facebook para borrar la caché, utilice el Facebook Herramienta Url Depurador / Linter que puesto en marcha en junio de 2010 para refrescar la memoria caché y solucionar cualquier problema de etiquetas meta en su página.
Además, las imágenes de la página deben ser accesibles al público al rastreador de Facebook. Se debe especificar la dirección URL absoluta como http://example.com/yourimage.jpg en lugar de simplemente / yourimage. gif.
¿Puedo actualizar estas etiquetas meta 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 ejecutar secuencias de comandos por lo que cualquier meta tags están presentes cuando la página se descarga son las etiquetas meta que se utilizan para la selección de imágenes.
La adición de estas etiquetas hace que mi página para validar ya no. ¿Cómo puedo solucionar este problema?
Se pueden añadir los espacios de nombres necesarios de Facebook a su marca y su página, entonces debe 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">
Otros consejos
Cuando se comparte una cuenta en Facebook, hay que añadir en su html en la sección head próximos meta tags:
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
Y eso es todo!
Añadir el botón como usted debe de acuerdo a lo que le dice FB.
Toda la información que necesita está en www.facebook.com/share/
A partir de 2013, si está usando facebook.com/sharer.php (PHP), puede simplemente hacer cualquier botón / enlace como:
<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo urlencode(YOUR_TITLE);?>&p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>
Enlace parámetros de consulta:
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 llano: no es necesario ningún js u otros ajustes. Es sólo un enlace HTML puro. Estilo de la Una etiqueta de cualquier manera que desee.
Ponga la siguiente etiqueta en el head:
<link rel="image_src" href="/path/to/your/image"/>
http://www.facebook.com/share_partners.php
En cuanto a lo que elige como predeterminado en ausencia de esta etiqueta, no estoy seguro.
A partir de mi experiencia, el http://www.facebook.com/sharer.php no utilizar etiquetas meta. Se utiliza la cadena se pasa. Véase más abajo.
http://www.facebook.com/sharer.php ? s = 100 & p [title] = ESTA ES MI tÍTULO & p [resumen] = ESTA ES MI resumen & p [url] = http: //www.MYURL.com&&p [imágenes] [0] = http: //www.MYURL.com/img/IMAGEADDRESS
Las etiquetas meta trabajar con el desarrollador de Facebook como botones / enviar, al igual que el otro Info Open Graph. Así que si se utiliza uno de los elementos reales de Facebook como los comentarios y tal, que hará todo lazo en la materia Open Graph.
ACTUALIZACIÓN: Hay dos maneras de utilizar el compartidor * Nota de la s frente al valor U en la cadena de consulta
??
1 ==> STRING: http://www.facebook.com/ sharer.php? s + contenido desde arriba
~~> tirará de información de la cadena.
2 ==> URL: http: //www.facebook. com / sharer.php? u = url donde url es igual a una URL real
~~> raspa la página prevista en el valor url
~~> Puede probar probar los valores aquí: https://developers.facebook.com/tools/debug
Vieja manera, ya no funciona:
<link rel="image_src" href="http://yoururl/yourimage"/>
Informó nueva forma, tampoco funciona:
<meta property="og:image" content="http://yoururl/yourimage"/>
Se trabajó al azar de vez en cuando durante el primer día que la implementó, no ha funcionado en absoluto desde entonces.
La página de borra de Facebook, una utilidad que inspecciona su página, informa que todo está correcto y qué aparece en la miniatura que he seleccionado ... sólo que la página share.php en sí no parece estar funcionando. Tiene que ser un error más en Facebook, uno que al parecer no les importa para fijar como cada informe de error con respecto a este tema que he visto en su sistema todos dicen resueltos o fijo.
Para cambiar el título, descripción y la imagen, tenemos que añadir algunas etiquetas meta bajo etiqueta de la cabeza.
PASO 1:
Añadir etiquetas meta bajo etiqueta de la cabeza
<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 enlace de abajo
https://developers.facebook.com/tools/debug
Añada su sitio web en el cuadro de texto (por ejemplo, http://www.test.com/ ) donde mencionó las etiquetas. Haga clic en el botón de depuración.
Su hecho.
Puede comprobar aquí https: / /www.facebook.com/sharer/sharer.php?u=http://www.test.com/
En URL anterior, u = tu sitio web
DISFRUTAR !!!!
Para HTTPS seguras
<meta property="og:image:secure_url" content="https://image.path.png" />
he tenido este problema y lo arreglaron con la sugerencia de manuel-84. Usando una imagen de 400x400px funcionaba muy bien, mientras mi imagen más pequeña nunca apareció en el compartidor.
Tenga en cuenta que Facebook recomienda un mínimo de 200 píxeles de imagen cuadrada como el og: etiqueta de la imagen: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags
Esto es lo que funcionó para mí: me puse la imagen en miniatura que desee en la página de la derecha después de la etiqueta y por lo que es demasiado pequeño para ver ..
<img src="imagename.jpg" width="1" height="1" />
Yo no lo he probado con la altura y la anchura 0 0 pero probablemente seguirá funcionando .. Esto no garantiza que el usuario seleccionará esta imagen ..
también parece que Facebook almacena las imágenes en miniatura en su página y imposible comprobar siempre por otros nuevos .. trate de añadir esto a otra página en su sitio y verá que funciona.
Uso de diálogo alimentación facebook en lugar de la cuota de diálogo 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
No pude conseguir Facebook para elegir la imagen correcta desde un puesto específico, así que hice lo que se indica en esta página:
https://webapps.stackexchange.com/questions/18468 / adición-meta-tags-a-individuales-blogger-postes
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, vas a un código dura sentencia if en el HTML de su sitio para conseguir que se cambie el contenido meta para lo que ha cambiado para que un puesto. Es una solución desordenada, pero funciona.
