Tutoriel JavaScript : Boutons partage social personnalisés

Dans ce tutoriel je vous propose de découvrir comment mettre en place des boutons de partage social personnalisé. Le principe est de créer des boutons personnalisés qui ouvriront une popup de partage centrée sur l'écran.

Pourquoi ?

Tout de suite on peut se poser la question : pourquoi ne pas utiliser les boutons proposés directement par les réseaux sociaux ?

• Ils sont moches et manquent de cohérences.
• Ils rendent votre site plus lent, car ils vous obligent à charger une tonne de JavaScript.

L'avantage de notre solution est que nous n'avons pas besoin de faire appels à des API externes pour afficher les boutons.

Comment ?

Nous allons commencer par mettre sur notre code HTML une classe spécifique, cette classe nous permettra de cibler nos éléments en JavaScript (on n'utilisera pas un ID, car nous pouvons avoir plusieurs boutons sur une seule page). Nous mettrons aussi sur chaque bouton un attribut arbitraire pour stocker l'URL que l'on souhaite partager.

<button class="button share_twitter" data-url="http://....">
    Partager sur twitter
</button>
<button class="button share_facebook" data-url="http://....">
    Partager sur facebook
</button>
<button class="button share_gplus" data-url="http://....">
    Partager sur google+
</button>
<button class="button share_linkedin" data-url="http://....">
    Partager sur linkedin
</button>

Maintenant que nos boutons sont en place, on va pouvoir détecter le clic et ouvrir une popup en fonction.

(function(){

    var popupCenter = function(url, title, width, height){
        var popupWidth = width || 640;
        var popupHeight = height || 320;
        var windowLeft = window.screenLeft || window.screenX;
        var windowTop = window.screenTop || window.screenY;
        var windowWidth = window.innerWidth || document.documentElement.clientWidth;
        var windowHeight = window.innerHeight || document.documentElement.clientHeight;
        var popupLeft = windowLeft + windowWidth / 2 - popupWidth / 2 ;
        var popupTop = windowTop + windowHeight / 2 - popupHeight / 2;
        var popup = window.open(url, title, 'scrollbars=yes, width=' + popupWidth + ', height=' + popupHeight + ', top=' + popupTop + ', left=' + popupLeft);
        popup.focus();
        return true;
    };

    document.querySelector('.share_twitter').addEventListener('click', function(e){
        e.preventDefault();
        var url = this.getAttribute('data-url');
        var shareUrl = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(document.title) +
            "&via=Grafikart_fr" +
            "&url=" + encodeURIComponent(url);
        popupCenter(shareUrl, "Partager sur Twitter");
    });

    document.querySelector('.share_facebook').addEventListener('click', function(e){
        e.preventDefault();
        var url = this.getAttribute('data-url');
        var shareUrl = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(url);
        popupCenter(shareUrl, "Partager sur facebook");
    });

    document.querySelector('.share_gplus').addEventListener('click', function(e){
        e.preventDefault();
        var url = this.getAttribute('data-url');
        var shareUrl = "https://plus.google.com/share?url=" + encodeURIComponent(url);
        popupCenter(shareUrl, "Partager sur Google+");
    });

    document.querySelector('.share_linkedin').addEventListener('click', function(e){
        e.preventDefault();
        var url = this.getAttribute('data-url');
        var shareUrl = "https://www.linkedin.com/shareArticle?url=" + encodeURIComponent(url);
        popupCenter(shareUrl, "Partager sur Linkedin");
    });

})();