Tutoriel : Personnaliser les boutons des réseaux sociaux

Tutoriel : Personnaliser les boutons des réseaux sociaux

S'il y a bien un chose qui m'agace profondément, c'est l'apparence des boutons de partage sur les réseaux sociaux. Chaque service à son propre design et aucun des boutons ne se ressemble visuellement. Une fois il est trop haut, une fois trop large. Dans la majorité des cas, l'affichage est... dégueulasse.

Personnaliser les boutons de partage

Autant que possible, j'essaye que tout soit carré au pixel près lorsque que je code un site. J'ai donc cherché une solution pour personnaliser les boutons. J'aurais pu me contenter de remplacer les boutons traditionnels par des images mais je souhaitais conserver les compteurs.

Je vais donc vous expliquer comment faire. Commencez par créer un bouton pour chaque réseau social à l'aide de Photoshop ou PhotoFiltre ou encore l'excellent outil de traitement de photos en ligne : http://pixlr.com/editor/.

Ensuite, vous créez une class que l'on peut nommer class.share.php (que j'ai trouvé je ne sais plus où) :

<?php
class shareCount {
    private $url,$timeout;
    function __construct($url,$timeout=10) {
        $this->url=rawurlencode($url);
        $this->timeout=$timeout;
    }
    function get_tweets() {
        $json_string = $this->file_get_contents_curl('http://urls.api.twitter.com/1/urls/count.json?url=' . $this->url);
        $json = json_decode($json_string, true);
        if(!isset($json['count'])){ $err_tw = true; }
        return isset($json['count'])?intval($json['count']):0;
    }
    function get_linkedin() {
        $json_string = $this->file_get_contents_curl("http://www.linkedin.com/countserv/count/share?url=$this->url&format=json");
        $json = json_decode($json_string, true);
        if(!isset($json['count'])){ $err_in = true; }
        return isset($json['count'])?intval($json['count']):0;
    }
    function get_fb() {
        $json_string = $this->file_get_contents_curl('http://api.facebook.com/restserver.php?method=links.getStats&format=json&urls='.$this->url);
        $json = json_decode($json_string, true);
        if (!isset($json[0]['total_count'])) { $err_fb = true; }
        return isset($json[0]['total_count'])?intval($json[0]['total_count']):0;
    }
    function get_plusones()  {
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, "https://clients6.google.com/rpc");
        curl_setopt($curl, CURLOPT_POST, true);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($curl, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"'.rawurldecode($this->url).'","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]');
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-type: application/json'));
        $curl_results = curl_exec($curl);
        curl_close ($curl);
        $json = json_decode($curl_results, true);
        if (!isset($json[0]['result']['metadata']['globalCounts']['count'])) { $err_gg = true; }
        return isset($json[0]['result']['metadata']['globalCounts']['count'])?intval( $json[0]['result']['metadata']['globalCounts']['count'] ):0;
    }
    function get_stumble() {
        $json_string = $this->file_get_contents_curl('http://www.stumbleupon.com/services/1.01/badge.getinfo?url='.$this->url);
        $json = json_decode($json_string, true);
        return isset($json['result']['views'])?intval($json['result']['views']):0;
    }
    function get_delicious() {
        $json_string = $this->file_get_contents_curl('http://feeds.delicious.com/v2/json/urlinfo/data?url='.$this->url);
        $json = json_decode($json_string, true);
        return isset($json[0]['total_posts'])?intval($json[0]['total_posts']):0;
    }
    function get_pinterest() {
        $return_data = $this->file_get_contents_curl('http://api.pinterest.com/v1/urls/count.json?url='.$this->url);
        $json_string = preg_replace('/^receiveCount((.*))$/', "\1", $return_data);
        $json = json_decode($json_string, true);
        return isset($json['count'])?intval($json['count']):0;
    }
    private function file_get_contents_curl($url){
        $ch=curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);
        curl_setopt($ch, CURLOPT_FAILONERROR, true);
        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, false);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($ch, CURLOPT_TIMEOUT, $this->timeout);
        $cont = curl_exec($ch);
        if(curl_error($ch)) {
            die(curl_error($ch));
        }
        return $cont;
    }
}
?>

Ensuite, vous aurez besoin d'un peu de CSS pour afficher les images et la bulle pour les différents compteurs.

.boutons {}.boutons img {
    width: 101px !important;
    padding: 6px;
    border:  0;
    box-shadow: none !important;
    display: inline !important;
    vertical-align: middle
}
.boutons, .boutons a {
    text-decoration:none;
    background: none;
    font-size: 20px
}
.boutons-count:after, .boutons-count:before {
    right: 100%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}
