Facebook Like, méthode de partage
Facebook a rajouté tout récemment de nouvelles fonctionnalités à son bouton like. Ce bouton — un peu le cheval de Troie de Facebook sur le web — devient maintenant une alternative intéressante, et obligatoire, au Facebook Share. Il faut dire qu'avant le partage se limitait à une simple ligne sur le profil du likeur. Voyons ce qui change et comment l'intégrer sur Wordpress par exemple.
Désormais le simple fait de “ liker ” une page, pourra poster sur votre profil tout un tas d'informations. Le titre de la page, une description et pourquoi pas une image. En fait c'est exactement le même modèle de ce que faisait le vieux bouton bleu moche Facebook Share.
Le bouton like fonctionne avec le protocole Open Graph. Concrètement ce protocole permet à Facebook de s'insérer dans n'importe quel site web. Dans ce protocole, Facebook a définit certaines balises Meta qui vont contenir la carte d'identité de la page web. Le titre, l'URL, la description, la catégorie etc.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description" content="A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons."/>
...
</head>
...
</html>
Vous pouvez trouver une liste exhaustive de ces attributs sur la documentation de Facebook.
Ces éléments sont nécessaires pour profiter à 100% du widget Facebook. Le bouton en lui-même s'insère facilement.
<script src="http://connect.facebook.net/fr_FR/all.js#xfbml=1"></script>
<fb:like href="http://phollow.fr" show_faces="true" width="450"></fb:like>
L'attribut href, vous l'avez compris, pointe vers la page à partager. C'est sur cette même page que les balises Open Graph devront être. Maintenant prenant l'exemple d'un blog, sous Wordpress. Chacun de vos articles aura dans le header les balises Meta qui le décriront en gros, et un bouton like présent à la fin du billet pour le partager. Ce qui peut être sympa, c'est de récupérer une image de l'article en question pour l'afficher lors du partage.
Pour cela il faut modifier un peu le thème du blog. On ouvre functions.php, et on ajoute cette fonction :
function premiere_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('//i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Si il n'y a pas d'image dans le billet
$first_img = "/images/default.jpg"; // On en met une par défaut
}
return $first_img;
}
Avec cette fonction, on va maintenant éditer le fichier header.php du thème pour modifier les balises meta.
<meta property="og:type" content="blog" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:country_name" content="French" />
<meta property="fb:admins" content="rydgel" />
<meta property="fb:app_id" content="101739241646"/>
<meta property="og:email" content="rydgel@phollow.fr" />
<?php if(is_single()) :?>
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:image" content="<?php echo premiere_image() ?>"/>
<?php endif; ?>
Et voilà ça devrait suffire !
Maintenant on peut se poser la question de la pertinence de la chose. On avait à la base l'action de partager et l'action d'aimer. Désormais le simple fait d'aimer un truc, nous le fait partager. Admettons. Mais si je veux partager sans aimer ?
