Social, un plugin jQuery pour afficher vos réseaux sociaux en « overlay »

Social (écrit #50C1AL) est un plugin jQuery conçu pour afficher une liste d’icônes de vos réseaux sociaux sous forme d’overlay pour permettre à vos visiteurs de partager n’importe quelle page de votre site web ou tout simplement d’accéder à vos comptes sociaux.

Partagez sur les réseaux sociaux

Le script fonctionne exactement comme une lightbox ; les icônes des réseaux sociaux viennent s’afficher par dessus votre site web avec un système d’overlay (background transparent). Vous pouvez l’utiliser de deux façons : soit pour partager du contenu comme un « like » ou un « tweet » (environ 15 réseaux disponibles), soit pour accéder aux comptes sociaux comme une page Facebook ou un compte Twitter (environ 50 services).

social

Social propose une fonctionnalité assez originale à activer (whenSelect) : lorsqu’un utilisateur sélectionne du texte, par exemple une phrase d’un article, les réseaux sociaux apparaissent automatiquement et vous proposent de liker / tweeter la phrase concernée… Le plugin vous propose 46 icônes de réseaux sociaux et services via un sprite CSS. Vous pouvez bien sûr utiliser vos propres images ou uniquement du HTML/CSS grâce à la feuille de style (arthref.css).

Installation de Social

La mise en place du plugin est assez rapide. On commence par inclure le framework jQuery, le script (socialProfiles.min.js) et sa feuille de style (arthref.min.css) :

<link rel="stylesheet" href="/assets/stylesheets/arthref.min.css">
<script src="/assets/javascripts/jquery.min.js"></script>
<script src="/assets/javascripts/socialProfiles.min.js"></script>

Ensuite, on définit la zone cliquable qui va déclencher l’apparition des réseaux sociaux :

<div id="share">
   <!-- contenu -->
</div>

Puis deux cas sont possibles : on affiche soit les icônes permettant de partager la page en question, soit les icônes qui donnent accès aux comptes sociaux. Pour le premier cas, il faut se servir du paramètre social dans lequel on définit les réseaux sociaux séparés par une virgule. Pour le deuxième cas, il faut définir chaque réseau social comme paramètre prenant pour valeur l’ID du compte, comme ceci :

$(document).ready(function () {
   $('#share').socialProfiles({
      facebook: 'Megaptery',
      twitter: 'Megaptery',
      google: '109671851567630540182',
   });
});

Plusieurs paramètres sont disponibles pour configurer davantage le plugin comme le titre, la description et l’URL du partage. On peut également utiliser le paramètre animation qui permet de définir l’effet d’apparition des icônes mais dont la vitesse, curieusement, n’est configurable qu’avec un seul effet (chain), ou encore le paramètre blur pour appliquer un flou gaussien sur l’overlay, disponible uniquement sur Chrome mais qui a beaucoup de mal à rendre le mouvement fluide.

Requis : jQuery
Compatibilité : Chrome, Firefox, Opera
Démonstration : http://tolgaergin.com/files/social/
Licence : MIT

Commentaires