Comment afficher une image particulière sous forme de vignette lors de la mise en œuvre du partage sur Facebook?
J'essaie de mettre en œuvre partager cette méthode. J'utilise le code comme suit
http://www.facebook.com/share.php?u=my_website_url
Maintenant, lorsque Facebook l'affiche, il affiche des miniatures sur le côté gauche. Ces images sont tirées de mon site web. Comment choisir une image en tant que vignette ou au moins l'arrêter d'afficher une vignette?
Vous pouvez le vérifier avec mon adresse du blog .
Ce blog semble avoir votre réponse: http://blog.capstrat.com/articles/facebook-share-thumbnail-image/
Plus précisément, utilisez une balise comme celle-ci:
<link rel="image_src"
type="image/jpeg"
href="http://www.domain.com/path/icon-facebook.gif" />
Le nom de l'image doit être le même que dans l'exemple.
Cliquez sur "S'assurer que l'aperçu fonctionne"
Remarque: les étiquettes peuvent être correctes, mais Facebook ne gratte que toutes les 24 heures, selon leur documentation. Utilisez la page Facebook Lint pour importer l’image dans Facebook.
Dans les spécifications de Facebook, utilisez un code comme celui-ci:
<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />
Source: Partage Facebook
Mes tags étaient corrects mais Facebook ne raclait que toutes les 24 heures, selon leur documentation. L'utilisation de la page Facebook Lint a permis d'obtenir l'image dans 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 og:tags et le Open Graph Protocol pour déchiffrer les informations à afficher lors de la prévisualisation de votre URL dans un dialogue de partage ou dans un fil de nouvelles sur Facebook.
Le og:tags contient des informations telles que:
- Le titre de la page
- Le type de page
- L'URL
- Le nom des sites
- Une description de la page
- Identifiants Facebook des administrateurs de la page (sur facebook)
Voici un exemple (tiré de la documentation facebook ) de quelque og:tags
<meta property="og:title" content="The Rock"/><meta property="og:type" content="movie"/><meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/><meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
Une fois que vous avez implémenté le balisage correct de la og:tags _ et définissez leurs valeurs, vous pouvez tester la manière dont Facebook affichera votre URL en utilisant le débogueur Facebook . L'outil de débogage mettra également en évidence les problèmes rencontrés avec le og:tags sur la page ou en manque.
Une chose à garder à l'esprit est que facebook fait une certaine mise en cache en ce qui concerne ces informations, donc pour que les modifications prennent effet votre page sera t grattée comme indiqué dans la documentation:
Modification des balises méta
Vous pouvez mettre à jour les attributs de votre page en mettant à jour les balises de votre page. Notez que og: title et og: type ne sont initialement modifiables - après que votre page ait reçu 50 mentions J'aime, le titre devient fixe et, après que votre page ait reçu 10 000 "j'aime", le type devient fixe. Ces propriétés sont corrigées pour éviter de surprendre les utilisateurs qui ont déjà aimé la page. Changer le titre ou les balises de type une fois ces limites atteintes n'a aucun effet, votre page conserve le titre et le type d'origine.
Pour que les modifications soient reflétées sur Facebook, vous devez forcer le grattage de votre page. La page est supprimée lorsqu'un administrateur de la page clique sur le bouton J'aime ou lorsque l'URL est entrée dans le répertoire.
URL Facebook Facebookdébogueur 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 requis est d'inclure les 3 métas requises par Facebook pour que l'image og: prenne effet:
<meta property="og:title" content="Title of the page" />
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:image" content="http://convertaholics.com/convertaholics-og.png" />
Déboguez votre page avec le débogueur Facebook et corrigez tous les avertissements. Cela devrait fonctionner comme un charme! https://developers.facebook.com/tools/debug
J'avais les mêmes problèmes et je pense l'avoir résolu. J'ai utilisé la balise méta de lien comme mentionné ici pour désigner l'image que je voulais, mais l'essentiel est que si vous le faites, 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 réparé mon site http://gnorml.com/blog/facebook-link-thumbnails/
Voici comment cela fonctionne tous:
Vous devez avoir la possibilité d’accéder au code HTML de la page Web que vous partagez. Si vous utilisez un fichier d’en-tête commun, vous aurez probablement accès à l’ensemble du site. Je n'ai pas essayé cela, mais ça devrait marcher. Vous obtiendrez la même image pour toutes les pages si vous le faites bien.
Vous devez ajouter ces balises méta HTML à la page dans le fichier. Cela ne fonctionnera pas si vous le mettez dans le fichier. Assurez-vous de personnaliser a, votre image, votre description, votre URL et votre titre.
Un exemple réel.
<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />
<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015." />
<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />
<meta property="og:title" content="Coaches Wisdom Telesummit" />
- Sauver
- Ouvrez une nouvelle publication Facebook et réessayez la page que vous souhaitez partager.
- 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 postez dans l'URL à partager.
https://developers.facebook.com/tools/debug/og/object/
Conseil important… assurez-vous que les "guillemets" sont les mêmes dans votre code HTML (ils doivent ressembler à 2 traits droits et pas à des courbes… parfois, les programmes les changent en différentes polices et le code est bon.
Du lien ci-dessus. Pour 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 ce qui suit, placé dans la balise 'head' de votre code HTML:
- Titre:
<title>INSERT POST TITLE</title> - Image:
<meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/> - La description:
<meta name=description content="INSERT YOUR SUMMARY TEXT"/>
Si votre site Web utilise du HTML statique, vous devrez le faire pour chaque page à l'aide de 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 mettre en œuvre quelque chose de similaire en utilisant le Drupal). J'espère que vous avez trouvé ces informations utiles.
Enfin, vous pouvez toujours modifier manuellement vos publications partagées. Voir cet exemple avec des illustrations .
Le moyen le plus simple que j'ai trouvé pour définir Facebook Open Graph sur chaque article de Joomla était de le placer dans le paramètre com_content/article/default.php, le code suivant:
$app = JFactory::getApplication();
$path = JURI::root();
$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:title" content="YOUR SITE TITLE" />');
$document->addCustomTag('<meta property="og:name" content="YOUR SITE NAME" />');
$document->addCustomTag('<meta property="og:description" content="YOUR SITE DESCRIPTION" />');
$document->addCustomTag('<meta property="og:site_name" content="YOUR SITE NAME" />');
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) :
$document->addCustomTag('<meta property="og:image" content="'.$path.'<?php echo htmlspecialchars($images->image_fulltext); ?>" />');
else :
$document->addCustomTag('<meta property="og:image" content="'.$path.'images/logo.png" />');
endif;
Cela placera les balises meta og dans la tête avec les détails de l'article en cours.
J'ai également eu un problème sur un site sur lequel je travaillais la semaine dernière. J'ai implémenté une boîte similaire et testé cette dernière. Puis je suis allé de l'avant pour ajouter une image à mon en-tête (la méta ob: image). La bonne image ne figurait toujours pas dans ma notification par facebook.
J'ai tout essayé et je suis arrivé à la conclusion que chaque implémentation d'un bouton similaire est mise en cache. Supposons donc que vous cliquez le bouton J'aime sur l'URL A, puis que vous spécifiez une image dans l'en-tête et que vous la testez en cliquant à nouveau sur le bouton Luke de l'URL A. Vous ne verrez pas l'image car la page est mise en cache. L'image apparaîtra lorsque vous cliquerez sur le bouton J'aime de la page B.
Pour réinitialiser le cache, vous devez utiliser l'outil de débogage de charpie mentionné ci-dessus et valider toutes les adresses URL pour celles qui sont mises en cache ... C'est la seule chose qui a fonctionné pour moi.