Ajouter le nouveau bouton Facebook Send à vos articles

in Geek Inside, WordPress

Facebook a annoncé ce matin le lancement d’un nouveau bouton similaire au bouton Like, mais vous permettant de partager un article via Facebook Messages au lieu de le publier sur votre mur. Voyons donc comment ajouter ce bouton très facilement.

Ce tutoriel se déroule en deux étapes. SI vous avez déjà installé le bouton Like sur votre site, je vous conseille de passer directement à l’étape 2 (ou 3 !)

1. Ajouter le fichier Javascript de Facebook

Dans un premier temps, vous allez devoir vous créer votre propre application sur Facebook. Elle vous permettra de pouvoir tracer le nombre de partages de vos articles, ainsi que toutes les stats disponibles avec Facebook Insights.
Pour faire cela, rien de plus simple : rendez-vous sur la page de création d’application :

Une fois que cela est fait, il vous reste une étape : rendez-vous dans la partie “Web Site”, et ajoutez votre propre nom de domaine.

Création d'application Facebook

C’est fait ? Alors ajoutez ce bout de code au fichier functions.php de votre thème. Attention de bien y copier vottre ID d’application, que vous trouverez sur la page de réglages de votre app.

// Appeler l'API de Facebook dans le footer
function werewp_facebook_api() { ?>
		<div id="fb-root"></div>
		<script>
		  window.fbAsyncInit = function() {
		    FB.init({appId:ID-DE-VOTRE-APPLICATION, status: true, cookie: true,
		             xfbml: true});
		  };
		  (function() {
		    var e = document.createElement('script'); e.async = true;
		    e.src = document.location.protocol +
		      '//connect.facebook.net/fr_FR/all.js';
		    document.getElementById('fb-root').appendChild(e);
		  }());
		</script>
<?php }
add_action( 'wp_footer', 'werewp_facebook_api' );

Et voilà : nous pouvons maintenant ajouter le bouton Send, ou n’importe quel autre widget Facebook d’ailleurs.

2. Ajouter le bouton Send au bas de votre article

Le plus gros du travail est maintenant effectué, nous allons donc simplement créer une fonction qui va ajouter le bouton Send sous le contenu de chacun de nos articles. Nous ajouterons cette fonction à notre fichier functions.php comme précédemment. Bien sûr, si vous souhaitez ajouter ce bouton ailleurs sur votre page, il vous suffira d’utiliser un hook autre que the_content, que j’utilise pour notre exemple :

function werewp_facebook_send() {
	echo '<fb:send href="'.get_permalink().'"></fb:send>';
}
add_action( 'the_content', 'werewp_facebook_send' );

C’est tout. Vous devriez désormais voir le bouton apparaître au bas de vos articles !

3. C’est trop compliqué ?

Vous avez déjà un bouton Like et vous souhaiteriez simplement ajouter le nouveau bouton Send à la droite de celui-ci ? C’est possible d’une façon très simple : ajoutez le paramètre send=”true” à votre bouton et c’est fait !

Si vous utilisez la version FBML, cela ressemblera à ceci :

<fb:like href="<?php the_permalink(); ?>" send="true" width="450" show_faces="true" font=""></fb:like>

Si vous avez des questions, n’hésitez pas à me les poser en commentaires !

Source : Facebook Developers Blog : The Send Button, Because Sometimes It’s Private