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

J'essaye de mettre en œuvre cette méthode. J'utilise le code comme suit

http://www.facebook.com/share.php?u=my_website_url

Maintenant, lorsque Facebook le montre, il affiche des vignettes sur le côté gauche. Ces images sont tirées de mon site Web. Comment puis-je choisir une image particulière comme vignette ou au moins l'empêcher d'afficher une vignette?

Vous pouvez le vérifier avec mon adresse de blog .

Ce billet de 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 tags peuvent être corrects, mais Facebook ne gratte 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:

<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />

Source: Partager Facebook

Mes balises étaient correctes mais Facebook ne gratte que toutes les 24 heures, selon leur documentation. En utilisant la page Facebook Lint, l'image a été publiée 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 og:tagset le protocole Open Graph pour déchiffrer les informations à afficher lors de la prévisualisation de votre URL dans une boîte de dialogue de partage ou dans un fil d'actualité sur Facebook.

Ils og:tagscontiennent des informations telles que:

• Le titre de la page
• Le type de page
• L'URL
• Le nom des sites Web
• 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 certainsog: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 og:tagset défini leurs valeurs, vous pouvez tester la manière dont Facebook affichera votre URL à l'aide du débogueur Facebook . L'outil de débogage mettra également en évidence tous les problèmes qu'il trouve avec le og:tagssur la page ou en manque.

Une chose à garder à l' esprit est que facebook ne fait une mise en cache en ce qui concerne ces informations, donc pour que les modifications prennent effet votre page aura t être gratté comme indiqué dans la documentation:

Modification des balises Meta

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 modifiables qu'au départ - une fois que votre page a reçu 50 mentions J'aime, le titre devient fixe, et après que votre page a reçu 10000 mentions 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 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 grattée. La page est grattée lorsqu'un administrateur de la page clique sur le bouton J'aime ou lorsque l'URL est entrée dans l' URL Facebook Linter Facebook Debugger ...

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 qui répond aux critères de la page. Un autre fait est que le minimum requis est d'inclure les 3 métas dont Facebook a besoin pour que l'og: image 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 et cela devrait fonctionner comme un charme! https://developers.facebook.com/tools/debug

J'avais les mêmes problèmes et je crois que je les ai résolus. 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 pas du tout le choix.

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

Voici comment cela fonctionne:

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

2. Vous devez ajouter ces balises méta HTML dans la page du. Cela ne fonctionnera pas si vous le mettez dans le fichier. Assurez-vous de personnaliser selon votre a) image, b) description, c) URL et d) titre.

Un vrai exemple.

<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" />

3. sauver
4. Ouvrez une nouvelle publication Facebook et réessayez la page que vous vouliez 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 dans l'URL à partager.

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

Big Astuce ... assurez-vous que les "guillemets" sont les mêmes dans votre HTML (ils devraient ressembler à 2 marques droites et pas de courbes ... parfois les programmes les changent en différentes polices et cela fait des erreurs dans le code.

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

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

• Titre
• Brève description
• Image

Ceci accompli par ce qui suit, placé à l'intérieur de la balise 'head' de votre 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 est en 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 une grande partie (voir lien ci-dessus). Si vous utilisez wordpress, vous pouvez probablement implémenter quelque chose de similaire en utilisant l'exemple 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 .

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é la boîte similaire. Ensuite, je suis allé de l'avant pour ajouter une image à mon en-tête (la méta ob: image). L'image correcte ne figurait toujours pas sur ma notification Facebook.

J'ai tout essayé et suis arrivé à la conclusion que chaque implémentation d'un bouton similaire est mise en cache. Disons que vous synchronisez le bouton J'aime 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 car la page est mise en cache. L'image apparaîtra lorsque vous cliquerez sur le bouton J'aime sur la page B.

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

Le moyen le plus simple que j'ai trouvé pour définir Facebook Open Graph sur chaque article Joomla était de placer dans com_content / article / default.php override, 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 des balises meta og dans la tête avec les détails de l'article actuel.