.boutons-count:after {
    border-color: rgba(224, 221, 221, 0);
    border-right-color: #f5f5f5;
    border-width: 5px; top: 50%;
    margin-top: -5px
}
.boutons-count:before {
    border-color: rgba(85, 94, 88, 0);
    border-right-color: #e0dddd;
    border-width: 6px;
    top: 50%;
    margin-top: -6px
}
.boutons-count {
    font: 14px Arial, Helvetica, sans-serif;
    padding: 6px 10px 5px;
    -khtml-border-radius: 6px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #e0dddd;
    color: #555e58;
    background: #f5f5f5
}
.boutons-count:after {
    border-right-color: #f5f5f5
}

Enfin, la dernière étape est de créer le fichier pour afficher les boutons sociaux et les compteurs. Pour l'exercice, créez un fichier index.php :

<!DOCTYPE html><html lang="fr">
<head>
<title>Titre de ma page</title>
<meta name="description" content="Description de ma page" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<?php
// Appel de la class
require("class.share.php");
$url = "http://www.monsite.com/";
// Ouverture de la class
$obj = new shareCount($url);
?>
<div class="boutons">
    <a class="boutons-facebook-share" href="https://www.facebook.com/sharer.php?u=<?php echo $url; ?>" target="_blank"><img src="images/bouton-facebook.jpg" class="boutons" alt="Partager sur Facebook" /></a><span class="boutons-count"><?php echo $obj->get_fb(); ?></span>
    <a class="boutons-twitter-share" href="https://twitter.com/intent/tweet?url=<?php echo $url; ?>&text=Super article" target="_blank"><img src="images/bouton-twitter.jpg" class="boutons" alt="Partager sur Twitter" /></a><span class="boutons-count"><?php echo $obj->get_tweets(); ?></span>
    <a class="boutons-google-share" href="https://plus.google.com/share?url=<?php echo $url; ?>" target="_blank"><img src="images/bouton-google.jpg" class="boutons" alt="Partager sur Google+" /></a><span class="boutons-count"><?php echo $obj->get_plusones(); ?></span>
</div>
<?php
// Fermeture de la class
unset($obj);
?>
</body>
</html>

Voilà, vous avez désormais de jolis boutons pour afficher les partages des réseaux sociaux de vos sites comme en bas de cet article. Je vous laisse optimiser à votre sauce pour le design, appeler des informations depuis une base de données, faire le lien de partage vers une pop-up, les performances pour ne pas ralentir l'affichage de la page, etc.

Bonne vacances à celles et ceux qui ne sont pas encore partis et bon courage aux autres pour la reprise.

Catégorie Tutoriels - Écrit par le 01/08/2014 - Article lu 6 627 fois - 20 commentaires

20 réflexions sur ce billet

Hello,

Merci pour le partage mais voici un retour quant au code : il y a des appels CURL qui sont faits (n fois par page avec n = nombre de réseaux sociaux utilisés) et PHP n'étant pas threadé, risque de mettre le serveur en carafe sur un très gros volume non ?

Écrit par Hervé
Le 01/08/2014 à 14h58

Cédric

Oui si tu appelles plusieurs pages à la fois en même temps par exemple suite à de nombreux visiteurs sur le site. En fin d'article, je dis qu'il faut optimiser. Je ne vais pas fournir tout le code non plus, à chacun de réfléchir et d'adapter pour ses besoins. ;)

Écrit par Steve
Le 04/08/2014 à 11h14

Très sympa ce partage, je vais tester cela surtout sur le temps de chargement, merci !

Merci beaucoup Hervé ! Super solution. C'est clair que c'est toujours un peu galère à positionner ces boutons.

Sinon je trouve toujours ennuyeux le temps de chargement qu'ils prennent lors du chargement d'une page. Je n'ai pas trouvé de façon efficace de limiter ça. J'ai essayé avec des async ou defer sur le JS, mais ça ne fonctionne qu'à moitié voir pas du tout suivant à quelle fonction on l'inclut, à part de mettre le JS en fin de fichier, nada.

Tu n'as pas ça dans tes secrets à dévoiler ;) ?

Merci aussi pour l'outil de traitement d'image, ça peut être bien pratique ! Il ressemble beaucoup à Photoshop.

Écrit par Hervé
Le 06/08/2014 à 09h12

@Steve : En l'état, il faudra optimiser le script pour le rendre beaucoup plus rapide.

@Luc : Je donne des pistes, à chacun ensuite d'optimiser selon ses besoins. J'avoue que j'ai galéré pour que cela ne provoque pas de forts ralentissements. ;)

Écrit par François
Le 23/08/2014 à 23h44

Ahhh, ça fait un petit moment que je cherchais un tuto de ce genre. Autant faire les boutons ça ne me posait pas de problème, autant faire le cURL pour aller chercher les compteurs j'avais un peu la flemme de le faire. Merci !

