INDEX
Les dimensions des principaux éléments (Facebook version Timeline
Cover banner
Les images de couverture doivent faire au moins 399 pixels de large et ne doivent pas contenir :
-* De prix ou d’informations d’achat, comme « 40 % de réduction » ou « Télécharger ici »
-* D’informations de contact, telles qu’une adresse URL, une adresse électronique, une adresse postale ou autres, destinées à la section À propos de votre Page
-* De références aux éléments de l’interface utilisateur, tels que J’aime ou Partager, ni d’autres fonctions du site Facebook
-* D’appels à l’action, comme « Dès maintenant » ou « Dites-le à vos amis »
Pour une qualité d’image optimale et un téléchargement rapide pour votre Page, chargez un fichier JPG sRGB de 851 pixels de large, 315 pixels de haut et moins de 100 Ko.
Dimensions de la page / de l’onglet d’une app
– Version narrow : 520px
– Version wide (comme disait Oscar) : 810px
Images / Icônes
– Photo de profil de la Page : 180x180px
– Image de l’onglet Page : 111x74px
– Logo : 75x75px
– Icone : 16x16px
Balises version Open Graph
En savoir plus sur Open Graph : https://developers.facebook.com/docs/share/
<meta property="og:title" content="" /> <meta property="og:description" content="" /> <meta property="og:image" content="xxxx.jpg" /> <meta property="og:video" content="https://www.youtube.com/v/xxxx" /> <meta property="og:video:width" content="640" /> <meta property="og:video:height" content="480" /> <meta property="og:video:type" content="application/x-shockwave-flash" />
Balises version classique
Pour faire apparaitre des infos relatives à votre site lors du partage, il faut remplir ça :
<meta name="title" content="Titre" /> <meta name="description" content="Texte /> <link rel="image_src" href="URL absolute vers l'image" />
Pour obtenir ça :
Pingback: ITALIC™ » Nos bonnes pratiques dév front (HTML/CSS/JS)
J’avoue c’est pas le screen le plus drôle de la terre pour illustrer mon article.
Nevermind, that happens.
Bonjour,
j’ai une petite question concernant les informations qui apparaissent dans la fenêtre de partage Facebook.
Je n’ai rien du tout, si ce n’est le nom de mon site, et sa favicon…
J’ai essayé de mettre dans les Meta « classiques » et les OpenGraph, mais rien n’y change. Ni Titre, ni description, ni image…
Qu’est-ce que je n’ai pas bien fait???
Merci de ton aide
Sans connaitre ton code c’est difficile de répondre.
Déjà, qu’est-ce qui s’affiche quand tu check ta page sur https://developers.facebook.com/tools/debug/ ?
Déjà, merci de répondre si vite!
Pour ce qui est du code, et du Debugg Facebook, voir ici:
https://fr.openclassrooms.com/forum/sujet/bouton-partager-facebook-1
Je ne vois pas de balise dans le code que tu as mis c’est normal ?
De quels types de balises parles-tu?
J’ai ajouté le namespace « https://ogp.me/ns# » au tag html, j’ai mis les Meta dans , et le et le du bouton Facebook dans .
Bonjour,
Connaissez-vous le code à mettre dans le pour automatiser le choix de l’image lors du partage facebook?
En fait, je voudrais partager l’article d’un blog avec la photo en relation avec l’article, ç chaque fois, j’ai un logo par défaut,
Exemple : https://etapes.com/100-creations-pour-mettre-en-valeur-le-design
Sur ce site, quand tu partages sur FB, l’image est celle de l’article, pas un logo par défaut…
Amicalement Christophe
Bonjour,
désolé de cette réponse tardive. Pour les autres, il faut renseigner la propriété og:image dans les balises meta :
<meta property="og:description" content="Grand Jeu " />
<meta property="og:description" content="Testez vos connaissances et tentez de gagner la nouvelle Classe A !" />
<meta property="og:image" content="https://xxxxx.fr/assets/images/pageProduct-8.jpg" />
Bonjour,
je tiens un blog , et lorsque je désir partager sur facebook n’importe quel article, c’est toujours la meme photo d’illustration qui apparait a défault de la premiere de l’article.
voici le debogueur FB https://developers.facebook.com/tools/debug/og/object?q=www.lesgommettesdemelo.com
j’ai tenté de mettre les Meta dans l’artcile dans la partie html mais ca ne fonctionne pas . Toujours la meme photo qui revient .
Merci pour votre aide
Bonjour, la cause et la solution sont indiqués dans la partie « Warning », en l’occurrence : The ‘og:image’ property should be explicitly provided, even if a value can be inferred from other tags.
Suivez ce tutoriel pour installer les balises OpenGraph sur la plate-forme Blogspot : https://blogger-hints-and-tips.blogspot.fr/2013/06/add-facebook-open-graph-tags-to-blogger-for-better-looking-shares-and-likes.html
Cdt
Germain