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

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

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

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

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

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

Теперь перейдем по ссылке 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/id/97", "img": "http://falbar.ru/uploads/storage/images/2015/04/ffcf825c023909a06be1b99f6de573df.jpg", "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 кнопки получаться вида:

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

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

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

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

Часть 2. Добавляем счетчик.

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

Комментариев еще не оставлено