96 votes

Image du lien de la publication Facebook

Lorsque quelqu'un publie un lien sur facebook, un script scanne généralement ce lien pour détecter toute image, et affiche une vignette rapide à côté du message. Pour certaines URL cependant (dont la mienne), FB ne semble rien capter, malgré la présence d'un certain nombre d'images sur cette page.

J'ai lu que FB préfère la balise rel "image_src" pour l'image que l'utilisateur souhaite spécifier, mais cela ne génère pas non plus cette vignette pour mon site.

Mon url va directement au DNS, et n'est pas transféré, donc je n'imagine pas que cela puisse être le problème non plus.

Quelqu'un a-t-il une idée de la raison pour laquelle FB ne peut pas générer de vignettes à partir de mon site ?

119voto

WyrdNEXUS Points 861

La méthode la plus simple consiste à utiliser une balise de lien :

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

Mais il existe d'autres éléments que vous pouvez ajouter à votre site pour le rendre plus adapté aux médias sociaux :

Tags Open Graph

Les balises Open Graph sont des balises que vous ajoutez à l'interface de l <head> de votre site web pour décrire l'entité que votre page représente, qu'il s'agisse d'un groupe, d'un restaurant, d'un blog ou autre.

Une balise Open Graph ressemble à ceci :

<meta property="og:tag name" content="tag value"/> 

Si vous utilisez les balises Open Graph, les six éléments suivants sont nécessaires :

  • og:title - Le titre de l'entité.
  • og:type - Le type d'entité. Vous devez sélectionner un type dans la liste des types d'Open Graph.
  • og:image - L'URL d'une image qui représente l'entité. Les images doivent être d'au moins 50 pixels par 50 pixels. Les images carrées sont les plus efficaces, mais vous êtes autorisé à utiliser des images dont la largeur est trois fois supérieure à leur hauteur.
  • og:url - L'URL canonique et permanente de la page représentant l'entité. Lorsque vous utilisez les balises Open Graph, le bouton "J'aime" affiche un lien vers l'URL canonique permanente de la page représentant l'entité. og:url au lieu de l'URL dans le code du bouton J'aime.
  • og:site_name - Un nom lisible par l'homme pour votre site, par exemple "IMDb".
  • fb:admins ou fb:app_id - Une liste, séparée par des virgules, des identifiants Facebook des administrateurs de la page ou des identifiants d'application de la plate-forme Facebook. Au minimum, n'incluez que votre propre identifiant Facebook.

Vous trouverez de plus amples informations sur les balises Open Graph et des détails sur l'administration de votre page dans la documentation sur le protocole Open Graph.

http://developers.facebook.com/docs/reference/plugins/like

61voto

OneRuler Points 561

Je sais que cette question est ancienne, mais j'ai récemment rencontré exactement le même problème et j'ai tourné en rond pendant deux semaines. De multiples recherches sur Google ont permis de trouver de nombreuses informations utiles, mais la plupart d'entre elles étaient axées sur les balises Open Graph, que je n'étais pas intéressé à utiliser. Il s'est avéré que mon site présentait de multiples problèmes, mais voici quelques éléments de base.

  1. Comme l'a dit EightyEight, assurez-vous que votre HTML est valide - et il en va de même pour votre javascript et votre code côté serveur (PHP, ASP, etc.). J'avais une petite erreur PHP dans un morceau de code qui s'exécutait comme un appel séparé au serveur à partir de la page principale. En raison d'un certain nombre de coïncidences bizarres, ce code générait une erreur 500 - mais UNIQUEMENT pour IE6 et les moteurs d'analyse rigoureux comme le validateur W3C et le crawler de page Facebook. Le problème n'apparaissait pas dans les navigateurs modernes (Chrome 4, FF 3.5, IE 8, etc.) et je ne l'ai donc pas vu tout de suite, mais les clients plus anciens ou plus stricts affichaient l'erreur 500 à chaque fois et c'était la raison principale pour laquelle FB n'explorait pas notre page (alors que tout le reste semblait correct).

  2. En ce qui concerne la réponse de Randy, il a raison de dire que Facebook conserve une ancienne copie en cache de votre page longtemps après que vous l'ayez mise à jour. FB prétend qu'elle n'est conservée que pendant 24 heures, mais j'ai connu des périodes beaucoup plus longues que cela. Heureusement, FB a lancé son outil "URL Linter" qui vous montrera un aperçu de la façon dont votre page apparaîtra lorsqu'elle sera partagée sur FB, et cela forcera FB à mettre à jour instantanément son cache de votre page. Cet outil m'a sauvé la vie. Vous pouvez le trouver à http://developers.facebook.com/tools/lint/

  3. En ce qui concerne l'outil URL Linter, sachez que chaque variation d'une URL est mise en cache séparément sur Facebook. Ainsi, "www.example.com" n'est pas la même chose que "exemple.com". De même, les adresses uniques capitalisation est également stocké, de sorte que "ExempleUn.com" n'est pas le même que "exempleun.com". (Cela a conduit à un lot Il y a eu une certaine confusion entre mon client et moi-même lorsqu'il m'a semblé que le cache avait été mis à jour sans problème et que le client prétendait ne pas voir les mises à jour. Il s'est avéré que j'étais à l'adresse exampleone.com et que j'avais utilisé Linter pour mettre à jour le cache, mais que le client était à l'adresse exampleOne.com que je n'avais pas soumise à Linter. En conséquence, j'ai fini par soumettre plusieurs variations de l'URL à Linter, juste pour couvrir les bases).

  4. Le conseil de WyrdNEXUS d'utiliser la balise de lien image_src est tout à fait pertinent. Cela vous permet d'être sûr que FB récupère la meilleure image possible pour votre page. Il existe des directives différentes sur les spécifications que doit avoir le fichier image, mais j'ai utilisé avec succès une image carrée de 128px et j'ai vu une image de 130x97 passer aussi. Voici la documentation officielle de Facebook http://developers.facebook.com/docs/reference/plugins/like/ :

    Les images doivent être d'au moins 50 pixels par 50 pixels. Les images carrées sont les plus efficaces, mais vous êtes autorisé à utiliser des images dont la largeur est trois fois supérieure à leur hauteur.

    Bien entendu, FB redimensionnera une grande image pour vous, mais vous obtiendrez presque toujours de meilleurs résultats si vous la redimensionnez vous-même au préalable.

  5. En ce qui concerne le lien de Mike Cooper vers l'article de eHow, évitez d'utiliser l'étape 1 de cet article. C'était un conseil valable lorsque l'article a été écrit et lorsque Mike a posté le lien, mais il est maintenant préférable d'utiliser l'outil URL Linter pour prévisualiser la façon dont votre page apparaîtra lorsqu'elle sera partagée. En utilisant Linter, vous n'obligerez pas FB à mettre en cache une copie (potentiellement) mauvaise de la page avant que vous n'ayez la possibilité de la modifier.

11voto

mohamed azher Points 61

Utilisez la lintter facebook disponible ici. http://developers.facebook.com/tools/lint/

Cela vérifiera votre lien et récupérera toutes les images. Cela efface également tout ancien cache.

Ou essayez ceci - https://developers.facebook.com/tools/debug

11voto

Gaurav123 Points 713

Pour modifier le titre, la description et l'image, nous devons ajouter des métabalises sous la balise head.

ÉTAPE 1 : Ajoutez les métabalises 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." />

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

Ajoutez votre URL dans la zone de texte (par ex. 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 = le lien de votre site web.

ENJOY ! !!!

6voto

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X