Социальные кнопки своими руками без сторонних сервисов

Віталий

10 років ago

Доброго времени суток. 🙂

Сегодня хочу рассказать Вам как сделать кнопки шаринга, поделится, Расказать и тд. своими руками, без использования сторонних сервисов, таких как:«Поделиться» в соцсетях от Яндекс, share42.com, pluso, AddThis. Данный скрипт позволит сделать собственные кнопки которые поделятся ссылкой в таких сервисах: ВКонтакте, Одноклассники, Facebook, Живой Журнал, Твиттер, Google+, Mail.Ru

Данный способ, я активно применяю при создании тем для WordPress. Это позволяет мне делать кнопки схожие по дизайну с самой темой, что не возможно с сторонними сервисами, также, я могу настроить все так как нужно мне. Также я считаю что такой способ меньше грузит сайт. Я использую не все кнопки лишь те что считаю самыми часто нажимаемыми. Вот пример из нескольких сайтов.

Итак, приступим. В готовом примере будут просто текстовые ссылки без картинок. Если вы владеете минимальными навыками в CSS и Фотошоп или поиском картинок гугл, думаю Вам не составит труда сделать кнопки не хуже чем мои 🙂

1. Подключение библиотеки jquery

Для начала нужно подключить библиотеку jquery.

Перед подключением посмотрите, нет ли уже ранее подключенной библиотеки, чтобы не спровоцировать конфликт.

В head вставляем следующий код:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

2. Скрипт кнопок на базе jQuery c опциями

Код приведенный ниже вставляем в теги

<script type="text/javascript"> сюда код </script>

И вставляем сразу после подключенной библиотеки.
Также, если вы не любите лишний код в html, то можете сделать немножко иначе.
Создайте файл buttons.js и вставляем код в него.
Далее после подключенной библиотеки вставляем ссылку на файл с правильным путем к нему.

<script type="text/javascript" src="путь/buttons.js"></script>

Собственно, сам код:

Share = {
    /**
     * Показать пользователю диалог шаринга в сооветствии с опциями
     * Метод для использования в inline-js в ссылках
     * При блокировке всплывающего окна подставит нужный адрес и ползволит браузеру перейти по нему
     *
     * @example <a href="" onclick="return share.go(this)">like+</a>
     *
     * @param Object _element - элемент DOM, для которого
     * @param Object _options - опции, все необязательны
     */
    go: function(_element, _options) {
        var
            self = Share,
            options = $.extend(
                {
                    type:       'vk',    // тип соцсети
                    url:        location.href,  // какую ссылку шарим
                    count_url:  location.href,  // для какой ссылки крутим счётчик
                    title:      document.title, // заголовок шаринга
                    image:        '',             // картинка шаринга
                    text:       '',             // текст шаринга
                },
                $(_element).data(), // Если параметры заданы в data, то читаем их
                _options            // Параметры из вызова метода имеют наивысший приоритет
            );
 
        if (self.popup(link = self[options.type](options)) === null) {
            // Если не удалось открыть попап
            if ( $(_element).is('a') ) {
                // Если это <a>, то подставляем адрес и просим браузер продолжить переход по ссылке
                $(_element).prop('href', link);
                return true;
            }
            else {
                // Если это не <a>, то пытаемся перейти по адресу
                location.href = link;
                return false;
            }
        }
        else {
            // Попап успешно открыт, просим браузер не продолжать обработку
            return false;
        }
    },
 
    // ВКонтакте
    vk: function(_options) {
        var options = $.extend({
                url:    location.href,
                title:  document.title,
                image:  '',
                text:   '',
            }, _options);
 
        return 'http://vkontakte.ru/share.php?'
            + 'url='          + encodeURIComponent(options.url)
            + '&title='       + encodeURIComponent(options.title)
            + '&description=' + encodeURIComponent(options.text)
            + '&image='       + encodeURIComponent(options.image)
            + '&noparse=true';
    },
 
    // Одноклассники
    ok: function(_options) {
        var options = $.extend({
                url:    location.href,
                text:   '',
            }, _options);
 
        return 'http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1'
            + '&st.comments=' + encodeURIComponent(options.text)
            + '&st._surl='    + encodeURIComponent(options.url);
    },
 
    // Facebook
    fb: function(_options) {
        var options = $.extend({
                url:    location.href,
                title:  document.title,
                image:  '',
                text:   '',
            }, _options);
 
        return 'http://www.facebook.com/sharer.php?s=100'
            + '&p[title]='     + encodeURIComponent(options.title)
            + '&p[summary]='   + encodeURIComponent(options.text)
            + '&p[url]='       + encodeURIComponent(options.url)
            + '&p[images][0]=' + encodeURIComponent(options.image);
    },
 
    // Живой Журнал
    lj: function(_options) {
        var options = $.extend({
                url:    location.href,
                title:  document.title,
                text:   '',
            }, _options);
 
        return 'http://livejournal.com/update.bml?'
            + 'subject='        + encodeURIComponent(options.title)
            + '&event='         + encodeURIComponent(options.text + '<br/><a href="' + options.url + '">' + options.title + '</a>')
            + '&transform=1';
    },
 
    // Твиттер
    tw: function(_options) {
        var options = $.extend({
                url:        location.href,
                count_url:  location.href,
                title:      document.title,
            }, _options);
 
        return 'http://twitter.com/share?'
            + 'text='      + encodeURIComponent(options.title)
            + '&url='      + encodeURIComponent(options.url)
            + '&counturl=' + encodeURIComponent(options.count_url);
    },
 
// Google+
    gg: function (_options) {
        var options = $.extend({
            url: location.href          
        }, _options);
 
        return 'https://plus.google.com/share?url='
            + encodeURIComponent(options.url);
    },
 
    // Mail.Ru
    mr: function(_options) {
        var options = $.extend({
                url:    location.href,
                title:  document.title,
                image:  '',
                text:   '',
            }, _options);
 
        return 'http://connect.mail.ru/share?'
            + 'url='          + encodeURIComponent(options.url)
            + '&title='       + encodeURIComponent(options.title)
            + '&description=' + encodeURIComponent(options.text)
            + '&imageurl='    + encodeURIComponent(options.image);
    },
 
    // Открыть окно шаринга
    popup: function(url) {
        return window.open(url,'','toolbar=0,status=0,scrollbars=1,width=626,height=436');
    }
}

