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

3 мая 2015 Антон Кулешов 2459 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
Читайте далее

Простой lightbox на JavaScript без jQuery

30 июля 2014 Антон Кулешов

Если порыться по интернету, то можно найти кучу вариаций по созданию lightbox. В основном их делают при помощи библиотек (jQuery). Когда сайт большой и скрипта много, это правильное решение. Зачем тратить время на всякие проверки, к тому же ещё и для ie придётся пол кода дописывать. Но если сайт не значительных размеров или вы не ориентируетесь на старые версии браузеров, то, тут я думаю, нет смысла тянуть библиотеку в десять тысяч строк кода, а то и больше, для реализации всплывающей подсказки или формы обратной связи.

Как сделать вкладки-табы для сайта на jQuery

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

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

Основы добавления материалов в Joomla

29 августа 2014 ti1schweiger

Joomla довольно простая и удобная система управления для создания, добавления и редактирования материалов. Любому, даже самому начинающему пользователю, будет не трудно её освоить. Сегодня расскажу о том, как добавить материал в Joomla.