web-dev-qa-db-fra.com

La boîte de dialogue de partage Facebook n'affiche pas les vignettes au premier chargement

J'utilise la boîte de dialogue de partage Facebook pour partager une URL spécifique. Le lien partagé contient une image qui devrait faire partie du partage ultérieurement. La chose étrange à ce sujet est que cela fonctionne parfaitement sur les navigateurs mobiles. Mais le navigateur de bureau ne charge pas l’image du premier coup. Un simple rechargement de la fenêtre de partage corrige l’image manquante. Une fois que cette image apparaît pendant au moins une fois, elle continue de fonctionner dans d'autres navigateurs sans recharges supplémentaires.

Ma question est donc la suivante: Quelqu'un sait-il pourquoi le premier appel de cette URL ne montre pas d'images?

Détails

Lien pour ouvrir le dialogue de partage

Voici la sortie du débogueur de Facebook, qui est exempte d’erreurs et montre également l’image.

Sortie du débogueur Facebook

Mise à jour

Semble travailler avec le dialogue de fil sans aucun problème. Mais c’est une autre façon de partager que je voudrais éviter car elle nécessite un identifiant d’application.

facebookimagethumbnailsshare
20
Sven Bluege

Je pense enfin avoir trouvé le problème. Les images que je veux partager sont livrées par un script PHP au lieu d'un fichier brut. Cela semble lié à la manière dont PHP fournit les images:

Mal: 

echo readfile($image_thumb_file);

Bien:

$fp   = fopen($image_thumb_file, "rb");
fpassthru($fp);

Après cette modification, mes images apparaissent enfin dans le débogueur de Facebook.

0
Sven Bluege

J'ai rencontré ce problème également et il s'avère que Facebook possède une "fonctionnalité" non documentée, probablement mise en œuvre pour l'optimisation. Il ne charge pas votre image lors du premier partage.

La description du bogue peut être trouvée ici: https://developers.facebook.com/bugs/657696104321030

En bref, la solution est l'une des deux possibilités.

  1. Le plus simple est d'inclure og: image: width et og: image: height dans vos ogtags décrivant la largeur en pixels et la hauteur de l'image. Étrangement, cela va (apparemment par sa conception même) convaincre Facebook de gratter le site immédiatement, y compris l'image.

    <meta property = "og: image" content = " http://example.com/image.jpg"/ >

    <meta property = "og: image: width" content = "450" ​​/>

    <meta property = "og: image: height" content = "298" />

  2. La deuxième solution potentielle consiste à déclencher un scrap manuellement via API. Je n'ai pas testé cela, mais théoriquement, c'est possible. Voir la discussion pertinente sur Stackoverflow sur ce sujet.

23
Aron

Facebook affiche une image en cache. Il le fait lors de la première soumission du partage ou lorsque le robot Facebook détecte la balise og: image sur votre page.

Selon les documents Facebook sur https://developers.facebook.com/docs/sharing/best-practices#pre-cache-images

"Certains de nos plugins sociaux rendent une image lorsque quelqu'un interagit avec eux. L'image est basée sur l'image og: de la page, ou d'autres images sur la page si l'og: image n'est pas définie. Avant le plugin social peut rendre une image Le robot d'exploration de Facebook doit voir l'image au moins une fois. Pour les sites où les pages changent fréquemment (par exemple, le commerce électronique), la première personne qui clique sur ces plugins ne verra pas d'image rendue. "

2
SoHo

Pour construire sur Arons répondre,

Le plus simple est d'inclure og: image: width et og: image: height dans vos ogtags décrivant la largeur en pixels et la hauteur de l'image. Étrangement, cela va (apparemment par sa conception même) convaincre Facebook de gratter le site immédiatement, y compris l'image.

<meta property="og:image" content="http://example.com/image.jpg"/ >

<!-- NOTE: This size should be the exact width of the image -->
<meta property="og:image:width" content="450"/>

<!-- NOTE: This size should be the exact height of the image -->
<meta property="og:image:height" content="298"/>

Les balises "og: image: width" et "og: image: height" doivent avoir les dimensions exactes de l'image pour que Facebook puisse gratter l'image correctement.

Cet article m'a conduit à la réponse correcte car je générais les pages html via un système CMS où les mots "og: image: height" et "og: image: width" étaient codés en dur dans la balise head.

https://medium.com/web-design-web-developer-magazine/facebook-share-dialog-box-not-showing-image-the-first-time-you-share-story-ed19d0f3ad36

0
Cavin Rauch

Vous pouvez également vérifier les propriétés og:image:width et og:image:height.
Cela fonctionne pour moi.

0
Pablo Barbie Fumarola

J'ai trouvé un autre moyen de forcer le robot d'exploration Facebook à vérifier la page avant de cliquer sur le bouton de partage: il suffit d'inclure un iFrame masqué avec le lien facebook le plus partagé.

Exemple:

<iframe src="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com" style="width: 0px; height: 0px; margin: 0px; padding: 0px;"></iframe>
0
Dan