Facebook : Like/Partage
395 J'aime !

Facebook : Like/Partage

Publié par Yann GROSYEUX

L'intégration aux réseaux sociaux figure dans le B A-BA d'un bon projet web : visibilité, audience, linking. Petite explication sur l'intégration du poids lourd dans les faits.

Il existe plusieurs manières d'intégrer Facebook sur sa plateforme : utilisation de l'API, utilisation de widgets fournis par Facebook. Pour l'instant, je n'ai pas eu besoin d'utiliser l'API : l'interface et la manière d'intégrer les widgets me vont parfaitement bien.

 

Voici deux contextes d'intégration qui se présentent régulièrement dans le développement d'un site :

 

Intégration du widget Like/Share

L'assistant pour le widget est ici : https://developers.facebook.com/docs/plugins/like-box-for-pages 

 

Objectifs :

  • Communiquer via Facebook sur une page du site web 
  • Suivre le compteur de partage et de succès d'une page du site

 

Pré-requis : 

 

Méthode :

Facebook propose différentes options pour personnaliser le widget, suivant des paramètres de dimension (largeur), d'action (partager ou recommander, inclure le bouton partager) ou de contenu (4 templates, affichage des likeurs). On va donc avoir sans paramétrage particulier un widget qui ressemble à ça :

integration-fb-lf-base

 

Une fois vos options choisies, cliquez sur Get Code et le code est affiché dans une popup. Il est constitué de l'appel au SDK Facebook, et du code à positionner là ou vous souhaitez afficher les boutons Aimer/Partager :

integration-fb-lf-code

 

Jusque là, rien de bien compliqué.

 

Là où il va falloir être carré, ce sont sur les meta-tags OpenGraph. Ces petites bêtes là n'ont rien de bien compliqué, mais mal ou insuffisament renseignées, vous allez vous crisper lors d'une 404 sur le bouton Partager... Ces meta-tags sont à intégrer dans la balise HEAD de votre page. Les données sont dynamiques selon la page dans laquelle vous vous situez sur le site. 

  • og:title Intitulé de la page du site (ex: Oreros Online > Only lovers left alive) - Ne doit pas contenir le nom d'une marque
  • og:site_name Intitulé du site (ex: Oreros Online) - Cette information ne concerne pas le nom de domaine, mais bien le nom du site
  • og:url URL absolue d'accès à la page (ex: http://www.oreros-online.com/blog/2014/billets/31/only-lovers-left-alive.html) - Ne doit pas contenir de variables de session ou de paramètres utilisateur
  • og:description Description de la page en deux grandes phrases
  • og:image URL absolue de l'image liée à la page (ex: https://media.oreros-online.com/blog/2014/only-lovers-left-alive-wallpaper.jpg) - Facebook recommande des images d'une dimension d'au moins 1200 x 630px (tout à fait adaptée au web...
  • fb:app_id Votre identifiant d'application Facebook (j'ai trouvé le mien en suivant le tuto Yahoo! dispo ici)

 

Ca nous donne ça :

<meta property="fb:app_id" content="139065556192465">
<meta property="og:title" content="OrErOs OnLine > Only lovers left alive">
<meta property="og:site_name" content="OrErOs OnLine">
<meta property="og:url" content="http://www.oreros-online.com/blog/2014/billets/31/only-lovers-left-alive.html">
<meta property="og:description" content="Dans les villes romantiques et désolées que sont Détroit et Tanger, Adam, un musicien underground, profondément déprimé par la tournure qu’ont prise les activités humaines, retrouve Eve, son amante.">
<meta property="og:image" content="https://media.oreros-online.com/blog/2014/only-lovers-left-alive-wallpaper.jpg">
<meta property="og:type" content="article">

 

Il existe d'autres meta-tags facultatifs (notamment dans le cas de données multimédia) dont le détail figure dans la documentation Facebook. En cas de problème, utilisez l'outil de debug fourni par Facebook https://developers.facebook.com/tools/debug/og/object/

 

Une fois le widget intégré et les meta-tags OpenGraph renseigné, ça donne ça quand un internaute va cliquer sur Partager :

 

integration-fb-lb-partager

 

En bref, c'est la classe ! 

 

 

Intégration du widget Like Box

Concrètement, ça passe ici : https://developers.facebook.com/docs/plugins/like-box-for-pages 

 

Objectifs :

  • Assurer une visibilité sur votre site web, de votre page Facebook (elle constitue plus qu'un relais du site, c'est une extension) 
  • Travailler le maillage social (mon pote aime aussi)

Pré-requis : 

Méthode :

Facebook propose différentes options pour personnaliser le widget, suivant des paramètres de dimension (largeur, hauteur), d'apparence (affichage ou non de la bordure ou du titre, thème clair/foncé) ou de contenu (afficher les likeurs, afficher les posts de la page Facebook).

 

De base, ça va ressembler à ça :

integration-fb-lb-base

 

Une fois vos options choisies, cliquez sur Get Code et youplaboum : plus qu'à intégrer.

integration-fb-lb-code

 

Et le résultat :

integration-fb-lb-custom

D'un point de vue positionnement, l'idéal est de l'avoir dans une barre latérale pour les pages de contenu et/ou dans le footer de la page d'accueil.

395 J'aime !

Un commentaire ? Réagissez !