Социальные кнопки поделиться – пишем сами

3 мая 2015 Антон Кулешов 2452 0

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

Реклама

Перед тем, как углубляться в кодинг, давайте осмотримся и обратим внимание нате ресурсы, которые уже нам предоставляет глобальная паутина. К слову их очень много мы же рассмотрим два наиболее популярных.

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

Теперь перейдем по ссылке yandex share и, таки посмотрим, что для нас подготовили разработчики Яндекс, к слову сказать «Технологии» – жуть, какая полезная штука, но это уже тема для следующих статей. Итак, в окне браузера мы видим простой конструктор для создания блока кнопок поделиться. Расставляем галочки, выбираем внешний вид блока и копируем готовый код к себе на сайт. Всё, дальше за нас всё сделает сам Яндекс.

yandex-share

Ещё один сервис достойный нашего внимания – share42, представляет собой такой же простой конструктор, вот только кнопок с сервисами и сетями гораздо больше, некоторые из которых, признаться, я увидел впервые. Главное отличие от «Яндекс.Технологий» – мы получаем полностью сгенерированный скрипт, который будет отрабатываться не облачно, а непосредственно на нашем сервере.

share42

Казалось бы, при наличии столь замечательных решений никому и в голову не придет вновь «изобретать велосипед»? А нет, написанный кем-то скрипт хорош ровно настолько, насколько нам самим лень над ним заморачиваться. Конечно, он будет исправно работать и выполнять свои функции, но – это универсальное решение, написанное для общей массы сайтов, т.е. оно не учитывает наших личных маленьких потребностей и условностей.

С чем же мы рискуем столкнуться, используя готовые кнопки поделиться?

Во-первых: дизайн кнопок фактически железный. Да он узнаваем и предоставляется самими соцсетями, но только нашим потребностям не соответствует. Ну вот, у кнопочки края закруглены, а дизайн нашего сайта требует, чтобы кнопка была квадратной, что делать? – Брать спрайт и перерисовывать! Кто пробовал, тот знает – дело неблагодарное: замена одной кнопки чревата пятью-шестью пробами «правильно» разместить её на спрайте. И это только замена одной/нескольких кнопок, а если сайт в готическом стиле и все кнопки нужны тёмные?

Во-вторых: в надежности Яндекса сомневаться не приходится, но кнопки, в отличие от счетчика метрики, почему-то грузятся тяжело, и не редко происходит видимое их запаздывание от основного контента страницы. Особенно это заметно при хорошем высокоскоростном соединении, когда страница вылетает фактически мгновенно, а у вас несколько блоков с кнопками.

В-третьих: для теста сгенерируйте скрипт на share24 – он большой. Все ли из предоставленных строк кода так уж нам необходимы? – Не думаю.

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

Теперь перейдём к самому написанию скрипта, он будет делиться на три части: HTML, CSS и, собственно, сам код, написанный на JavaScript. Дополнительно я буду использоваться для удобства библиотеку jQuery.

Подключаем все необходимые файлы:

<link href="main.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="share.js" type="text/javascript"></script>

Теперь добавляем в файл share.js скрипт, он будет выглядеть таким образам:

var share = {

	twitter: function($this){

		var data = share.data($this);

		if(data){

			var url  = "http://twitter.com/share?";
				url += "text="      + encodeURIComponent(data.text);
				url += "&url="      + encodeURIComponent(data.url);
				url += "&hashtags=" + "";
				url += "&counturl=" + encodeURIComponent(data.url);

			share.popup(url);
		};

		return false;
	},
	vk: function($this){

		var data = share.data($this);

		if(data){

			var url  = "http://vkontakte.ru/share.php?";
				url += "url="          + encodeURIComponent(data.url);
				url += "&title="       + encodeURIComponent(data.title);
				url += "&description=" + encodeURIComponent(data.text);
				url += "&image="       + encodeURIComponent(data.img);
				url += "&noparse=true";

			share.popup(url);
		};

		return false;
	},
	facebook: function($this){

		var data = share.data($this);

		if(data){

			var url  = "http://www.facebook.com/sharer.php?s=100";
				url += "&p[title]="     + encodeURIComponent(data.title);
				url += "&p[summary]="   + encodeURIComponent(data.text);
				url += "&p[url]="       + encodeURIComponent(data.url);
				url += "&p[images][0]=" + encodeURIComponent(data.img);

			share.popup(url);
		};

		return false;
	},
	data: function($this){

		if($this){

			return $.parseJSON($this.parent("div").attr("data-share-data"));
		};

		return false;
	},
	popup: function(url){

		window.open(url, "", "toolbar=0, status=0, width=626, height=436");

		return false;
	}
};

