Partager sur Facebook : choisir l'image pour la vignette ?

milkiway · 24 Mars 2010

Bonjour,

Comme beaucoup, j'utilise la fonction "Partager sur facebook".
Voir ici par exemple : http://tinyurl.com/yjqan75 en bas de la recette.

Lors du partage (cliquez sur Partager sur facebook) je voudrais pouvoir choisir la vignette car là, par défaut c'est le logo de mon site qui est sélectionné.

Comment faire ?

Merci

horlogerie · 24 Mars 2010

tu as une petite flèche vers l'image et tu sélectionnes ton image avec

milkiway · 24 Mars 2010

Je me suis mal exprimé. Je voudrais indiquer au script directement la bonne image à utiliser et que l'utilisateur ne se voit pas proposer le logo de mon site comme illustration!

aladdin · 24 Mars 2010

Facebook "parse" ton contenu et propose les X premières images rencontrés.

une solution (bricolée) serait de mettre l'image que tu souhaite afficher juste derrière ton body et que tu la cache avec du javascript, peut-etre même qu'un display:non suffirait ...

milkiway · 24 Mars 2010

Humm pas bête du tout ça, surtout que ça permet de charger l'image avant qu'elle ne soit effectivement affichée.
Merci je vais faire ça.

SpeedAirMan · 24 Mars 2010

Tu nous tiens au courant stp ? :mrgreen:

finstreet · 24 Mars 2010

Voui ca m'intéresse aussi

Dans mon cas, il ne chope que les images APRES le clic Facebook

Je crois qu'il y a aussi peut être une notion de href sur l'image

milkiway · 24 Mars 2010

Ca ne fonctionne pas 8O

Prax · 24 Mars 2010

Bonjour,

J'ai trouvé une solution à ce problème sur un blog uk.

Il suffit de mettre ce link dans le head et de spécifier l'image souhaitée.

<link rel="image_src" href="http://adresseimg.png" />

Voilà j'espère que ça va répondre à ton souci.

Bonne journée.

milkiway · 24 Mars 2010

Prax a dit:
Bonjour,

J'ai trouvé une solution à ce problème sur un blog uk.

Il suffit de mettre ce link dans le head et de spécifier l'image souhaitée.

<link rel="image_src" href="http://adresseimg.png" />

Cliquez pour agrandir...

Voilà j'espère que ça va répondre à ton souci.

Bonne journée.

Wonderful, merci beaucoup!

SpeedAirMan · 24 Mars 2010

Pfiou... ok, merci bcp pour l'info !
Y'a plus qu'à... créer un petit bout de code qui ira chercher la meilleure image de la page et l'afficher dans le header.

spout · 24 Mars 2010

Tout est indiqué ici: http://wiki.developers.facebook.com/index.php/Facebook_Share/Specifyin ... _Meta_Tags

finstreet · 24 Mars 2010

ouais ben ca, ca marche pas à chaque fois non plus

asterix23 · 24 Mars 2010

Super! pile poil ce qu'il me fallait.

Prax · 25 Mars 2010

merci spout, pour la doc complète.

mattkay · 16 Décembre 2010

je cherche cette solution depuis très longtemps!!

Cependant, je ne sais pas où trouver le code source de mon article? et où je dois coller ce link.

Quelqu'un peut svp m'aider?

finstreet · 17 Décembre 2010

Vérifier de ton coté de ton robots.txt Quelques fois il bloque le "bot" de FB

WebRankInfo · 17 Décembre 2010

spout a dit:
Tout est indiqué ici: http://wiki.developers.facebook.com/index.php/Facebook_Share/Specifyin ... _Meta_Tags

Sur cette page, je vois un lien vers une page qui explique qu'il faut mettre une balise meta :

Code:

<meta property="og:image" content="thumbnail_image" />

je l'ai mis sur les pages du forum et ça ne marche pas on dirait...

Prax a dit:
Il suffit de mettre ce link dans le head et de spécifier l'image souhaitée.

Code:

<link rel="image_src" href="http://adresseimg.png" />

je vais donc essayer cette autre solution

cupidonbe · 16 Novembre 2011

super et y a une astuce similaire pour avoir la description ?

alcidejet · 4 Juillet 2012

J'ai trouvé réponse à cette question sur le site facebook :
https://developers.facebook.com/docs/share/

Sharing Rich Media

