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

StackOverflow https://stackoverflow.com/questions/689295

  •  22-08-2019
  •  | 
  •  

Question

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 miniature?

Vous pouvez vérifier avec mon adresse blog .

Était-ce utile?

La solution

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 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 "Assurez-vous bien les travaux Preview"

Remarque: Les balises 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/

Autres conseils

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 Share

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)

Facebook utilise og:tags et Open Graph Protocol pour déchiffrer les informations à afficher lors de la prévisualisation de votre URL dans un dialogue part 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 de sites
  • Une description de la page
  • Facebook user_id de des administrateurs de la page (sur facebook)

est un exemple ici (extrait de la facebook documentation ) de certains 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 mis en place le balisage correct du og:tags et 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:tags sur la page ou manque-il de.
Une chose à garder à l'esprit est que facebook ne faire une mise en cache en ce qui concerne ces informations, donc pour que les modifications prennent effet votre page aura t être raclée comme indiqué dans la documentation:

  

Edition Meta Tags

     

Vous pouvez mettre à jour les attributs de votre page en mettant à jour de votre page    Mots clés. Notez que og: titre et og: le type ne sont modifiables   initialement - 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 admin pour les clics page   Comme le bouton ou lorsque l'URL est entré dans la 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 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" />

Debug 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

J'avais 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 du tout.

Voilà comment je fixe mon site http://gnorml.com/blog/facebook- lien-vignettes /

Voilà comment cela fonctionne tous:

  1. Vous devez pouvoir 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. Enregistrer
  2. Ouvrir 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/ objet /

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

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
  • Courte description
  • Image

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

  • Titre: <title>INSERT POST TITLE</title>
  • Image: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
  • Description: <meta name=description content="INSERT 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 .

La façon la plus simple que j'ai trouvé à 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.

Non affilié à StackOverflow
scroll top