PS : je suis tout à fait d'accord sur l'intro : les boutons fournis mis cote à cote sont vraiment très moches :)

Écrit par jd440
Le 27/09/2014 à 19h02

Merci pour ce tuto,

Je l'avais garder sous le coude depuis un moment et je viens de me lancer dans son intégration avec l'ajout d'un cache en plus.

Reste à développer une petit couche d'ajax, afin de permettre l’incrémentation du compteur à l'action.

Aurais tu la même chose pour la "like box" et "Badge Google+" ?

Écrit par Nicolas
Le 29/10/2014 à 14h12

Un grand merci pour ce petit programme. je galérais trop avec la solution réseaux sociaux proposée par la CNIL. Là au moins ça c'est réglé ! super la petite technique en CSS pour le petit triangle de la bulle. Excellent point de départ, le principal y est et l'idée est là !

Écrit par Théo
Le 09/12/2014 à 17h46

C'est juste parfait ! Merci bien. Auriez vous la fonction get_viadeo a ajouter dans la class class.share.php ?

Merci mille fois ;-)

Écrit par Pili
Le 03/03/2015 à 01h19

Bonjour,
J'ai testé ce tuto directement en le trouvant ! Je suis trop contente du résultats ! Merci beaucoup !
Mais voilà, je ne comprend pas car les boutons fonctionnent très bien sur mon serveur local, mais sur le distant , je rencontre cette erreur :

Parse eroor:syntax error,unexpected T_STRING,expecting T_OLD_FUNNCTION or T_FUNCTION or T_FUNCTION or T_VAR or [!] in...

Sauriez-vous m'aider ?

Merci d'avance

Écrit par Hervé
Le 03/03/2015 à 08h09

Salut Pili

Quelle version de PHP sur le serveur distant ? Essayez d'ajouter ceci dans le htaccess :

SetEnv PHP_VER 5

Écrit par pili
Le 03/03/2015 à 16h48

Merci beaucoup !

J'ai aussi demandé de l'aide par ailleurs et il apparait qu'OVH (mon hébergeur). il faut rajouter une petit fichier nommé .ovhconfig et écrire dedans :

app.engine=php
app.engine.version=5.5
environment=production

Je le donne à toutes fins utiles ! Merci pour ce super tuto et votre réponse ! J'ai mes boutons partage idéaux grâce à vous !

Écrit par Pili
Le 06/03/2015 à 15h43

Bonjour je reviens car j'ai encore un petit soucis. Je viens de m'apercevoir que le compteur de Google restait à zéro sur le serveur distant. Vous auriez une explication à ce dysfonctionnement ?

Merci d'avance
Pili

Écrit par Hervé
Le 06/03/2015 à 15h49

Bonjour Pili

Avez-vous bien ce paramètre ?

Dans function get_plusones() : curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);

Dans private function file_get_contents_curl($url) : curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

Autrement je ne vois pas la raison si ce n'est d'interroger les logs serveur pour voir si vous trouvez une explication.

Écrit par pili
Le 06/03/2015 à 18h22

Merci de votre réponse,

J'ai effectivement ces deux fonctions dans le document classe_share. Interroger les lois serveur... Voila un nouveau terme à découvrir !

Je vais faire quelques recherches. Merci encore et encore

Pili

Écrit par Maxime
Le 26/03/2015 à 19h33

Depuis quelques jours plus aucun nouveau count (fb, google, linkedin, et twitter) est pris en compte. C'est très bizarre car je n'ai pas changé le code. Avez-vous la même chose ?

Écrit par Hervé
Le 26/03/2015 à 19h38

Maxime

J'ai modifié le premier code aujourd'hui car j'avais le même problème. La correction se situe dans le fichier class.share.php

Écrit par Maxime
Le 26/03/2015 à 20h03

Merci Hervé pour la rapidité de ta réponse.

J'ai copié/collé le fichier class.share.php ci-dessus. Apparemment, seul Twitter semble fonctionner maintenant mais pas fb et google. Tu as la même chose chez toi ? Pourquoi tout d'un coup ça ne fonctionne plus ?

Écrit par Hervé
Le 26/03/2015 à 20h07

Maxime

Je viens de publier sur FB et G+ cet article (http://blog.infiniclick.fr/articles/ergonomie-mobile-google-est-role.html) et les compteurs ont bien été mis à jour quelques secondes après.

Écrit par Maxime
Le 26/03/2015 à 20h24

Merci pour ta réponse. Effectivement ça fonctionne chez toi.

Rien de mon coté, peut-être un problème coté serveur.

Je continue mon enquête ;)

Les commentaires de ce billet sont fermés

Haut de page