Показать Меню
falbar Кнопкам поделиться

Социальные кнопки поделиться – пишем сами! Часть 2. Добавляем счетчик

Кнопкам поделиться

Ой, Вы, гой еси, дорогие мои читатели Фалбара! Совсем недавно, каких-то там шесть постов назад, я поднял тему социальных кнопок и очень рад, что статья пришлась Вам по душе, и Вы используете эти самые кнопки и делитесь материалами с моего сайта. Как я и обещал, продолжаем развивать тему и сегодня прикрутим к нашим кнопкам еще и счетчик, вещь, согласитесь, весьма необходимую и существенную, дабы поднять нашу самооценку до известного уровня и при случае заткнуть за пояс конкурентов, предъявив свои солидные «пузомерки».

Кто читал, тот знает, ну а кто не читал, тому настоятельно советую прочитать первую статью, ибо заново разъяснять написанное в ней я не буду, а ссылаться по ходу статьи на неё придется.

Сама идея добавления счётчика ничем не отличается от реализации кнопок поделиться. Мы по-прежнему работаем с 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. Надеюсь, к прочтению этого абзаца Вы уже скачали архив с примером, если нет, то скачивайте и пользуетесь - всё работает. Данное решение я сам использую в нескольких проектах и проблем не замечал.

В заключение к этой статье, хочется добавить, что мы рассмотрели сам принцип написания социальных кнопок «Поделиться» и Вы, думаю, поняли, что их можно реализовать самому, не используя сторонние сервисы и при этом меняя дизайн и функционал как угодно.

Подписаться на обновления

Альберт Масниченко
Альберт Масниченко 21 ноября 2016 в 11:50
Спасибо за статью! Очень полезная! Подскажите как в скрипте прописать одноклассники, гугл+ и whatsapp?
Ответить
Антон Кулешов
Антон Кулешов > Альберт Масниченко 21 ноября 2016 в 17:48
Тут есть три способа:
1. Найти нужный код в интернете;
2. Воспользоваться API сети;
3. Найти уже готовые кнопки и взять от туда код – этот вариант самый простой.
Ответить