Tél: +33 6 65 72 79 70 

Tél: +33 6 65 72 79 70 Email: fouad@prestation-site-internet.com

Personnaliser les boutons de partage des réseaux sociaux

Vous vous êtes surement déjà posé la question mais comment personnaliser les boutons de partage des réseaux sociaux ? Moi personnellement j’en ai eu marre d’avoir des boutons de différentes tailles pour chaque réseau social, des boutons qui avaient du mal à s’aligner de manière ergonomique. C’est pourquoi après quelques recherches je me décide à publier cet article en même temps que je le fais pour moi même, cela me permettra d’expliquer les différentes étapes au fur et à mesure de l’évolution de mon travail.

Personnaliser le bouton de partage avec compteur de Facebook.

Le principe de base est le même pour chaque réseau social, il faut tout d’abord récupérer l’information du compteur et ensuite placer le code de partage, le tout accompagné d’un bouton qu’on aura choisit au préalable pour son bel aspect.

Pour récupérer cette information grâce à JSON il suffit de faire appel à l’opengraph de google via cette url:

http://graph.facebook.com/?id=http://www.prestation-site-internet.com
Dans votre cas il suffira de remplacer id=http://www.prestation-site-internet.com par id=URLdevotrepage

Note: Pour récupérer le nombre de like d’une page facebook il vous faudra alors remplacer URLdevotresite par l’url de votre page facebook, vous y trouverez également d’autres informations telles que l’image de couverture, le nombre de personnes qui en parlent, bref tout ce qui concerne votre page sur facebook.

Note2: Vous l’aurez compris dans le cadre d’une utilisation sur un de vos site, il vous faudra générer l’url de la page en cours de manière automatique via PHP, OU Jquery par exemple.

 

Donc il nous suffit désormais de récupérer ce chiffre via JSON grâce à la bibliothèque jQuery comme suit:

//on attend que la bibliothèque JQuery soit bien chargée
jQuery(document).ready(function() {

//on définit les variables qui engloberont le nombre de shares
avantcompteur = '<span class="sharing-button-count">';
aprescompteur = "</span>";

//on appelle l'open graph de facebook qui permet de récupérer le nombre de shares et de likes
jQuery.getJSON("http://graph.facebook.com/?id=URLdelapageencours&callback=?", function(data) {

//on s'assure de bien avoir récupérer au moins une information, ou des likes ou des shares
if(((data.likes != 0) && (data.likes != undefined) && (data.likes != null)) || ((data.shares != null) && (data.shares != undefined) && (data.shares != 0))) {
totallikes = 0;
if ((data.likes != 0) && (data.likes != undefined) && (data.likes != null)) {
totallikes += data.likes
}
if ((data.shares != 0) && (data.shares != undefined) && (data.shares != null)) {
totallikes += data.shares
}
// ici on retire et ajoute une classe CSS dans le cas ou on a bien un résultat positif cad: au moins 1 like ou share
jQuery('#facebookLink').removeClass('sharing-button-has-no-count');
jQuery('#facebookLink').addClass('sharing-button-has-count');
//ici on place le nombre obtenu de l'addition des likes et des shares, vouspouvez bien évidemment les séparer en utilisant une variable différen te, ici nous avons utilisé totalikes pour les deux (shares et likes additionnés)
jQuery('#facebookButton').append(avantcompteur + totallikes + aprescompteur);
}
});
});

Il ne nous reste plus qu’à afficher tout ça par l’intermédiaire d’un DIV, tout simplement:

//div à insérer ou vous voulez voir votre bouton, vous pouvez par la suite l'habiller comme bon vous semble avec le bouton que vous voulez
<div id="sharingButtons" class="sharing-button-div" style="margin-bottom:15px">
<span id="facebookButton">
<a id="facebookLink" class="sharing-button facebook-button sharing-button-has-no-count" onClick="facebook_popup('http://www.facebook.com/sharer.php?u=URLdelapageencours'); return false;"></a>
</span> 
//on ajoute la fonction javascript qui va permettre d'ouvrir proprement la page de partage facebook:
<script>
function facebook_popup(urlToOpen) {
// ajoute l'évennement dans votre google analytic (vous devez donc avoir ajouté le tag de google analytic sur votre page) dans mon exemple il s'agit d'une vidéo
//pensez à mettre un addslashes pour le titre de la vidéo pour ceux qui écrivent avec des '
_gaq.push(['_trackEvent', 'Videos', 'Like', 'Titre de la vidéo']);
window.open( urlToOpen, "facebookWindow", "height=380,width=660,resizable=0,toolbar=0,menubar=0,status=0,location=0,scrollbars=0" )
}
</script>

Vous me direz : Mais il est ou le bouton facebook ? Il suffit de l’ajouter via css comme suit:

<style>
.facebook-button{
background-image: url('images/social-sprite.png');
display:inline-block;
width:60px;
height:25px;
line-height:25px;
vertical-align:top;
background-position:0 0;
background-repeat:no-repeat;
cursor: pointer;
 }
 #facebookButton .sharing-button-count{
position: relative;
top: 2px;
left: -26px;
 }
</style>

 

Dans le bout de css au dessus, j’ai choisis d’utiliser un sprite (regrouper plusieurs images en une et jouer avec la position du background) cela dans le but d’éviter de faire trois requêtes alors qu’il est possible d’en faire qu’une. Le code sert essentiellement à afficher le bouton et à placer le chiffre généré dans la petite case prévue sur mon image.

Vous devriez être capables de personnaliser vos boutons de partage des réseaux sociaux, tout du moins pour le cas de facebook, dans un prochain article on verra pour le bouton Twitter

Pour toute question utilisez les commentaires, merci.