Comment Facebook Sharer sélectionne-t-il les images et autres métadonnées lors du partage de mon URL?

393

Lors de l'utilisation de Facebook Sharer, Facebook offrira à l'utilisateur la possibilité d'utiliser l'une des quelques images extraites de la source comme aperçu de son lien. Comment ces images sont-elles sélectionnées et comment puis-je m'assurer qu'une image particulière de ma page est toujours incluse dans cette liste?

facebook facebook-opengraph facebook-sharer Sampson
la source
Cela fonctionne en effet lors de l'utilisation de la propriété meta, mais c'est du html invalide, ce que je trouve très étrange! Essayez de le faire passer par un validateur et vous verrez. Cela me déconcerte pourquoi diable ils ne peuvent pas faire fonctionner cela avec du html valide ??
1
voir developers.facebook.com/docs/opengraph <html xmlns: og = " opengraphprotocol.org/schema " ...
cope360
3
Astuce - après avoir apporté des modifications .. Exécutez votre page via le linter et facebook mettra à jour les miniatures, etc. pour cette page developers.facebook.com/tools/lint
J'ai trouvé l'article suivant également très utile: Comment personnaliser l'URL, le texte et l'IMG à partager
J0ANMM

Réponses:

593

Comment indiquer à Facebook quelle image utiliser lorsque ma page est partagée?

Facebook a un ensemble de balises META à graphique ouvert qu'il examine pour décider quelle image afficher.

Les clés de l'image Facebook sont:

<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" />

et il doit être présent à l'intérieur de la <head></head>balise en haut de votre page.

Si ces balises ne sont pas présentes, il recherchera leur ancienne méthode de spécification d'une image: <link rel="image_src" href="https://stackoverflow.com/myimage.jpg"/> . Si aucun n'est présent, Facebook examinera le contenu de votre page et choisira des images de votre page qui répondent à ses critères de partage d'image: l'image doit être d'au moins 200 pixels par 200 pixels, avoir un rapport hauteur / largeur maximum de 3: 1, et en PNG, Format JPEG ou GIF.

Puis-je spécifier plusieurs images pour permettre à l'utilisateur de sélectionner une image?

Oui, il vous suffit d'ajouter plusieurs balises META d'image dans l'ordre dans lequel vous souhaitez qu'elles apparaissent. L'utilisateur se verra alors présenter une boîte de dialogue de sélection d'image:
Sélecteur d'images Facebook

J'ai spécifié les balises META d'image appropriées. Pourquoi Facebook n'accepte-t-il pas les modifications?

Une fois qu'une URL a été partagée, le robot d'exploration de Facebook, qui dispose d'un agent utilisateur facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), accédera à votre page et mettra en cache les métadonnées. Pour forcer les serveurs Facebook à vider le cache, utilisez l' outil Facebook Url Debugger / Linter qu'ils ont lancé en juin 2010 pour actualiser le cache et résoudre les problèmes de balises META sur votre page.

De plus, les images de la page doivent être accessibles au public au robot d'exploration Facebook. Vous devez spécifier des URL absolues comme http://example.com/yourimage.jpg au lieu de simplement /yourimage.jpg.

Puis-je mettre à jour ces balises META avec du code côté client comme Javascript ou jQuery? Non. Tout comme les robots d'exploration des moteurs de recherche, le scraper Facebook n'exécute pas de scripts, donc quelles que soient les balises META présentes lors du téléchargement de la page, ce sont les balises META utilisées pour la sélection d'images.

L'ajout de ces balises empêche la validation de ma page. Comment puis-je réparer cela?

