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

WRInaute accro
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
 
WRInaute accro
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!
 
WRInaute passionné
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 ...
 
WRInaute accro
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.
 
WRInaute accro
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
 
Nouveau WRInaute
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.
 
WRInaute accro
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" />

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

Bonne journée.
Wonderful, merci beaucoup!
 
WRInaute passionné
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.
 
Nouveau WRInaute
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?
 
Olivier Duffez (admin)
Membre du personnel
spout a dit:

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
 
Nouveau WRInaute
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.
 
Nouveau WRInaute
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?
 
WRInaute accro
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.
 
WRInaute impliqué
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 !!
 
WRInaute impliqué
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
 
WRInaute impliqué
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 :)
 
WRInaute impliqué
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 ^^
 
WRInaute accro
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
 
WRInaute impliqué
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 :)
 
WRInaute impliqué
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 ?

:)
 
WRInaute accro
Si tu as déjà partagé Facebook a mis en cache, il faut lui faire "débuguer" la page pour rafraichir le cache
 
WRInaute accro
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.
 
WRInaute impliqué
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 ?
:)
 
WRInaute accro
Il n'y a pas de "problème" il y a surtout des pages lourdes, lentes et mal codées.
 
Nouveau WRInaute
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 :)
 
WRInaute impliqué
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é" :D
 
WRInaute impliqué
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.
 
Nouveau WRInaute
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 :D
Si quelqu'un a une idée, ça serait avec grand plaisir :) Merci !
upload_2020-11-22_20-21-10.png upload_2020-11-22_20-21-36.png upload_2020-11-22_20-20-14.png
 
Nouveau WRInaute
Discussions similaires
Haut