Красивые кнопки социальных сетей для сайта

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

Ну и как всегда на помощь приходит всемирная паутина. Немного поискав нашел простенькое решение данной проблемы. С кодом заморочек нет , всё прекрасно работает. Ну а теперь подробнее остановимся на установке кнопок социальных сетей без сторонних сервисов.

HTML

<div id="share">
<div class="like">Поделитесь с друзьями!</div>
<div class="social">
    <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 ok" data-id="ok"><i class="fa fa-odnoklassniki"></i> Одноклассники</a>
</div>
</div>

CSS

#share {
    width: 100%;
    border: 1px solid #eaeaea;
    margin: 0 auto;
    background: #fff;
    text-align: center;
}
.like {
    font-size: 16px;
    font-weight: 700;
    line-height: 50px;
}
.push {
    display: inline-block;
    width: 22%;
    min-width: 100px;
    line-height: 40px;
    margin: 5px 2px 20px 2px;
    font-size: 15px;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
 
.facebook {background-color: #4267b2;}
.facebook:hover {background-color: #365899; color: #fff;}
 
.twitter {background-color: #1da1f2;}
.twitter:hover {background-color: #1a91da; color: #fff;}
 
.vkontakte {background-color: #5181b8;}
.vkontakte:hover {background-color: #5b88bd; color: #fff;}
 
.ok {background-color: #ee8208;}
.ok:hover {background-color: #ee7808; color: #fff;}

JS

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

    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') || '', 
                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});
            }
        }
    },

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

    share: function(id, url, title, desc) {
        url = encodeURIComponent(url);
        desc = encodeURIComponent(desc);
        title = encodeURIComponent(title);
        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 'ok':
                this.popupCenter('https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=' + url, 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();
        }
    }
};

jQuery(document).ready(function($) {
    $('.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') || '';
            Shares.share(id, url, title, desc);
        }
    });
});

Проблем возникнуть не должно. Кнопки социальных сетей располагаем в удобном месте сайта. Стили вставляем в файл ваших пользовательских стилей , ну а скрипт в соответствующий файл скриптов.  Вот в принципе и всё.