Ой, вы, гой еси, дорогие мои читатели! Совсем недавно, каких-то там шесть постов назад, я поднял тему социальных кнопок и очень рад, что статья пришлась вам по душе, и вы используете эти самые кнопки и делитесь материалами с моего сайта. Как я и обещал, продолжаем развивать тему и сегодня прикрутим к нашим кнопкам еще и счетчик, вещь, согласитесь, весьма необходимую и существенную, дабы поднять нашу самооценку до известного уровня и при случае заткнуть за пояс конкурентов, предъявив свои солидные «пузомерки».
Кто читал, тот знает, ну а кто не читал, тому настоятельно советую прочитать первую статью, ибо заново разъяснять написанное в ней я не буду, а ссылаться по ходу статьи на неё придется.
Сама идея добавления счётчика ничем не отличается от реализации кнопок поделиться. Мы по-прежнему работаем с API возможностями социальных сетей, а именно, обращаемся по сформированному URL, с целью получить заветное число поделившихся.
Итак, давайте приступим и начнем, пожалуй, с самого JavaScript. Работа скрипта касательно счётчика делится на две части:
- Счётчик необходимо добавлять к каждой кнопке из соцсетей при загрузке страницы;
- При событии клик по кнопкам изменять число поделившихся.
Для того чтобы реализовать первую часть логики скрипта, нам потребуется добавить метод init():
init: function(element){
$(document).ready(function(){
$(element).each(function(idx){
var countApiUrls = {
twitter: "https://urls.api.twitter.com/1/urls/count.json?callback=?&url=",
vk: "https://vk.com/share.php?act=count&index=" + idx + "&url=",
facebook: "https://graph.facebook.com/?callback=?&ids="
};
var pageUrl = $.parseJSON($(element + " div:eq(0)").attr("data-share-data")).url;
if(pageUrl){
share.getCountLikes(
$(element).find(".twitter"),
countApiUrls.twitter,
pageUrl,
"twitter"
);
share.getCountLikes(
$(element).find(".vk"),
countApiUrls.vk,
pageUrl,
"vk"
);
share.getCountLikes(
$(element).find(".facebook"),
countApiUrls.facebook,
pageUrl,
"facebook"
);
};
});
});
return false;
}
Теперь более подробно рассмотрим, как он работает. Этот метод является точкой входа/запуска скрипта, который принимает единственный параметр – это селектор поиска обёртки кнопок. Далее через jQuery метод ready() мы отслеживаем полную загрузку документа. Так как у нас на странице может быть несколько блоков поделиться, то через функцию each() для каждого элемента в наборе выполняем код, лежащий внутри функции. В объекте countApiUrls хранятся прямые ссылки для получения числа поделившихся. В pageUrl мы достаём и сохраняем адрес страницы, который указали в параметрах data-share-data. Завершая работу с методом init() мы вызываем метод getCountLikes(), где и реализуем получение самих чисел для счётчика:
getCountLikes: function(box, apiUrl, pageUrl, type){
if(apiUrl && pageUrl){
if(type == "twitter"){
$.getJSON(apiUrl + pageUrl, function(data){
var num = data.count || 0;
if(num > 0){
share.setCountLikes(box, num);
};
});
};
if(type == "vk"){
$.getScript(apiUrl + pageUrl);
if(!window.VK){
window.VK = {};
};
window.VK.Share = {
count: function(idx, count){
var num = count || 0;
if(num > 0){
share.setCountLikes(box, num);
};
}
};
};
if(type == "facebook"){
$.getJSON(apiUrl + pageUrl, function(data){
var num = data[pageUrl].shares || 0;
if(num > 0){
share.setCountLikes(box, num);
};
});
};
};
return false;
}
Метод getCountLikes() принимает 4 параметра:
- box – обёртка для каждой из кнопок соцсети;
- apiUrl – адрес API на которой происходит обращение;
- pageUrl – адрес страницы, о которой мы хотим получить данные;
- type – тип социальной сети.
Мы при помощи jQuery метода $.getJSON() обращаемся на сформированный url = apiUrl + pageUrl. В зависимости от соцсети получаем ответ (в основном это json) и обрабатываем его. Исключением является «Вконтакте», так как при запросе мы получаем отработку метода VK.Share(), что вызывает у нас на странице естественную ошибку, так как у нас нет объекта VK, но при помощи «нехитрого» костыля мы вытягиваем нужный нам результат.
Последние, что нам останется – это отрисовать числа на кнопках. Эту задачу мы решаем при помощи нового метода setCountLikes(). Эта функция принимает два параметра: определитель обертки и само число.
setCountLikes: function(box, num){
box.append("<span class='count'>" + num + "</span>");
return false;
}
На этом реализация первой части закончена, что мы получили в итоге: после того, как загрузиться страница у каждой кнопки «Поделиться» появиться число, в зависимости от результата работы с API. Теперь нам останется закончить вторую часть, а именно при клике по кнопке увеличивать счётчик на единицу. Это реализуем в старом методе popup():
popup: function(box, url){
var countBox = box.find(".count");
if(!countBox.length){
share.setCountLikes(box, 1);
}else{
countBox.text(parseInt(countBox.text()) + 1);
};
window.open(url, "", "toolbar=0, status=0, width=626, height=436");
return false;
}
Мы добавили новый параметр box, ранее описанный, и внутри при помощи условного оператора if() увеличиваем счётчик, в зависимости от наличия числа ранее поделившихся. На этом сам скрипт завершён, конечно, нужно ещё обновить в методах twitter(), vk(), facebook() строчку:
share.popup(url);
На:
share.popup($this, url);
Теперь, что касательно HTML разметки, выше мы рассмотрели метод init() и так как это точка входа/запуска скрипта, то её мы вызываем на странице после подключения файлов:
<script type="text/javascript">
share.init(".share");
</script>
Ещё в кнопке стоит добавить span с классом icon:
<div onclick="share.twitter($(this))" class="twitter">
<span class="icon"></span>
</div>
Также несущественные изменения произошли и в CSS. Надеюсь, к прочтению этого абзаца вы уже скачали архив с примером, если нет, то скачивайте и пользуетесь - всё работает. Данное решение я сам использую в нескольких проектах и проблем не замечал.
В заключение к этой статье, хочется добавить, что мы рассмотрели сам принцип написания социальных кнопок «Поделиться» и вы, думаю, поняли, что их можно реализовать самому, не используя сторонние сервисы и при этом меняя дизайн и функционал как угодно.