Le graphistes aimerait avoir la main sur le design des boutons sociaux, c’est possible avec Sharrre.

Suite au premier article (il est conseillé de commencer par le lire si vous arrivez directement sur cette page) sur l’optimisation de votre site pour les médias sociaux voici une le premier exemple d’intégration de sharrre, ce tutorial utilise les options basiques afin d’effectuer votre premier bouton. L’objectif du tutorial est de voir comment construire progressivement le bouton ci-dessous : Un simple bouton avec un unique compteur qui affiche la somme des partages sur les différents réseaux sociaux. Au passage de la souris, on voit apparaitre les différents boutons pour partager à notre tour l’article.

Positionner votre bouton social

Il est important de choisir un emplacement avec une forte visibilité pour positionner vos boutons sociaux. La plus-value de sharrre étant de faire un condensé de réseaux sociaux dans un seul bouton et d’en choisir le design pour qu’il soit totalement adapté à votre site, il est ainsi beaucoup plus facile de lui donner une position très visible. La finalité étant bien sûr d’inciter le plus possible au partage.

A l’endroit où vous souhaitez le mettre dans votre thème, ajouter le code suivant :
<div id="example1">
<div id="widget1" data-url="http://www.formation-web.org/" data-title="partagez"></div>
</div>

Le premier div est un simple conteneur, il n’est pas vraiment important mais vous permettra de placer simplement votre bouton où vous le souhaitez dans votre page. Dans le second, l’attribut data-url sera comme son nom l’indique l’url que vous souhaitez partager et data-title le texte que vous souhaitez afficher à côté du partage.

Appel javascript de la fonction sharrre

Ajoutez un peu de javascript dans votre entête (entre les balises entre <head> et </head>) pour initialiser le widget (dans wordpress, à ajouter dans le fichier wp-content/themes/NOMDUTHEME/header.php)

Le premier paramètre (share) nous permet de choisir les réseaux sociaux que nous souhaitons regrouper dans notre bouton. Il est généralement très lié à la seconde option (buttons) qui vous permet de définir les options de chaque bouton de réseau social. Si par exemple vous souhaitez en retirer un, il vous suffit d’effacer les lignes dans ces deux options (Attentions si vous supprimez le dernier, il vous faudra également supprimer la virgule du précédent… sinon gare à l’erreur de syntaxe.

Les deux autres paramètres (hover et hide) permettent de définir la fonction utilisée au passage de la souris. Nous utiliserons ici l’affichage par défaut (qui affichera la boite avec les réseaux sociaux sélectionnés).
<script type="text/javascript">
jQuery(function($){
$('#widget1').sharrre({
share: {
googlePlus: true,
facebook: true,
twitter: true,
delicious: true,
linkedin: true,
pinterest: true
},
buttons: {
googlePlus: {size: 'tall'},
facebook: {layout: 'box_count'},
twitter: {count: 'vertical' },
delicious: {size: 'tall'},
linkedin: {counter: 'top'},
pinterest: {layout: 'vertical'}
},
hover: function(api, options){
$(api.element).find('.buttons').show();
},
hide: function(api, options){
$(api.element).find('.buttons').hide();
}
});
});
</script>

Techniquement, votre bouton est déjà fonctionnel… Testez et vous apercevez votre phrase « partagez » et au passage de la souris les boutons sociaux apparaissent (de façon un peu anarchique). La dernière étape est uniquement de la mise en forme avec votre fichier css.

Mettez en forme votre bouton social

Rentrons directement au coeur du sujet. Le plugin sharrre va générer le code suivant lors de l’appel javascript. Ce sont donc ces blocs qu’il va falloir mettre en forme (Attention, ce code n’est pas à copier-coller, il est généré par le plugin sharrre).
<div id="example1">
<div id="widget1" class="sharrre" data-title="Partagez" data-url="http://www.formation-web.org/">
<div class="box">
<a class="count" href="#">0</a>
<a class="share" href="#">Partagez</a>
</div>
<div class="buttons" style="display: none;">
<div class="button googleplus">
<!-- Bouton généré google plus -->
</div>
<div class="button facebook">
<!-- Bouton généré facebook -->
</div>
<div class="button twitter">
<!-- Bouton généré twitter -->
</div>
<div class="button delicious">
<!-- Bouton généré delicious -->
</div>
<div class="button linkedin">
<!-- Bouton généré linkedin -->
</div>
<div class="button pinterest">
<!-- Bouton généré pinterest -->
</div>
</div>
</div>

Nous allons donc enfin remplir votre fichier css créé dans le tuto précédent. Comme vous le constatez ci-dessus, il y a une boite principale (nommée widget1 dans notre exemple) qui contient 2 boites. La première (class= »box ») correspond au bouton et au compteur, la seconde (class= »buttons ») qui par défaut n’est pas visible contient les différents boutons de partage sociaux. Commençons par mettre en forme le bouton et le compteur. Je vous écris ci-dessous le code css utilisé pour mon exemple avec les explications en commentaire. Comme cela vous pourrez directement l’adapter à votre site :

/* Pas grand chose à dire pour le conteneur box */
#widget0 .box{
float:left;
margin: 10px;
}
/*La mise en forme de la partie correspondant au compteur*/
#widget0 .count {
/* Notre compteur est gris foncé sur fond gris clair */
color:#444444;
background-color:#eee;
/* La taille de la police suivi de la taille de l'interligne */
font-size:17px;
line-height:34px;
/* La hauteur et largeur de notre bulle */
height:34px;
width:70px;
/**/
padding:4px 0;
/*on utilise la position relative et l'affichage sous forme de block*/
position:relative;
display:block;
/* On centre le nombre de partage */
text-align:center;
/* Les liens sont souvent soulignés par défaut, on ne le veut pas ici */
text-decoration:none;
/* On arrondit les coins */
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
/* La mise en forme du bouton partager */
#widget0 .share {
/* On écrit en blanc sur fond rouge */
color:#FFFFFF;
background-color: #B70909;
/* Affichage sous forme de block */
display:block;
/* Définition de la taille de la police et de l'interligne */
font-size:12px;
line-height:18px;
/* On espace un peu de la bulle au dessus*/
margin-top:3px;
/* On centre le texte */
text-align:center;
text-decoration:none;
/* Définition de la taille (hauteur / largeur) du block*/
height:18px;
width:70px;
/* On arrondit le coins */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

