La minute Geek – Utiliser le bouton “J’aime” pour la promo de votre groupe sur Facebook

Aujourd’hui, nous inaugurons une nouvelle rubrique, La minute Geek. Alors qu’est ce que la minute Geek? c’est l’innovation technologique expliquée aux artistes au service de leur créativité.

Et c’est le grand, le beau, le fort Benoit Tersiguel qui s’y colle. Alors qui est Benoit Tersiguel? En dehors d’être le fondateur de Radio-Blog Club (et ouaih, ET OUAIH), Benoit est aussi le co-fondateur de Pigalle Valley avec Emily Gonneau d’Unicum Music et moi-même, et accessoirement le propriétaire de mes bureaux. C’est aussi un geek avec une vraie vision de la musique et de son marché, une expérience et de sacrées compétences. L’objectif de cette rubrique, tenter de rendre pédagogique ce qui pourrait vous paraître trop technique, afin de vous aider à developper et améliorer votre présence sur le web.

Cette semaine, on attaque avec Facebook.

Comment fonctionne le bouton “J’aime” de Facebook ?


Comme la plupart des artistes, vous (ou votre Webmaster) avez ajouté un bouton “J’aime” sur la page web de votre groupe. Il existe plusieurs paramètres, souvent ignorés, qui permettent d’améliorer l’utilisation de ce bouton. Facebook met à votre disposition un formulaire qui permet de régler quelques un de ces paramètres : Social Plugins / Like Button.

Le premier paramètre “URL to like” est le lien associé à ce bouton.  Par défaut, l’url associé est la page où se trouve le bouton. Vous pouvez aussi mettre le l’url de votre site web ou l’url de votre choix.

Astuce : Si vous associez l’url de votre page Facebook avec un bouton “J’aime”, l’utilisateur qui clique sur ce bouton deviendra automatiquement “fan” de votre page Facebook.

Lorsque l’utilisateur clique sur le bouton “J’aime”, Facebook envoie un robot visiter le lien associé, récupère les  metadonnées définis dans les meta-tags de la page et affiche ces informations sur le mur de l’utilisateur. Ces metadonnées doivent contenir un titre et la description de la page. Vous pouvez aussi y ajouter une image, un son ou encore une vidéo.

Exemple :


Configurer les metadonnées :


Les metadonnées utilisées par Facebook sont décrites dans un document appelé Open Graph Protocole. Ces métadonnées sont définis dans les meta-tags qui se trouve dans le header (entre le tag <head> et </head>) de votre page HTML.

Les metadonnées de base :

og:url – L’url de votre page.
og:title – Le nom de votre groupe.
og:description – La description de votre groupe. C’est le texte qui va s’afficher sur le mur.
og:image – L’image qui représente votre groupe. C’est l’image qui va s’afficher sur le mur.
og:type – Le type de la page web :

  • band (pour un groupe)
  • musician (pour un artiste)
  • album
  • song

og:admins – Votre identifiant Facebook (Optionnel).

Exemple :

<html>
<head>
...
<meta property="og:url" content="http://bj.mu/concorde/">
<meta property="og:title" content="Concorde">
<meta property="og:description" content="Concorde band Official website, DOWNLOAD the new single Candy Boy.">
<meta property="og:image" content="http://www.withconcorde.com/imgs/photocb.jpg">
<meta property="og:type" content="band">
...
</head>
...
</html>

Ajouter des liens dans la description :

Vous pouvez ajouter des URL dans la metadonnée og:description. Ces URL seront automatiquement transformé en lien quand ils s’afficheront sur le mur Facebook de l’utilisateur.
Pensez à utiliser un raccourcisseur d’URL, comme bit.ly, pour obtenir des statistiques sur le nombre de clics sur ces liens.

Exemple :

<meta property="og:description" content="&larr; Cliquez ici pour découvrir le dernier clip de Concorde réalisé par Akroe. | L'EP de Concorde en vente sur iTunes &rarr; http://tinyurl.com/withconcorde | Prochain concert le lundi 9 mai au Baron &rarr; http://on.fb.me/fegi7a">

Tester :

Cliquez sur le bouton "j'aime" sur cette page web :
http://bj.mu/concorde/01/

Ajouter un  son Soundcloud :

Vous pouvez ajouter un son Soundcloud qui s’affichera sur le mur de la personne qui “like” votre page web. Pour cela, allez sur la page Soundcloud de votre choix et affichez le code source de la page.  Copiez les meta-tags og:video, og:video:type, og:video:height et og:video:width. Collez ces meta-tags  sous les meta-tags de base.

Exemple :

<html>
<head>
...
[Meta-tags de base]
<meta content="98" property="og:video:height" />
<meta content="460" property="og:video:width" />
<meta content="application/x-shockwave-flash" property="og:video:type" />
<meta content="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F14213868&amp;color=3b5998&amp;auto_play=true&amp;show_artwork=false" property="og:video" />
...
</head>
...
</html>

Tester :

Cliquez sur le bouton "j'aime" sur cette page web :
http://bj.mu/concorde/sound001/

