Многие из нас так или иначе сталкивались с проблемой кастомизации
кнопок соцсетей, а многие ещё столкнутся. Недавно нам на Sports.ru
пришлось решать задачу, как не только настроить внешний вид «лайков», но
и разместить на одной странице сразу несколько блоков социальных
кнопок, относящихся к разным текстовым блокам.
В этом топике мы расскажем, как решили эту проблему в своем спецпроекте (осторожно, он рекламный), и поделимся готовым и, что немаловажно, достаточно гибким решением.
Был написан плагин для jQuery, который выполняет следующие функции:
В дальнейшем мы планируем реализовать интеграцию с другими сервисами.
Плагин сам при помощи классов (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%!
В этом топике мы расскажем, как решили эту проблему в своем спецпроекте (осторожно, он рекламный), и поделимся готовым и, что немаловажно, достаточно гибким решением.
Был написан плагин для jQuery, который выполняет следующие функции:
- Добавление информации к сообщению (название, описание, картинка и собственно ссылка).
- Подсчёт лайков.
- Размещение на странице нескольких социальных блоков.
- Перемещение пользователя до залайканного материала (соц. сети режут хеш в урле).
Известные проблемы
- Facebook иногда не сразу отдает количество лайков, а Twitter обсчитывает с очень большой задержкой.
- Из-за непонимания Вконтактом параметра callback не рекомендуется использовать кастомные и нативные кнопки (только Вконтактовские) на одной странице.
В дальнейшем мы планируем реализовать интеграцию с другими сервисами.
Как использовать?
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%!
+28
14369
200
комментарии (27)
япоступил хитро, поставил гуглевую +1 над моей кастомной, и гуглевой дал опасити 0.01
количество не видно, но нажатие работает, как и всплывашка (пример zbroya.info/ru/7/ — справа)
Комментариев нет:
Отправить комментарий