Vous pouvez ajouter les espaces de noms Facebook nécessaires à votre balise et votre page devrait ensuite passer la validation:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
bkaid
la source
1
Un autre endroit où il ressemble: <link rel="apple-touch-icon" href="...">(C'est comme ça qu'il obtient l'image SO)
Yarin
2
@Yarin, je ne suis pas sûr que ce soit vrai. StackOverflow a le jeu de propriétés image_src, qui est celui qu'il utilise. Le nom de fichier de l'icône apple-touch est différent et n'est pas utilisé.
bkaid
3
Puis-je choisir l'ordre de l'image? Dans mon cas, une autre image apparaît avant l'image des balises META.
vicenrele
23
La taille minimale de l'image est désormais de 200x200px.
Tr1stan
1
Woot! J'ai réglé la taille de l'img sur 300px, maintenant cela semble fonctionner. Merci @ Tr1stan
Urs
37

Lorsque vous partagez pour Facebook, vous devez ajouter votre code HTML dans la section de tête des prochaines balises META: 

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

Et c'est tout!

Ajoutez le bouton comme vous le souhaitez selon ce que FB vous dit.

Toutes les informations dont vous avez besoin se trouvent sur www.facebook.com/share/

Matias
la source
28

Depuis 2013, si vous utilisez facebook.com/sharer.php (PHP), vous pouvez simplement créer n'importe quel bouton / lien comme:

<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>

Paramètres de requête de lien:

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

C'est simple: vous n'avez pas besoin de js ou d'autres paramètres. Est juste un lien HTML brut. Donnez un style à la balise A comme vous le souhaitez.

Antonio Max
la source
p[images][0]était exactement ce dont j'avais besoin. ogles balises fonctionnent pour partager la même image, mais je dois partager plusieurs images à partir de la même page.
thekingoftruth
4
Cela devrait être la nouvelle «réponse acceptée» - si simple et directe. Merci pour ça, mec.
Mike
Antonio, avez-vous un lien source sur ce que vous avez montré ci-dessus? J'essaye de regarder ceci dans developers.facebook.com mais je ne trouve rien sauf cela . Veuillez aider.
Mr_Green
@Mr_Green c'est tout. Cette fonctionnalité a été «déconseillée» mais est maintenant de retour aux documents officiels. Quoi qu'il en soit, je crois que ma réponse couvre les paramètres de base pour que cela fonctionne.
Antonio Max
@AntonioMax, veuillez expliquer ce qui se trouve s=100dans votre message?
Mr_Green
13

Mettez la balise suivante dans head:

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

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

En ce qui concerne ce qu'il choisit par défaut en l'absence de cette balise, je ne suis pas sûr.

Matt Bridges
la source
12

D'après mon expérience, le http://www.facebook.com/sharer.php n'utilise pas de balises META. Il utilise la chaîne que vous passez. Voir ci-dessous.

http://www.facebook.com/sharer.php?s=100&p[title diplomatique = CEL EST MON TITRE & p [résumé] = CECI EST MON SOMMAIRE & p [url] = http: //www.MYURL.com&&p [images] [ 0] = http: //www.MYURL.com/img/IMAGEADDRESS

Les balises META fonctionnent avec les boutons J'aime / Envoyer du développeur de Facebook, tout comme les autres informations Open Graph. Donc, si vous utilisez l'un des éléments réels de Facebook comme les commentaires et autres, tout cela sera lié au contenu Open Graph.

MISE À JOUR: Il existe deux façons d'utiliser le partage * notez le? S contre la valeur? U dans la chaîne de requête
1 ==> STRING: http://www.facebook.com/sharer.php?s + contenu d'en haut
~ ~> Tirera les informations de la chaîne.
2 ==> URL: http://www.facebook.com/sharer.php?u=url où url est égal à une URL réelle
~~> Va gratter la page fournie dans la valeur url
~~> Vous pouvez tester tester les valeurs ici: https://developers.facebook.com/tools/debug

Jason Lydon
la source
Très utile. Merci! : D
Aaron Gray
Existe-t-il un moyen légal d'utiliser ce partage sur un autre site Web pour obtenir le contenu d'une URL? Je ne connais pas grand-chose à l'API facebook et ses trucs ...
Lyth
Essayez d'utiliser l'option URL. Si la page contient des balises OG, FB les supprimera. Testez la page que vous souhaitez utiliser ici: developers.facebook.com/tools/debug
Jason Lydon
11

À l'ancienne, ne fonctionne plus:

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

Signalé nouvelle façon, ne fonctionne pas non plus:

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

Il a fonctionné au hasard pendant le premier jour où je l'ai implémenté, n'a plus fonctionné depuis.

La page de linter Facebook, un utilitaire qui inspecte votre page, signale que tout est correct et affiche la vignette que j'ai sélectionnée ... juste que la page share.php elle-même ne semble pas fonctionner. Doit être un bogue sur Facebook, un problème qu'ils ne semblent pas vouloir résoudre, car chaque rapport de bogue concernant ce problème que j'ai vu dans leur système dit tous résolu ou corrigé.

theo
la source
J'ai également ce problème. Le linter ne signale aucune erreur et affiche correctement mon image, mais lorsque je clique sur le bouton de partage sur mon site, il n'y a absolument aucune image dans l'interface de partage.
Luke Griffiths
image_src ne fonctionne plus pour Facebook, MAIS certains services l'utilisent toujours (clients Telegram, etc.)
Andres SK
10

Pour modifier le titre, la description et l'image, nous devons ajouter des balises META sous la balise head.

ÉTAPE 1:
ajouter des balises META sous la balise head 

<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." />

ÉTAPE SUIVANTE:
Cliquez sur le lien ci-dessous
https://developers.facebook.com/tools/debug

Ajoutez votre URL dans la zone de texte (par exemple http://www.test.com/ ) où vous avez mentionné les balises. Cliquez sur le bouton DEBUG.

C'est fait.

Vous pouvez vérifier ici https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

Dans l'URL ci-dessus, u = lien de votre site Web

PRENDRE PLAISIR !!!!

Gaurav123
la source
Le débogueur a été utile.
konsolebox
2

Pour HTTPS sécurisé 

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

C'est ce qui a fonctionné pour moi: j'ai placé l'image miniature souhaitée sur la page juste après le tag et je l'ai rendue trop petite pour être vue.

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

Je ne l'ai pas testé avec la hauteur 0 et la largeur 0 mais cela fonctionnera probablement encore .. Cela ne garantit pas que l'utilisateur sélectionnera cette image ..

AUSSI, il semble que Facebook met en cache les miniatures sur votre page et ne vérifie pas toujours les nouvelles .. essayez d'ajouter ceci à une autre page de votre site et vous verrez que cela fonctionne.

Daniel bernal
la source
1
après la balise - voulez-vous dire: "après la balise BODY"?
Alexis Wilke
Oui, je crois que c'est ce qu'ils veulent dire. Je l'ai fait sur un site il y a longtemps, mais utilisé style="display:none;"au lieu de le régler sur 1x1 pixels.
Mike
1

Utilisez la boîte de dialogue de flux Facebook au lieu de la boîte de dialogue de partage pour afficher des images personnalisées

Exemple:

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
la source
0

Je n'ai pas réussi à faire en sorte que Facebook choisisse la bonne image dans un message spécifique, j'ai donc fait ce qui est décrit sur cette page:

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

En d'autres termes, quelque chose comme ceci:

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

Fondamentalement, vous allez coder en dur une instruction if dans le code HTML de votre site pour qu'il modifie le méta-contenu pour tout ce que vous avez modifié pour cette publication. C'est une solution compliquée, mais ça marche.

Michelle Glauser
la source