Je me suis promis de laisser un peu plus d’article sur mon blog. Aujourd’hui, je viens de changer la présentation de mes réseaux sociaux, en utilisant un petit plugin jQuery; ClassySocial.
Le plugin permet d’afficher différents réseaux sociaux de manière dynamique et jolie. Le plugin est simple d’utilisation et d’installation.
Installation du plugin
Au préalable, télécharger la bibliothèque via le lien suivant : www.class.pm/projects/jquery/classysocial
Comme tout plugin jQuery, appelez la bibliothèque jQuery :
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
Appelez ensuite la bibliothèque du plugin et le CSS :
|
1 2 |
<script src="js/jquery.classysocial.js"></script> <link rel="stylesheet" href="css/jquery.classysocial.css" /> |
Appelez le plugin :
|
1 2 3 |
$(".classysocial").each(function() { new ClassySocial(this); }); |
Et enfin l’afficher :
|
1 2 3 4 5 6 |
<div data-arc-length="360" data-image-type="facebook" data-picture="picozu" data-facebook-handle="picozu" data-twitter-handle="picozu_editor" data-networks="facebook,twitter,email"></div> |
Utilisation du plugin
Ce plugin permet d’afficher les réseaux sociaux en mode ligne ou en mode en cercle, comme sur mon site.
Les attributs possibles à modifier :
- data-networks – Liste des réseaux sociaux à afficher séparés par une virgule
- data-image-type – L’image du bouton menu, soit votre image de profil facebook, soit une image spécifiée
- data-picture – Nom du profil facebook si image-type facebook, ou une URL vers l’image à afficher
- data-YYY-handle – Propriété pour définir les propriétés de chaque réseau social. Remplacer YYY par le nom du réseau social à configurer.
- data-orientation – Orientation: arc ou line
- data-gap – Espace en pixel entre les icônes
- data-arc-start – Début de l’arc (de 1 à 360)
- data-arc-length – Taille de l’arc (de 1 à 360)
- data-radius – Radius de l’arc