You can share rich media like images, audio, and video from your page. To do this, you need to include meta tags in the <head> element in your HTML code.
Configuring Meta Tags for Facebook Share

You can enhance how the shared item appears on Facebook by configuring how it gets previewed on a user's profile and when a user tries to share it. You do this with <meta> tags.

Facebook Share passes along the URL of your page to our servers, which in turn looks up certain HTML tags within it. Those tags are used to display a preview of the page. In order to provide this preview, we always look for the title of the page, a summary of the main content and an image. If there's media content on the page, those media files are also important to identify.
Basic Tags

In order to make sure that the preview is always correctly populated, you should add the tags shown below to the <head> element in your HTML code. If you don't tag your page, Facebook Share will grab the title of your page as specified in the <title> tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.

You can control the exact title, description, and thumbnail that Facebook Share uses by adding the following meta tags to the <head> element in your page:

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

So an example news story could have the following:

<meta property="og:title" content="Smith hails 'unique' Wable legacy" />
<meta property="og:description" content="John Smith claims beautiful football
is the main legacy of Akhil Wable's decade at the club. " />
<meta property="og:image" content="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />

As shown, og:title contains the preview title, og:description contains the preview summary and og:image contains the preview image. Please make sure that none of the content fields contain any HTML markup because it will be stripped out.

The title and description tags are the minimum requirements for any preview, so make sure to include these two.

The og:image is the URL to the image that appears in the Feed story. The thumbnail's width AND height must be at least 50 pixels, and cannot exceed 130x110 pixels. The ratio of both height divided by width and width divided by height (w/h, h/w) cannot exceed 3.0. For example, an image of 126x39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126/39 = 3.23). Images will be resized proportionally.

seolius · 7 Août 2012

pour ma part, il n'y a que cette solution sur https://developers.facebook.com/docs/share/ qui fonctionne.

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

Elleaime · 17 Octobre 2014

Bonjour,

Pour ma part, aucun n'image ne s'affiche! Enfin si, j'ai l'emplacement, mais rien concernant les photos qui sont présentes dans mon article. Je précise, j'ai un blog wordpress (dernière version 4.0), je publie des articles sans problème.
Lorsque je partage le lien sur facebook, j'ai bien le résumé du texte, avec le titre etc, mais dans l'encadré image, un fond gris, comme si mon article ne comprenait aucune photo!
Je ne sais plus quoi faire!
Pouvez vous m'aider?

HawkEye · 17 Octobre 2014

Jette un oeil à l'extension "SEO Ultimate". Pour chaque article, tu peux préciser:

- le titre de la publication
- le texte d'introduction
- l'image à afficher

cf. ce qui est indiqué ci-dessus: ça renseigne les balises opengraph ad hoc.

cyber-avenir · 14 Mai 2015

Bonjour,

Un petit up sur ce post.

Pour mon site de gestion de biens immobiliers, j'utilise Joomla dernière version.

Par contre, si je sélectionne l'url d'une fiche d'un bien, par exemple :
http://grandpalais-immo.fr/vente/12-produit-d-exception-bourgeois-170m ... e-90m.html

Ben facebook ne me prends que le logo et le meta description du site en général.

Quelqu'un saurait il comment indiquer à notre ami Facebook comment :
- récupérer une autre image sauf le logo ?
- le début du descriptif d'une fiche d'un bien ?

D'avance, merci

Bonne journée !!

UsagiYojimbo · 14 Mai 2015

Bonjour,

Comme dit plus haut il faut utiliser les balises open graph. Dans ton cas og:image et og:description.

cyber-avenir · 15 Mai 2015

UsagiYojimbo a dit:
Bonjour,

Comme dit plus haut il faut utiliser les balises open graph. Dans ton cas og:image et og:description.

Bonjour et merci pour l'info

Par contre, saurais tu dans quel(s) fichier(s) je devrais faire ces modifs ?

Bonne journée

cyber-avenir · 16 Mai 2015

UsagiYojimbo a dit:
Bonjour,

Comme dit plus haut il faut utiliser les balises open graph. Dans ton cas og:image et og:description.

Bonjour UsagiYojimbo,

J'ai plusieurs pages contenant à chaque fois un bien immobilier.

Saurais tu m'aiguiller ?
Comment faire pour modifier les balises sur toutes ces pages ?
:s

Sinon, merci et bonne journée

UsagiYojimbo · 16 Mai 2015

