Lorsque vous utilisez Facebook Sharer, Facebook offre à l'utilisateur la possibilité d'utiliser 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 sur ma page soit siempre inclus dans cette liste ?
Réponses
Trop de publicités?
Comment indiquer à Facebook l'image à utiliser lorsque ma page est partagée ?
Facebook dispose d'un ensemble de balises méta open-graph qu'il examine pour décider de l'image à afficher.
Les clés pour 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 du <head></head> en haut de votre page.
Si ces balises ne sont pas présentes, il cherchera l'ancienne méthode pour spécifier une image : <link rel="image_src" href="http://stackoverflow.com/myimage.jpg"/> . Si ni l'un ni l'autre ne sont présents, Facebook examinera le contenu de votre page et choisira les images de votre page qui répondent à ses critères de partage d'image : L'image doit mesurer au moins 50px par 50px, avoir un rapport d'aspect maximal de 3:1 et être au format PNG, JPEG ou GIF.
Puis-je spécifier plusieurs images pour permettre à l'utilisateur de sélectionner une image ?
Oui, il suffit d'ajouter plusieurs métabalises d'image dans l'ordre dans lequel vous voulez qu'elles apparaissent. L'utilisateur se verra alors proposer une boîte de dialogue de sélection d'images :
J'ai spécifié les métabalises d'image appropriées. Pourquoi Facebook n'accepte-t-il pas les changements ?
Une fois qu'une URL a été partagée, le robot d'exploration de Facebook, qui a un agent utilisateur de facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php) accède à votre page et met en cache les méta-informations. Pour forcer les serveurs Facebook à vider le cache, utilisez l'instruction Outil de débogage et de filtrage des URL de Facebook qu'ils lancé en juin 2010 pour rafraîchir le cache et résoudre les problèmes de métabalises sur votre page.
De plus, les images de la page doivent être accessibles au public par le robot d'exploration de Facebook. Vous devez spécifier des url absolues comme http://example.com/yourimage.jpg au lieu de /votreimage.jpg.
Puis-je mettre à jour ces balises méta 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. Par conséquent, les métabalises présentes lors du téléchargement de la page sont celles qui sont utilisées pour la sélection des images.
L'ajout de ces balises fait que ma page n'est plus validée. Comment puis-je résoudre ce problème ?
Vous pouvez ajouter les espaces de noms Facebook nécessaires à votre balise et votre page devrait alors 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">
Matias
Points
181
Lorsque vous partagez pour Facebook, vous devez ajouter votre html dans la section head next meta tags :
<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 devez le faire selon ce que FB vous indique.
Toutes les informations dont vous avez besoin se trouvent sur www.facebook.com/share/
Antonio Max
Points
1149
Depuis 2013, si vous utilisez facebook.com/sharer.php (PHP), vous pouvez simplement rendre n'importe quel bouton/lien semblable :
<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 d'interrogation des liens :
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 facebookC'est très simple : vous n'avez pas besoin de js ou d'autres paramètres. Il s'agit simplement d'un lien HTML brut. Donnez à la balise A le style que vous voulez.
Matt Bridges
Points
14547
Placez la balise suivante dans le fichier head :
<link rel="image_src" href="http://stackoverflow.com/path/to/your/image"/>Desde http://www.facebook.com/share_partners.php
Quant à ce qu'il choisit comme valeur par défaut en l'absence de cette balise, je n'en suis pas sûr.
theo
Points
89
L'ancienne méthode ne fonctionne plus :
<link rel="image_src" href="http://yoururl/yourimage"/>J'ai signalé une nouvelle méthode, qui ne fonctionne pas non plus :
<meta property="og:image" content="http://yoururl/yourimage"/>Il a fonctionné par intermittence le premier jour où je l'ai mis en place, mais plus 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... mais que la page share.php elle-même ne semble pas fonctionner. Il doit s'agir d'un bogue chez Facebook, un bogue qu'ils ne semblent pas vouloir corriger, car tous les rapports de bogue concernant ce problème que j'ai vus dans leur système disent tous qu'il est résolu ou corrigé.
