Свой дизайн кнопок социальных сетей для сайта. Кнопки "Поделиться"

Зачем это может понадобиться. Во-первых стандартные сервисы от Яндекса Поделиться, Pluso и др. не позволяют свои иконки кнопок ставить. Во-вторых, эти сервисы могут подгружать лишние скрипты - типа метрики, которую Яндекс использует для статистики в Яндекс.Метрика у вашего сайта. Удобно, но не всегда необходимо.

1. Основа - сам скрипт помещаем в файл share.js и подключаем либо в head, либо там, где вставляем сам html-код кнопок

var Shares = {
    title: 'Поделиться',
    width: 600,
    height: 400,

    init: function() {
        var share = document.querySelectorAll('.social');
        for(var i = 0, l = share.length; i < l; i++) {
            var url = share[i].getAttribute('data-url') || location.href, title = share[i].getAttribute('data-title') || '', media = share[i].getAttribute('data-image') || '',
                desc = share[i].getAttribute('data-desc') || '', el = share[i].querySelectorAll('a');
            for(var a = 0, al = el.length; a < al; a++) {
                var id = el[a].getAttribute('data-id');
                if(id)
                    this.addEventListener(el[a], 'click', {id: id, url: url, title: title, desc: desc, media: media});
            }
        }
    },

    addEventListener: function(el, eventName, opt) {
        var _this = this, handler = function() {
            _this.share(opt.id, opt.url, opt.title, opt.desc, opt.media);
        };
        if(el.addEventListener) {
            el.addEventListener(eventName, handler);
        } else {
            el.attachEvent('on' + eventName, function() {
                handler.call(el);
            });
        }
    },

    share: function(id, url, title, desc, media) {
        url = encodeURIComponent(url);
        desc = encodeURIComponent(desc);
        title = encodeURIComponent(title);
        media = encodeURIComponent(media);
        switch(id) {
            case 'fb':
                this.popupCenter('https://www.facebook.com/sharer/sharer.php?u=' + url, this.title, this.width, this.height);
                break;
            case 'vk':
                this.popupCenter('https://vk.com/share.php?url=' + url + '&description=' + title + '. ' + desc, this.title, this.width, this.height);
                break;
            case 'tw':
                var text = title || desc || '';
                if(title.length > 0 && desc.length > 0)
                    text = title + ' - ' + desc;
                if(text.length > 0)
                    text = '&text=' + text;
                this.popupCenter('https://twitter.com/intent/tweet?url=' + url + text, this.title, this.width, this.height);
                break;
            case 'gp':
                this.popupCenter('https://plus.google.com/share?url=' + url, this.title, this.width, this.height);
                break;
            case 'ok':
                this.popupCenter('https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=' + url, this.title, this.width, this.height);
                break;
            case 'pi':
                this.popupCenter('http://pinterest.com/pin/create/button/?url=' + url + '&description=' + title +'. ' + desc + '&media=' + media, this.title, this.width, this.height);
                break;
        };
    },

    newTab: function(url) {
        var win = window.open(url, '_blank');
        win.focus();        
    },

    popupCenter: function(url, title, w, h) {
        var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
        var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
        var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
        var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
        var left = ((width / 2) - (w / 2)) + dualScreenLeft;
        var top = ((height / 3) - (h / 3)) + dualScreenTop;
        var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
        if (window.focus) {
                newWindow.focus();
        }
    }
};

$('.social a').on('click', function() {
    var id = $(this).data('id');
    if(id) {
        var data = $(this).parent('.social');
        var url = data.data('url') || location.href, title = data.data('title') || '', desc = data.data('desc') || '', media = data.data('media') || '';
        Shares.share(id, url, title, desc, media);
    }
});

2. Html-код на страницу вставляем

<div id="share">
<div class="like">Поделиться:</div>
<div class="social" data-url="<?php ФУНКЦИЯ_ИЛИ_ПЕРЕМЕННАЯ_С_УРЛОМ_СТРАНИЦЫ ?>" data-title="<?php ЗАГОЛОВОК_СТРАНИЦЫ ?>">
    <a class="push facebook" data-id="fb"><i class="fa fa-facebook"></i> Facebook</a>
    <a class="push twitter" data-id="tw"><i class="fa fa-twitter"></i> Twitter</a>
    <a class="push vkontakte" data-id="vk"><i class="fa fa-vk"></i> Вконтакте</a>
    <a class="push google" data-id="gp"><i class="fa fa-google-plus"></i> Google+</a>
    <a class="push ok" data-id="ok"><i class="fa fa-odnoklassniki"></i> OK</a>
<a class="push pi" data-id="pi"><i class="fa fa-pi"></i> Pinterest</a>
</div>
</div>