Avec Joomla, en utilisant un plugin : http://extensions.joomla.org/profile/extension/site-management/seo-a-m ... open-graph

cyber-avenir · 9 Juin 2015

Bonjour,

Je me permet de relancer le post, car je n'ai toujours pas trouvé d'astuces pour mon cas.
Le développeur du module JEA (Joomla Estate Agency) m'a proposé la solution suivante :

Code:

Pour le problème de la description sur Facebook, il faudrait ajouter la description du bien (ou une partie) dans la balise meta description de votre page.

Ceci peut être accompli de cette façon en collant ce bout de code dans un override ({votre_template}/html/com_jea/property/default.php) :

<? JFactory::getDocument()->setDescription($row->description) ?>

Mais cela ne semble pas marcher

Exemple :
http://www.grandpalais-immo.fr/vente/11-garavan-beau-rdj-avec-terrasse ... ardin.html

Si je mets ce lien sur Facebook, toujours le même résultat:
3 images au pif et descriptif "générique" du site.

Est ce que quelqu'un aurait une idée ???
Please

Bonne journée sinon ^^

Marie-Aude · 9 Juin 2015

Oui

il n'y a pas de balise og: dans ton header. Ce sont ces balises qui permettent d'indiquer titre, description, image et autres éléments à Facebook.

la réponse de ton développeur me semble légèrement à côté de la plaque

cyber-avenir · 10 Juin 2015

Marie-Aude a dit:
Oui il n'y a pas de balise og: dans ton header. Ce sont ces balises qui permettent d'indiquer titre, description, image et autres éléments à Facebook.

la réponse de ton développeur me semble légèrement à côté de la plaque

Ha ok, merci, Marie-Aude, pour la réponse

Je dois contacter le développeur dans la semaine, aurais tu quelques précisions sur ce que je dois lui demander, à tout hasard ?
Merci

zeb · 10 Juin 2015

Dis lui de lire ça : http://www.magicprog.fr/article-7-les-balises-meta-pour-facebook

cyber-avenir · 10 Juin 2015

Bonjour à tous

Merci pour vos réponses.

Après quelques heures hier soir de recherche, il semble qu'il faille activer Open Graph dans Joomla.
J'ai donc rajouté le plug in de Phoca :
http://www.phoca.cz/phoca-open-graph-plugin

Malheureusement, cela ne fonctionne pas .
Tesér avec ce lien :
http://grandpalais-immo.fr/vente/10-menton-garavan-villa-jumelee-vue-m ... scine.html
Ni une image correspondante à ce bien, ni le début de la description.

Là je suis KO, car je ne comprends pas pourquoi sur Joomla 3 cela ne fonctionne pas.

Auriez vous, à tout hasard, une autre suggestion ?

Marie-Aude · 10 Juin 2015

Si tu as déjà partagé Facebook a mis en cache, il faut lui faire "débuguer" la page pour rafraichir le cache

zeb · 11 Juin 2015

Arf !!! avant de penser facebook et OG je regarderais ton code source de page c'est une infamie 8O
Niveau optimisation de page ça dois pas être la fête chez toi.

cyber-avenir · 11 Juin 2015

zeb a dit:
Arf !!! avant de penser facebook et OG je regarderais ton code source de page c'est une infamie 8O
Niveau optimisation de page ça dois pas être la fête chez toi.

C'est à dire ?
Pourrais tu être plus précis ?

J'utilise Joomla et le module JEA (Joomla Estate Agency).
D'où pourrait provenir le problème ?

zeb · 11 Juin 2015

Il n'y a pas de "problème" il y a surtout des pages lourdes, lentes et mal codées.

Nouslesnanas · 10 Avril 2020

Bonjour,

Je me permet de relancer le sujet.
J'ai un soucis avec le partage des articles de mon blog sous blogger.
En effet, j'ai bien des balises og dans le head de mon code html et lorsque je partage ma page d'accueil pas de soucis mais lorsque je souhaite partager un article en particulier c'est l'aperçu de ma page d'accueil qui s'affiche. Par contre le lien dirigé bien vers l'article en question.

Savez vous comment je pourrais régler le soucis?
J'avais vu sur un blog d'astuce un code à ajouter avant le fin du head mais ça ne change rien et woorank détecte un doublon des balises og.

J'y suis depuis plusieurs jours et j'y ai passé des dizaines d'heures...
Je songe presque à faire migrer mon blog sous wordpress...

