Кастомизация социальных кнопок

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

В этом топике мы расскажем, как решили эту проблему в своем спецпроекте (осторожно, он рекламный), и поделимся готовым и, что немаловажно, достаточно гибким решением.



Был написан плагин для jQuery, который выполняет следующие функции:

• Добавление информации к сообщению (название, описание, картинка и собственно ссылка).
• Подсчёт лайков.
• Размещение на странице нескольких социальных блоков.
• Перемещение пользователя до залайканного материала (соц. сети режут хеш в урле).

На данный момент времени плагин поддерживает Facebook Share, Вконтакте Share и Twitter.

Известные проблемы

• Facebook иногда не сразу отдает количество лайков, а Twitter обсчитывает с очень большой задержкой.
• Из-за непонимания Вконтактом параметра callback не рекомендуется использовать кастомные и нативные кнопки (только Вконтактовские) на одной странице.

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

Как использовать?

HTML

    <div class="event-container" id="event_5">
        <h2>Название материала</h2>
        <img src="image.png" alt="" />
        <div class="summary">
            <p>
                Текст материала
            </p>
        </div>
        <div class="likes-block">
            <a href="?hash=event_5" class="like l-fb">
                <i class="l-ico"></i>
                <span class="l-count"></span>
            </a>
            <a href="?hash=event_5" class="like l-vk">
                <i class="l-ico"></i>
                <span class="l-count"></span>
            </a>
            <a href="?hash=event_5" class="like l-tw">
                <i class="l-ico"></i>
                <span class="l-count"></span>
            </a>
        </div>
    </div>

Javascript

    jQuery(document).ready(function($) {
        $('.like').socialButton();
        $.scrollToButton('hash', 3000);
    });

Пояснение

Плагин сам при помощи классов (l-fb, l-tw, l-vk) определит, с какой кнопкой имеет дело. Как я уже говорил, вы можете переопределить имена классов и селекторы ключевых элементов (дефолтный конфиг смотри в исходнике). Для этого достаточно передать хеш с переопределяемыми параметрами в метод socialButton().

Теперь, если вы перейдёте по адресу http://path.to/page.html?hash=news_123 плагин «проскроллит» вас до материала с id-шником news_123 за 3 секунды.

По умолчанию в качестве заголовка плагин использует h2 (если не найдёт, то document.title), в качестве описания первую p-шку, в качестве ссылки значение атрибута href у ссылки с классом like. Кстати, поддерживаются как абсолютные, так и относительные урлы.

В итоге

Пользуйтесь плагином с умом, не стоит лепить на странице 100 блоков с соц. кнопками. Каждая кнопка — запрос к API счётчика. Если на странице много материалов, реализуйте динамическую подгрузку.

Где демо? Где исходники?

Исходники вот: GitHub
Пример вот: Перейти

Спасибо за внимание, и ждем вопросов в комментариях. Надеюсь, эта статья окажется полезной для тебя, %username%!