facebook sharer

Malgré le grand âge de Facebook, tous les acteurs de l’internet ne savent pas encore comment partager un lien sur le réseau social.

Il existe plusieurs méthodes, cependant je ne vous expliquerais que la plus rapide, qui ne nécessite pas de créer une application Facebook, ni même d’installer ou de charger des SDK sur votre site.

Le Sharer Facebook

La manière la plus simple et la plus rapide de créer un bouton de partage Facebook, c’est de passer par le « sharer ». Il s’agit en fait d’une url qui permet de partager les pages en injectant juste un paramètre.

Exemple :

Le lien suivant partagera cet article :

<a href="https://www.facebook.com/sharer/sharer.php?u=www.techrevolutions.fr%2Ftutorial-creer-un-bouton-de-partage-facebook-dynamique-en-3-minutes" target="_blank">lien</a>

Il vous faudra ensuite intégrer ce lien correctement via du JS pour ouvrir la popup que tout le monde connait

Utiliser le Sharer Facebook

Pour ouvrir la popup, rien de plus simple, il suffit d’utiliser un onclick sur une image, un texte, un div, ou ce que vous voulez.

Voici un exemple de code avec une image

<img src="https://www.techrevolutions.fr/wp-content/plugins/social-media-widget/images/default/32/facebook.png" alt="Facebook share" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=www.techrevolutions.fr%2Ftutorial-creer-un-bouton-de-partage-facebook-dynamique-en-3-minutes', 'facebook_share', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');">

qui donnera
Facebook share

Vous noterez que l’url de votre site ne contient pas le protocole (http / https) et est urlencodé. Un outil permet de visualiser vos url au format encodé sur le site meyerweb.com.

Ne pas oublier les tag Open graph Facebook

Facebook fonctionne avec des tags open graph. Ceux-ci indiqueront au sharer ce qui sera affiché sur la « carte Facebook » lors du partage.

Voici le code à mettre entre les balises <head> de votre site :

<meta content="http://canonical-url-com-de-votre-article" property="og:url">
<meta content="http://url-absolue-de-votre-image" property="og:image"> <!-- image en 200x200px -->
<meta content="Titre de l'article" property="og:title">;
<meta content="Description de l'article" property="og:description">

Et voilà, c’est fini !

Vous aimez cet article ? Partagez le.

By TechRevolutions| 4 Comments | Réseaux sociaux, Tutoriaux
2