Comment afficher une image particulière sous forme de vignette lors de la mise en œuvre du partage sur Facebook?

Cet article semble avoir votre réponse: http://blog.capstrat.com/articles/facebook-share-thumbnail-image/

Plus précisément, utilisez un tag comme celui-ci:

Le nom de l’image doit être le même que dans l’exemple.

Cliquez sur “Assurez-vous que l’aperçu fonctionne”

Remarque: les balises peuvent être correctes, mais Facebook ne les racle que toutes les 24 heures, selon leur documentation. Utilisez la page Facebook Lint pour obtenir l’image sur Facebook.

http://developers.facebook.com/tools/lint/

À partir des spécifications de Facebook, utilisez un code comme celui-ci:

Source: Facebook Share

Mes balises étaient correctes mais Facebook ne grattait que toutes les 24 heures, selon leur documentation. L’utilisation de la page Facebook Lint a permis d’obtenir l’image sur Facebook.

Entrez votre URL ici et FB mettra à jour les métadonnées de votre page:

https://developers.facebook.com/tools/debug (lien mis à jour)

Facebook utilise les og:tags et le protocole Open Graph pour déchiffrer les informations à afficher lors de la prévisualisation de votre URL dans une boîte de dialog de partage ou dans un stream de nouvelles sur Facebook.

Les og:tags contiennent des informations telles que:

• Le titre de la page
• Le type de page
• L’URL
• Le nom du site
• Une description de la page
• Facebook user_id’s des administrateurs de la page (sur facebook)

Voici un exemple (tiré de la documentation facebook ) de certains og:tags

Une fois que vous avez implémenté le balisage correct des balises og:tags et défini leurs valeurs, vous pouvez tester comment Facebook affichera votre URL en utilisant le débogueur Facebook . L’outil de débogage mettra également en évidence tous les problèmes qu’il trouve avec les og:tags sur la page ou manquant.

Une chose à garder à l’esprit est que Facebook fait de la mise en cache en ce qui concerne ces informations, donc pour que les modifications prennent effet, votre page ne sera pas supprimée comme indiqué dans la documentation:

Modification des balises Meta

Vous pouvez mettre à jour les atsortingbuts de votre page en mettant à jour les balises de votre page. Notez que og: title et og: type ne sont modifiables qu’initialement – une fois que votre page a reçu 50 «J’aime», le titre devient fixe et, une fois que votre page a reçu 10 000 «likes», le type devient fixe. Ces propriétés sont corrigées pour éviter de surprendre les utilisateurs qui ont déjà aimé la page. La modification des balises de titre ou de type après que ces limites ont été atteintes ne fait rien, votre page conserve le titre et le type d’origine.

Pour que les modifications soient reflétées sur Facebook, vous devez forcer votre page à être effacée. La page est raclée lorsqu’un administrateur de la page clique sur le bouton J’aime ou lorsque l’URL est entrée dans le débogueur Facebook Linter de Facebook …

Je vois que toutes les réponses fournies sont correctes. Cependant, un détail important a été négligé: la taille de l’image doit être d’au moins 200 X 200 px, sinon Facebook remplacera la vignette par la première image disponible répondant aux critères de la page. Un autre fait est que le minimum requirejs est d’inclure les 3 métas que Facebook exige pour que l’og: image prenne effet:

Déboguer votre page avec le débogueur de Facebook et corriger tous les avertissements et cela devrait fonctionner comme un charme! https://developers.facebook.com/tools/debug

J’avais les mêmes problèmes et je crois l’avoir résolu. J’ai utilisé la balise meta link comme mentionné ici pour pointer vers l’image que je voulais, mais la clé est que si vous faites cela, FB ne tirera aucune autre image comme choix. De plus, si votre image est trop grande, vous n’aurez aucun choix.

Voici comment j’ai corrigé mon site http://gnorml.com/blog/facebook-link-thumbnails/

Partage sur Facebook: comment améliorer vos résultats en personnalisant l’image, le titre et le texte

A partir du lien ci-dessus. Pour obtenir le meilleur partage possible, vous voudrez suggérer 3 éléments de données dans votre code HTML:

• Titre
• Brève description
• Image

Ceci accompli par le suivant, placé dans la balise ‘head’ de votre code HTML:

• Titre:
• Image:
• Description:

Si votre site Web est en HTML statique, vous devrez le faire pour chaque page en utilisant votre éditeur HTML.

Si vous utilisez un CMS comme Drupal, vous pouvez en automatiser beaucoup (voir le lien ci-dessus). Si vous utilisez wordpress, vous pouvez probablement implémenter quelque chose de similaire en utilisant l’exemple de Drupal comme guide. J’espère que vous les avez trouvés utiles.

Enfin, vous pouvez toujours modifier manuellement vos publications de partage. Voir cet exemple avec des illustrations .

Voici comment cela fonctionne:

1. Vous devez pouvoir accéder au code HTML sur la page Web que vous partagez. Cela fonctionnera probablement aussi sur le site si vous utilisez un fichier d’en-tête commun. Je n’ai pas essayé ceci, mais cela devrait fonctionner. Vous obtiendrez simplement la même image pour toutes les pages si vous faites cela.

2. Vous devez append ces balises meta HTML dans la page du fichier. Cela ne marchera pas si vous le mettez dans le. Assurez-vous de personnaliser selon vos a) image, b) description, c) URL et d) titre.

Un vrai exemple

3. sauvegarder
4. Ouvrez une nouvelle publication Facebook et réessayez la page que vous souhaitez partager.
5. Si vous rencontrez des problèmes… vous pouvez le déboguer avec cet outil Facebook. Il a l’air plus geek qu’il ne l’est. Il vous indique ce que Facebook voit lorsque vous publiez l’URL à partager.

https://developers.facebook.com/tools/debug/og/object/

Big Tip .. assurez-vous que les «guillemets» sont les mêmes dans votre code HTML (ils devraient ressembler à 2 marques droites et pas de courbes… parfois, les programmes les modifient en différentes fonts et cela complique le code).

J’ai aussi eu un problème sur un site sur lequel je travaillais la semaine dernière. J’ai implémenté une boite similaire et testé la boite similaire. Puis je suis allé de l’avant pour append une image à mon en-tête (le meta de l’image ob). La bonne image ne s’affiche pas sur ma notification facebook.

J’ai tout essayé et je suis arrivé à la conclusion que chaque implémentation d’un bouton similaire est mise en cache. Donc, disons que vous programmez le bouton Like sur l’URL A, puis vous spécifiez une image dans l’en-tête et vous la testez en cliquant à nouveau sur le bouton Luke sur l’URL A. Vous ne verrez pas l’image lorsque la page est mise en cache. L’image apparaîtra lorsque vous cliquez sur le bouton J’aime à la page B.

Pour réinitialiser le cache, vous devez utiliser l’outil de débogage de peluches mentionné ci-dessus et valider toutes les URL pour ceux qui sont mis en cache … C’est la seule chose qui a fonctionné pour moi.

La manière la plus simple de définir Facebook Open Graph pour chaque article Joomla était de placer dans le remplacement com_content / article / default.php, code suivant:

 $app = JFactory::getApplication(); $path = JURI::root(); $document = JFactory::getDocument(); $document->addCustomTag(''); $document->addCustomTag(''); $document->addCustomTag(''); $document->addCustomTag(''); if (isset($images->image_fulltext) and !empty($images->image_fulltext)) : $document->addCustomTag(''); else : $document->addCustomTag(''); endif; 

Cela placera les balises meta og dans la tête avec les détails de l’article en cours.