Vous pouvez à nouveau tester votre page, votre bouton est normalement bien mis en forme… Par contre au passage de la souris, ce n’est pas encore cela. Attaquons nous à ces boutons :


/* On définit les propriétés du containeur buttons*/
#widget0 .buttons {
/* Par défaut, il n'est pas affiché */
display:none;
/* On met la position en absolute pour pouvoir la positionner sans modifier le reste */
position:absolute;
/* On définit un z-index qui permet d'ouvrir la box au-dessus du reste */
z-index:10;
/* C'est un choix esthétique, la box s'affichera à droite du bouton */
margin-left:80px;
/* On définit la couleur de fond du block*/
background-color:#fff;
/* Ainsi que les bordures en gris */
border: solid 1px #DDD;
padding: 10px;
}
/*On definit le positionnement de chaque bouton */
#widget0 .button {
/* il seront alignés en partant de la gauche */
float:left;
/* Chaque bouton fera maximum 50px */
max-width:50px;
/* Marge de 10px à droite de chaque bouton */
margin:0 10px 0 0;
}
/* Pour un bon alignement, on définit des marges spéciales pour le bouton facebook */
#widget0 .facebook {
margin:0 4px 0 0;
}
/* Idem pour le bouton delicious */
#widget0 .delicious {
margin:0 10px 0 8px;
}
/* Idem pour le bouton pinterest */
#widget0 .pinterest {
margin: 4px 0 0 8px;
}

Et voilà pour le premier exemple d’intégration. Vous pouvez déjà faire beaucoup de mise en page personnalisés avec cet exemple.

Cet article vous a plu ? N'hésitez pas à le partager avec vos amis...
Categories: dossiers

One Response so far.

  1. franck dit :

    bonjour,

    J’ai passé la journée sur ce plugin mais rien à faire. J’ai discuter avec le createur du plugin mais ne connaissant pas wordpress, ces information ne m’ont pas aidé.

    c’est dommage car ce plugin est de loin le meilleur.

    Pouvez vous m’aider ?

Ne partez pas sans laisser un commentaire


This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.