Как я и говорил, ненужные соц сети, можете убрать, просто удалив часть кода отвечающую за определенную соцсеть.

3. Скрипт отвечающий за класс кнопок

Данный скрипт определяет, что все элементы класса .social_share считаем кнопками шаринга.
Его тоже нужно вставить сразу после предыдущих вставок.

<script type="text/javascript">
$(document).on('click', '.social_share', function(){
    Share.go(this);
});
</script>

Иногда если способ не работает, подключение скриптов осуществляется перед закрывающимся тегом body в подвале

4. html разметка

В нужном месте вставляем код. В WordPress это нужно сделать внутри цыкла в файле single.php

<div class="share_this">
    <a class="social_share vk" data-type="vk">ВКонтакте</a>
    <a  class="social_share fb" data-type="fb">Facebook</a>
    <a  class="social_share tw" data-type="tw">Twitter</a>
    <a  class="social_share ok" data-type="ok">Одноклассники</a>
    <a  class="social_share gg" data-type="gg">Google+</a>
    <a  class="social_share mr" data-type="mr">Mail.Ru</a>
    <a  class="social_share lj" data-type="lj">LiveJournal</a>
</div>

5. СSS стили

Как я писал раньше, результат будет без картинок, а просто украшен стилями.
Добавляем данный код в Файл стилей вашего сайта.

.share_this{margin-top:15px;width:100%;}
.social_share{float:right;margin-left:5px;color:#fff;padding:2px;}
.social_share:hover{cursor:pointer;}
.vk:hover{background:#ff6600;}
.fb:hover{background:#ff6600;}
.tw:hover{background:#ff6600;}
.gg:hover{background:#ff6600;}
.ok:hover{background:#ff6600;}
.mr:hover{background:#ff6600;}
.lj:hover{background:#ff6600;}
.vk{background:#339900;}
.fb{background:#339900;}
.tw{background:#339900;}
.gg{background:#339900;}
.ok{background:#339900;}
.mr{background:#339900;}
.lj{background:#339900;}

Вот и все. Если проделанная работа выполнена правильно, то кнопки должны прекрасно выполнять свою функцию.
На этом все, спасибо за внимание 🙂

Exit mobile version