Это объект с набором методов: twitter(), vk(), facebook(), data(), popup(). Первые три метода непосредственно отвечают за процесс поделиться. Вначале идёт обращение к методу data(), где парсится значение атрибута data-share-data и возвращается json. Далее формируется URL c с учётом полученных данных и вызывается метод popup(). Он отвечает за создания нового окна одной из этих соцсетей.

Добавляем разметку на страницу:

<div class="share">
	<div data-share-data='{"url": "http://falbar.ru/article/vsplyvayushhie-podskazki-na-chistom-css", "img": "http://falbar.ru/storage/images/2017/07/strelochka-ukazatel.png", "title": "Всплывающие подсказки на чистом CSS ", "text": "Всплывающие подсказки без jQuery на чистом CSS."}'>
		<div onclick="share.twitter($(this))" class="twitter"></div>
		<div onclick="share.vk($(this))" class="vk"></div>
		<div onclick="share.facebook($(this))" class="facebook"></div>
	</div>
</div>

Структура довольно простая, а именно обёртка с классом share, далее идёт div с атрибутом data-share-data, о котором было упомянута выше. Строка формируется из четырех параметров со своими значениями.

  • url – адрес которым мы делимся;
  • img – картинка, если она не нужна указываем пустую строку;
  • title – заголовок страницы;
  • text – нужное нам описание.

Внутри div лежат сами кнопки с навешенным на них событием onclick. По клику будет вызываться один из методов описанных выше.

Осталось только придать кнопкам человеческий вид и добавить CSS:

.share{
	background-color: #ececec;
	display: inline-block;
	padding: 7px 5px;
}
	.share div[data-share-data]:after{
		content: "";
		display: block;
		clear: both;
		height: 0;
	}
		.share div:first-child{
			margin-left: 0;
		}
		.share .twitter,
		.share .vk,
		.share .facebook{
			background-image: url(share.png);
			margin-left: 7px;
			border-radius: 3px;
			height: 24px;
			width: 24px;
			float: left;
			cursor: pointer;
		}
		.share .twitter{
			background-color: #00aced;
			background-position: 0 -61px;
		}
		.share .twitter:hover{
			background-color: #008abe;
		}
		.share .vk{
			background-color: #48729e;
			background-position: 0 -32px;
		}
		.share .vk:hover{
			background-color: #3a5b7e;
		}
		.share .facebook{
			background-color: #3c5a98;
			background-position: 0 0;
		}
		.share .facebook:hover{
			background-color: #30487a;
		}

В итоге после добавления CSS кнопки получаться вида:

sotsialnye-knopki-podelitsya

На этом написание скрипта законченно, в примере я использовал всего три социальных сети, если нужно подключить другие, то это не составит большого труда. Для этого потребуется добавить новый метод в объект share, не забывая прописать также дополнительно HTML и CSS. Ссылки, по которым происходит репост в соцсети можно получить двумя способами:

  • Воспользоваться API социальной сети, что не всегда помогает;
  • Выковырять у аналогичного сервиса, воспользовавшись firebugом или другим инструментом для веб-разработчика.

На этом я сегодня закончу, в одной из следующих статей допишем счетчик репостов для наших кнопок поделиться.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Adipoli – красивое представление ваших изображений

1 апреля 2015 Антон Кулешов

Продолжаем «наводить красоту» на наших сайтах, и сегодня поговорим о плагине под названием adipoli, при помощи которого можно создавать красивые hover effects.

Waves - волна под курсором

21 мая 2015 Антон Кулешов

Эффекты при клике не столь популярны как hover effects, однако, сегодня мой взор упал на плагин под названием waves.

Запрещаем ввод любых символов кроме чисел при помощи jQuery

16 сентября 2014 Антон Кулешов

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