page - open graph facebook

¿Cómo selecciona Facebook Sharer las imágenes y otros metadatos cuando comparto mi URL? (12)

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

Facebook tiene un conjunto de metaetiquetas de gráfico abierto que examina 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 etiqueta <head></head> en la parte superior de tu página.

Si estas etiquetas no están presentes, buscará su método anterior para especificar una imagen: <link rel="image_src" href="/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 sus criterios de imagen compartida: la imagen debe tener al menos 200 px por 200 px, tener una relación de aspecto máxima de 3: 1 y en formato PNG. Formato JPEG o GIF.

¿Puedo especificar varias imágenes para permitir al usuario seleccionar una imagen?

Sí, solo necesita agregar varias metaetiquetas de imagen en el orden en que desea que aparezcan. A continuación, se mostrará un cuadro de diálogo de selección de imágenes al usuario:

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

Una vez que se haya compartido una url, el rastreador de Facebook, que tiene un agente de usuario de facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php) , accederá a su página y almacenará en caché la información meta. Para forzar a los servidores de Facebook a que borren el caché, use la herramienta de depuración / programación de URL de Facebook que lanzaron en junio de 2010 para actualizar el caché y solucionar cualquier problema de etiqueta meta en su página.

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

¿Puedo actualizar estas etiquetas meta con el código del lado del cliente como Javascript o jQuery? No. Al igual que los rastreadores de los motores de búsqueda, el raspador de Facebook no ejecuta secuencias de comandos, por lo que las metaetiquetas que estén presentes cuando se descarga la página son las metaetiquetas que se usan 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 nombre de Facebook necesarios a su etiqueta y su página 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">

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

A partir de 2013, si está utilizando 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&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>

Vincular los 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: no necesita ningún js u otra configuración. Es solo un enlace HTML sin procesar. Estilo de la etiqueta A en la forma que desee.

Camino viejo, ya no funciona:

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

Nuevo modo informado, tampoco funciona:

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

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

La página de inicio de Facebook, una utilidad que inspecciona tu página, informa que todo está correcto y muestra la miniatura que seleccioné ... solo que la página share.php en sí no parece estar funcionando. Tiene que haber un error en Facebook, uno que, aparentemente, no les importa solucionar, ya que todos los informes de errores relacionados con este problema que he visto en su sistema se han resuelto o solucionado.

Cuando comparte para Facebook, tiene que agregar su html en las siguientes etiquetas meta de la sección principal:

<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 debiera según lo que FB le diga.

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

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

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

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

ACTUALIZACIÓN: hay dos formas de usar el compartidor * tenga en cuenta el valor de? Versus el? U en la cadena de consulta
1 ==> STRING: http://www.facebook.com/sharer.php?s + contenido desde 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 proporcionada en el valor de url
~~> Puede probar los valores aquí: https://developers.facebook.com/tools/debug

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 seleccionará esta imagen.

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

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

https://webapps.stackexchange.com/questions/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, vas a codificar una declaración if en el HTML de tu sitio para que cambie el contenido meta de lo que hayas cambiado para esa publicación. Es una solución desordenada, pero funciona.

Para HTTPS seguro

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

Para cambiar el título, la descripción y la imagen, debemos agregar algunas etiquetas meta en la etiqueta principal.

PASO 1 :
Añadir etiquetas meta en la 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." />

PRÓXIMO 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 DEBUG.

Está hecho.

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

En la url anterior, u = enlace de su sitio web

DISFRUTE !!!!

Pon la siguiente etiqueta en la head :

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

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

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

Tuve este problema y lo arreglé con la sugerencia de manuel-84. Usar una imagen de 400x400px funcionó muy bien, mientras que mi imagen más pequeña nunca apareció en el compartidor.

Tenga en cuenta que Facebook recomienda una imagen cuadrada mínima de 200 píxeles como la etiqueta og: image: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

Utilice el diálogo de alimentación de Facebook en lugar de compartir 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