rss
twitter
  • Showcase
  • Carrières
  • Support
  • GitLab
  • Espace client
  • Contact

Trucs et astuces Facebook : balises meta, open graph, dimensions…

11

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 :

DATE 09 Nov 2011
by : Germain
tag : featured
Author / Auteur

Social Share / Partager

    11 Comments
    1. Pingback: ITALIC™ » Nos bonnes pratiques dév front (HTML/CSS/JS)

    2. admin_i 18 décembre 2012 at 15 h 16 min Répondre

      J’avoue c’est pas le screen le plus drôle de la terre pour illustrer mon article.
      Nevermind, that happens.

    3. Brice 19 juin 2014 at 10 h 40 min Répondre

      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

      • Germain 19 juin 2014 at 13 h 38 min Répondre

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

    4. Brice 19 juin 2014 at 14 h 10 min Répondre

      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

    5. Germain 19 juin 2014 at 15 h 16 min Répondre

      Je ne vois pas de balise dans le code que tu as mis c’est normal ?

    6. Brice 19 juin 2014 at 15 h 26 min Répondre

      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 .

    7. Christophe 9 juin 2015 at 8 h 49 min Répondre

      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

      • Germain 21 octobre 2015 at 21 h 59 min Répondre

        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" />

    8. jonathan 29 janvier 2016 at 15 h 43 min Répondre

      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

      • Germain 30 janvier 2016 at 12 h 27 min Répondre

        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

    Leave a Reply / Répondre Annuler la réponse

    *
    *

    More in Front-end : HTML, CSS

    • Pense-bête Apache Server-Side Includes (SSI)
    • Chrome : émuler une CSS media print
    • Responsive CSS targetting
    • Récupérer infos et vignettes d’une vidéo YouTube

    Search the blog

    Blog categories

    • Workflow (1)
    • Front-end : HTML, CSS (13)
    • Front-end : javascript, jQuery (33)
    • Back-end : PHP, CMS (42)
    • Back-end : SQL, MySQL (20)
    • Sysadmin : Linux, Apache, GIT (75)
    • Designers : tools, advice (2)
    • Desktop : OS X (37)
    • Desktop : Microsoft (12)
    • Uncategorized (8)

    ITALIC™ Resources

    • Paramètres de connexion au serveur mail
    • Graphistes : séduire un développeur web
    • Dév front : nos bonnes pratiques
    • Mailing : nos (bonnes ?) pratiques
    • Environnement de travail Mac

    Recent posts

    • Autoriser le chargement de contenus mixtes non-https dans Chrome (Mac)
    • Afficher les logs MySQL
    • Recevoir un mail lors de la connexion root à un serveur
    • Changer l’interclassement de plusieurs tables MySQL à la fois (ou presque
    • Maildev : tester l’envoi de mails durant ses développements
    © 2008-2017 ITALIC™ • 8 bis rue Abel • 75012 PARIS • Tel +33 (0)1 48 44 46 35 • RCS PARIS 508 228 772 • Powered by WordPress & GoodLayers
    Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site web.
    Cookie settingsACCEPTER
    Manage consent

    Privacy Overview

    This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
    Necessary
    Toujours activé
    Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
    Non-necessary
    Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
    Enregistrer & appliquer