Comment Facebook Sharer sélectionne-t-il les images et autres métadonnées lors du partage de mon URL?
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?
Comment dire à Facebook quelle image utiliser lorsque ma page est partagée?
Facebook a un ensemble de balises méta à graphes ouverts qu’il examine pour choisir l’image à afficher.
Les clés pour l'image de 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 devrait être présent dans la balise <head></head> en haut de votre page.
Si ces balises ne sont pas présentes, il cherchera leur méthode plus ancienne de spécification d'image: <link rel="image_src" href="/myimage.jpg"/>. Si aucun des deux 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: Image doit faire au moins 200 pixels sur 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, vous devez simplement ajouter plusieurs balises méta d'image dans l'ordre dans lequel vous souhaitez qu'elles apparaissent. Une boîte de dialogue de sélection d'image apparaît alors à l'utilisateur:
J'ai spécifié les balises méta appropriées. Pourquoi Facebook n'accepte-t-il pas les modifications?
Une fois l'URL partagée, le robot d'exploration de Facebook, qui dispose d'un agent utilisateur de facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), accédera à votre page et mettra en cache les métadonnées. Pour obliger les serveurs Facebook à vider le cache, utilisez la commande débogueur d'URL de Facebook/Linter Tool qu'ils lancée en juin 201 pour actualiser le cache et résoudre les problèmes de balise méta sur votre page. .
En outre, les images de la page doivent être accessibles publiquement au robot d'exploration Facebook. Vous devez spécifier des URL absolues telles que http://example.com/yourimage.jpg au lieu de /yourimage.jpg.
Puis-je mettre à jour ces balises méta avec un code côté client tel que Javascript ou jQuery? Non. Tout comme les robots d'exploration de moteur de recherche, le racleur Facebook n'exécute pas de scripts. Les balises META présentes lors du téléchargement de la page sont les balises META utilisées pour la sélection des images.
L'ajout de ces balises entraîne la non validation de ma page. Comment puis-je résoudre ce problème?
Vous pouvez ajouter les espaces de noms Facebook nécessaires à votre tag et votre page doit 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">
Lorsque vous partagez pour Facebook, vous devez ajouter votre code HTML dans la section principale des balises méta suivantes:
<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 devriez en fonction de ce que FB vous dit.
Toutes les informations dont vous avez besoin sont dans www.facebook.com/share/
À partir de 2013, si vous utilisez facebook.com/sharer.php (PHP), vous pouvez créer n'importe quel bouton/lien tel que:
<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>
Paramètres de requête de liaison:
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-ce juste un lien HTML brut. Style de la balise A de la manière que vous voulez.
Placez la balise suivante dans la head:
<link rel="image_src" href="/path/to/your/image"/>
De http://www.facebook.com/share_partners.php
En ce qui concerne ce qu'il choisit comme valeur par défaut en l'absence de cette balise, je ne suis pas sûr.
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] = THIS IS MON TITRE & p [résumé] = CE IS MON SOMMAIRE & p [url] = http: //www.MYURL.com&&p [images] [0] = http: //www.MYURL.com/img/IMAGEADDRESS
Les méta-tags fonctionnent avec les développeurs de Facebook comme les boutons/envoyer, de même que les autres informations Open Graph. Donc, si vous utilisez l'un des éléments réels de Facebook, comme les commentaires, etc., tout cela sera lié au contenu Open Graph.
UPDATE: Il y a deux façons d'utiliser le partageur * notez le? S par rapport à la valeur? U dans la chaîne de requête
1 ==> CHAÎNE: http://www.facebook.com/sharer.php?s = + contenu d'en haut
~~> Extrait les informations de la chaîne.
2 ==> URL: http://www.facebook.com/sharer.php?u=url où url est égal à une URL réelle
~~> Grattera la page fournie dans la valeur de l'URL
~~> Vous pouvez tester les valeurs ici: https://developers.facebook.com/tools/debug
Ancienne façon, ne fonctionne plus:
<link rel="image_src" href="http://yoururl/yourimage"/>
Nouvelle manière signalée, également ne fonctionne pas:
<meta property="og:image" content="http://yoururl/yourimage"/>
Cela a fonctionné de manière aléatoire au cours de la première journée où je l'ai implémenté, cela n'a pas fonctionné du tout depuis.
La page Facebook linter, un utilitaire qui inspecte votre page, indique que tout est correct et affiche la vignette que j'ai sélectionnée ... juste que la page share.php ne semble pas fonctionner. Cela doit être un bug sur Facebook, un problème qu’ils ne se soucient apparemment pas de corriger, car tous les rapports de bug concernant ce problème que j’ai vu dans leur système disent tous résolus ou corrigés.
Pour changer le titre, la description et l'image, nous devons ajouter des balises méta sous la balise head.
ÉTAPE 1 :
Ajouter les balises méta 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." />
L'É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, votre lien vers votre site Web
PRENDRE PLAISIR !!!!
Pour HTTPS sécurisé
<meta property="og:image:secure_url" content="https://image.path.png" />
C'est ce qui a fonctionné pour moi: j'ai placé la vignette souhaitée sur la page juste après le tag et je l'ai rendue trop petite pour être visualisée.
<img src="imagename.jpg" width="1" height="1" />
Je ne l'ai pas testée avec les hauteurs 0 et 0 mais cela fonctionnera probablement encore. Cela ne garantit pas que l'utilisateur sélectionnera cette image ..
ÉGALEMENT, il semble que Facebook mette en cache les vignettes de votre page et ne vérifie pas toujours les nouvelles. Essayez d’ajouter cela à une autre page de votre site et vous verrez que cela fonctionne.
J'ai eu ce problème et l'ai corrigé avec la suggestion de manuel-84. Utiliser une image de 400 x 400 pixels a très bien fonctionné, alors que ma plus petite image n’était jamais apparue dans le partage.
Notez que Facebook recommande une image carrée minimale de 200 pixels comme image og: image: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags
tilisez le dialogue de flux facebook au lieu du 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
Je ne pouvais pas 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:
https://webapps.stackexchange.com/questions/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 le faire modifier le méta-contenu de ce que vous avez modifié pour ce post. C'est une solution en désordre, mais cela fonctionne.