Merci pour votre aide

WebRankInfo · 10 Avril 2020

quelle est l'URL d'une page avec ce pb ?

Nouslesnanas · 10 Avril 2020

WebRankInfo a dit:
quelle est l'URL d'une page avec ce pb ?

C'est https://www.nouslesnanas.com

theunholy · 7 Mai 2020

Nouslesnanas a dit:
C'est https://www.nouslesnanas.com

Ton logo: 5500x3782 pixels et 12.2mo.

Il est URGENT que tu règles ça.

Nouslesnanas · 7 Mai 2020

theunholy a dit:
Ton logo: 5500x3782 pixels et 12.2mo.

Il est URGENT que tu règles ça.

Trop lourd?

Je viens de migrer il y a quelques semaines sous wordpress du coup afin de régler mon soucis.

theunholy · 7 Mai 2020

Trop lourd, trop grand, trop tout.

theunholy · 7 Mai 2020

Si ton logo a l'air bien dimensionné, en réalité, c'est ça que ton site affiche: https://nouslesnanas.com/wp-content/uploads/2020/04/banniere-nouslesnanas.png

Nouslesnanas · 7 Mai 2020

theunholy a dit:
Si ton logo a l'air bien dimensionné, en réalité, c'est ça que ton site affiche: https://nouslesnanas.com/wp-content/uploads/2020/04/banniere-nouslesnanas.png

Quelle taille maximum conseilles-tu pour une bannière?

theunholy · 7 Mai 2020

J'ai fait une impression écran de ton site et j'ai isolé le logo, ça donne 321x213.

Nouslesnanas · 8 Mai 2020

theunholy a dit:
J'ai fait une impression écran de ton site et j'ai isolé le logo, ça donne 321x213.

Merci! Je vais voir ce que je peux faire dans le weekend

J'imagine que ça va permettre un peu plus de rapidité...

theunholy · 8 Mai 2020

Une fois redimensionné, ton logo passera de 12.2mo à 15-20ko, soit grosso modo 0.15% du poids initial.
Alors oui, ça va permettre "un peu plus de rapidité"

Nouslesnanas · 11 Mai 2020

theunholy a dit:
Une fois redimensionné, ton logo passera de 12.2mo à 15-20ko, soit grosso modo 0.15% du poids initial.
Alors oui, ça va permettre "un peu plus de rapidité"

Voilà, j'ai enfin pris le temps de réduire la taille

Merci!

theunholy · 11 Mai 2020

12.2mo avant, 180ko après, c'est nettement mieux !
Histoire de pinailler, 180ko, c'est encore beaucoup pour un logo. Quand t'auras quelques minutes, ce serait bien que t'optimises un peu, mais là au moins, il n'y a plus urgence.

vincentvoyage · 22 Novembre 2020

Prax a dit:
Il suffit de mettre ce link dans le head et de spécifier l'image souhaitée.
<link rel="image_src" href="http://adresseimg.png" />

Hello!
Je remonte un peu ce vieux topic. Je monte une boutique sous Prestashop 1.7 qui, de base va coller un logo non resizé comme image de partage sur les réseaux sociaux. J'ai donc appliqué dans le header.tpl ce qui est évoqué ci-dessus, et ça ne fonctionne pas vraiment.
Comme on peut le voir dans les captures, quand j'insère le lien, il y a bien la bonne image qui s'affiche, mais quand je valide, c'est la version avec le logo qui se met. Pourtant les données FB semblent bien indiquer que la bonne image est prise en compte, donc je suis un peu perdu

Si quelqu'un a une idée, ça serait avec grand plaisir

Merci !

vincentvoyage · 22 Novembre 2020

Problème résolu! Il faut en fait modifier le head.tpl du thème, rajouter la valeur <meta property="og:image" content=... tout en haut du fichier pour que FB le voit avant de prendre une autre valeur, forcée par le thème. J'ai deux og:image, mais c'est le premier qui passe.

<meta property="og:image" content="https://shop.vincent.voyage/img/logo.jpg" />
....
<meta property="og:image" content="https://shop.vincent.voyage/img/vincent-voyage-logo-1606074648.jpg" />

Christine-revenus-passifs · 8 Décembre 2020

Merci @vincentvoyage, j'étais justement à court d'idée pour faire apparaitre ma vignette

.