Ajouter une vidéo Youtube :

Vous pouvez aussi afficher une vidéo Youtube pour, par exemple, présenter votre dernier clip. La méthode est la même que pour Soundcloud, affichez le code source de la page Youtube de votre clip vidéo. Copiez/collez les meta-tags og:video, og:video:type, og:video:height et og:video:width sous les meta-tags de base.

Exemple :

<html>
<head>
...
[Meta-tags de base]
<meta property="og:video" content="http://www.youtube.com/v/8OgpNs636X4?version=3&amp;autoplay=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="398">
<meta property="og:video:height" content="264">
...
</head>
...
</html>

Tester :

Cliquez sur le bouton "j'aime" sur cette page web :
http://bj.mu/concorde/video001/

Astuce : Facebook met à votre disposition un outil, URL Linter, qui permet de vérifier les données récupérées par le robot de Facebook.

Autre astuce : Facebook sauvegarde vos metadonnées sur son serveur (son cache) quand vous cliquez sur le bouton “j’aime”. Quand vous modifiez vos metadonnées, Facebook mettra quelques heures pour prendre en compte ces changements. Donc pour tester ces modifications, changez l’url de la page.

Ajouter votre groupe dans les centres d’interet :

Facebook utilise les metadonnées des objets que vous “likez” pour les classer dans vos centres d’intérêt. Ces centres d’intérêt sont affichés dans l’onglet “info” de votre profil.

Dans notre exemple, quand un utilisateur clique sur le bouton “j’aime”, Facebook utilise le metatag og:image et og:title pour ajouter l’objet dans la catégorie “musique” de ses centres d’intérêt.

Illustration photo: “We want more”

Inscrivez-vous à notre newsletter

et recevez les derniers articles du blog tous les lundis!

I agree to have my personal information transfered to MailChimp ( more information )

Nous respectons votre vie privée. Vous pouvez vous désabonner à tout moment.

About Benoit Tersiguel

Benoit Tersiguel travaille dans le secteur du web depuis plus de 10 ans. Il créé Radio.blog.club en 2005, le premier site de streaming musical en France. Depuis la fermeture de Radio.blog.club en 2008, il accompagne les artistes pour la promotion et la distribution numérique de leurs oeuvres.

17 comments

J’ai oublié de le mettre dans mon post, mais pour que la vidéo démarre toute seule, il faut ajouter &autoplay=1 à la fin du meta-tag og:video :

@sardine N’hésitez pas à tester votre page sur URL Linter :
http://developers.facebook.com/tools/lint/?url=http%3A%2F%2Frobertoandthemoods.free.fr%2Ftestlikerob2.html

Dans votre cas il affiche une erreur : “Le champ fb :admins doit être une liste d’identificateurs de profils séparés par des virgules (pouvant également contenir des espaces si vous le souhaitez). Cela doit ressembler par exemple à /^\s*[0-9]+(\s*,\s*[0-9]+)*\s*$/. Vous avez écrit « RobertoMood »”

Vous devez entrer votre identifiant numérique. Vous pouvez le récupérer ici :
http://graph.facebook.com/RobertoMood

Merci de votre réponse, mais j’ai testé et j’ai toujours la même erreur …

Vérifiez que vous avez les bonnes metadonnées sur l’url qui se trouve dans og:url.

Merci, bon j’ai bidouillé pas mal de truc maintenant ça marche , en revanche est-il possible de faire un like sur un site web, mais qui en plus, ajoute un fan automatiquement sur la page facebook ?

J’imagine que vous parlez d’un plugin pour WordPress.
Je n’ai pas encore trouvé de plugins qui permettent d’éditer les meta-tags.

Bonjour Benoit,

Il existe un plugin WordPress qui permet de faire cela. WP Facebook Open Graph Protocol http://wordpress.org/extend/plugins/wp-facebook-open-graph-protocol/
Cependant, je n’ai pas réussi à le faire fonctionner sans créer une Application Facebook pour mon site Web. Idem pour ce qui est de mes tests avec une page HTML. As-tu créé une Application Facebook pour parvenir aux résultats montrés ci-dessus ? J’aimerais pouvoir éviter de le faire à l’avenir, ça rajoute une étape et ça devient fastidieux !

Bonjour,
Je voudrais qu’à chaque fois qu’un ami se connecte à mon myspace (alors qu’il est logué sur fb) il aime automatiquement une page fan Facebook.
Est-ce faisable ? Et comment dois-je m’y prendre ?

Merci d’avance.

Bonjour, je sais que cet article commence à dater mais j’espère néanmoins avoir une réponse… voilà je viens de créer une page sur demande pour un client qui possède une librairie. La page est faite, j’ai publié des infos dessus aucun souci, seulement de cette page impossible de dire “j’aime” par exemple un auteur, le bouton “j’aime” n’apparaît nulle part…. est-ce parce qu’il faut obligatoirement créer un compte utilisateur directement pour la personne et après choisir d’utiliser FB en tant que page ou que personne ?
J’espère que ma demande est assez claire, merci à tous !

Leave a Reply

*