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.