Comment afficher l'image sous forme de vignette particulier en mettant en œuvre l'action sur Facebook?

voix
96

Je suis en train de mettre en œuvre cette méthode part. J'utilise le code comme suit

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

Maintenant, quand Facebook montre qu'il montrant des vignettes à gauche. Ces images sont cueillies à partir de mon site. Comment puis-je choisir une image particulière en miniature ou au moins arrêter montrant la vignette?

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

Créé 27/03/2009 à 11:54
source utilisateur
Dans d'autres langues...                            


10 réponses

voix
80

Ce billet de blog semble avoir votre réponse: http://blog.capstrat.com/articles/facebook-share-thumbnail-image/

Plus précisément, utilisez une étiquette comme ce qui suit:

<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 « assurant que les travaux Preview »

Remarque: Les étiquettes peuvent être correct, mais Facebook seulement toutes les 24 vivote heures, en fonction de leur documentation. La page Facebook Lint pour obtenir l'image dans Facebook.

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

Créé 27/03/2009 à 12:01
source utilisateur

voix
2

Je faisais les mêmes problèmes et je crois que je l'ai résolu. J'ai utilisé le lien balise meta comme mentionné ici pour pointer vers l'image que je voulais, mais la clé est que si vous le faites FB ne tire pas d'autres images comme choix. Aussi, si votre image est trop grande, vous n'avez des choix à tous.

Voici comment je fixe mon site http://gnorml.com/blog/facebook-link-thumbnails/

Créé 20/09/2010 à 02:38
source utilisateur

voix
33

Mes tags étaient corrects, mais Facebook seulement toutes les 24 racle heures, en fonction de leur documentation. Utilisation de la page Facebook Lint a l'image dans Facebook.

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

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

Créé 14/12/2010 à 16:52
source utilisateur

voix
97

De la spécification Facebook, utilisez un code comme ceci:

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

Source: Facebook Partager

Créé 21/01/2011 à 12:30
source utilisateur

voix
1

Partage sur Facebook: Comment améliorer vos résultats par Personnalisation de l'image, le titre et texte

À partir du lien ci-dessus. Pour la meilleure part possible, vous aurez envie de proposer des 3 morceaux de données dans votre code HTML:

  • Titre
  • Brève description
  • Image

Cela accompli par ce qui suit, placé à l'intérieur de la balise « tête » de votre HTML:

  • Titre: <title>INSERT IGNORE POST TITLE</title>
  • Image: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
  • La description: <meta name=description content="INSERT IGNORE YOUR SUMMARY TEXT"/>

Si votre site est HTML statique, vous devrez le faire pour chaque page à l'aide de votre éditeur HTML.

Si vous utilisez un CMS comme Drupal, vous pouvez automatiser beaucoup de (voir lien ci-dessus). Si vous utilisez WordPress, vous pouvez probablement mettre en œuvre quelque chose de similaire en utilisant l'exemple Drupal comme guide. J'espère que vous avez trouvé ces documents utiles.

Enfin, vous pouvez toujours modifier manuellement vos messages d'actions. Voir cet exemple avec des illustrations .

Créé 24/05/2011 à 02:00
source utilisateur

voix
0

J'ai aussi eu un problème sur un site de je travaillais la semaine dernière. Je mis en œuvre une boîte comme la boîte et testé comme. Puis je suis allé avant d'ajouter une image à mon en- tête (ob: image de méta). Toujours la bonne image ne montre pas sur ma notification facebook.

J'ai tout essayé, et je suis venu à la conclusion que chaque mise en œuvre simple d'un bouton similaire est mis en mémoire cache. Alors disons que vous montre le bouton comme sur l'URL A, vous spécifiez une image dans l'en-tête et vous tester en cliquant sur le bouton Luke à nouveau sur url A. Vous ne verrez pas l'image que la page est mise en mémoire cache. L'image apparaîtra lorsque vous cliquez sur le bouton B. Comme la page

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

Créé 16/01/2012 à 22:20
source utilisateur

voix
21

Facebook utilise og:tagset le protocole Open Graph de déchiffrer les informations à afficher lors de la prévisualisation de votre URL dans une boîte de dialogue de part ou dans un flux de nouvelles sur facebook.

Les og:tagscontiennent des informations telles que:

  • Le titre de la page
  • Le type de page
  • l'URL
  • Le nom de sites Web
  • Une description de la page
  • Facebook user_id de 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 mis en place le balisage correct du og:tagset définir leurs valeurs, vous pouvez tester la façon dont facebook visionnera votre URL en utilisant le Facebook Debugger . L'outil de débogage mettra également en évidence les problèmes qu'il trouve la og:tagssur la page ou manque-il de.

Une chose à garder à l' esprit est que Facebook fait faire 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: titre et og: le type ne sont initialement modifiables - après votre page reçoit 50 aime le titre devient fixe, et après votre page reçoit 10 000 aime le type devient fixe. Ces propriétés sont fixes pour éviter les utilisateurs surprenants qui ont aimé la page déjà. Modification des balises de titre ou de type après ces limites sont atteintes ne fait rien, votre page conserve le titre original et le type.

Pour que les modifications soient reflétées sur Facebook, vous devez forcer votre page à racler. La page est raclée quand un administrateur de la page clique sur le bouton ou comme lorsque l'URL est entré dans l' URL Facebook Linter Facebook Debugger ...

Créé 17/01/2012 à 00:27
source utilisateur

voix
10

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 avec 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 metas que Facebook a besoin pour l'og: image pour prendre 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éboguer votre page Facebook avec le débogueur et corriger toutes les mises en garde et il devrait fonctionner comme un charme! https://developers.facebook.com/tools/debug

Créé 15/09/2013 à 21:45
source utilisateur

voix
0

La meilleure manière que je trouvais à mettre Facebook Open Graph pour chaque article Joomla, était à placer dans com_content / article / override default.php, 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 des détails de l'article actuel.

Créé 15/07/2015 à 09:23
source utilisateur

voix
0

Voilà comment cela fonctionne tout:

  1. Vous avez besoin de la possibilité d'accéder au HTML sur la page web particulière que vous partagez. Il va probablement travailler ensemble du site aussi si vous utilisez un fichier d'en-tête commune. Je ne l'ai pas essayé, mais cela devrait fonctionner. Vous aurez juste la même image pour toutes les pages si vous le faites bien.

  2. Vous devez ajouter ces balises meta HTML en page dans le. Il ne fonctionnera pas si vous le mettez dans le. Assurez-vous de personnaliser selon votre a) l'image, b) description, c) URL, et d) le 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" />
  1. sauvegarder
  2. Ouvrez un poste frais Facebook, et une nouvelle tentative la page que vous voulez partager.
  3. Si vous rencontrez des problèmes ... vous pouvez déboguer avec cet outil Facebook. Il semble plus geeks qu'il est. Il vous dit ce que Facebook est de voir lorsque vous publiez dans l'URL à partager.

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

Astuce Big .. assurez-vous que les « guillemets » sont les mêmes dans votre code HTML (ils devraient ressembler à 2 points droites et courbes pas ... Parfois, les programmes changent ces différentes polices et zinzins le code.

Créé 02/11/2016 à 12:06
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more