Статьи

Как добавить обезжиренные социальные кнопки на ваши страницы

Ноябрь 27, 2018

Извините, Facebook, но добавление 270 КБ кода на мои страницы для отображения крошечной кнопки «Мне нравится» кажется чрезмерным. Как я уже обсуждал в своем недавнем посте, скрытая стоимость обмена информацией в социальных сетях , добавление кнопок Facebook, Twitter, Google+ и LinkedIn может увеличить ваши страницы, сделать сайты менее адаптивными и создать ненужные угрозы безопасности.

Так не должно быть. Большинство социальных сетей предлагают кнопки обмена на основе URL, которые добавляют весу странице и не требуют стороннего JavaScript. Они не так широко разрекламированы, но их нетрудно использовать.

Кодируй свой URL

Все эти ссылки передают представление вашей страницы в кодировке URL в социальную сеть. Например, используя PHP: 

$sURL = urlencode(
			'http' .
			($_SERVER['SERVER_PORT'] == 443 ? 's' : '') . '://' .
			$_SERVER['HTTP_HOST'] .
			$_SERVER['PHP_SELF']
		);

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

facebook

Поделиться на Facebook просто. Вы указываете URL, а Facebook выбирает заголовок, описание и эскиз:

URL: https://www.facebook.com/sharer/sharer.php

Основные параметры:

U : URL страницы

Пример: 

  https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsitepoint.com%2F

Дополнительные ресурсы доступны по адресу https://developers.facebook.com/docs/reference/plugins/share-links/.

щебет

Чтобы быть справедливым, Twitter всегда предлагал полностью документированную систему Web Intents , которая позволяет твитнуть ссылки на страницы.

URL: https://twitter.com/intent/tweet

Основные параметры:

URL : URL страницы
текст : необязательный текст
Хештеги : разделенный запятыми набор хэштегов

Пример: 

  https://twitter.com/intent/tweet?url=http%3A%2F%2Fsitepoint.com%2F&text=SitePoint&hashtags=web,development

Дополнительные ресурсы доступны по адресу https://dev.twitter.com/docs/intents

Google+

Ссылки для обмена Google похожи на Facebook:

URL: https://plus.google.com/share

Основные параметры:

URL : URL страницы

Пример: 

  https://plus.google.com/share?url=http%3A%2F%2Fsitepoint.com%2F

Дополнительные ресурсы доступны по адресу https://developers.google.com/+/web/share/.

LinkedIn

Ссылки для обмена LinkedIn похожи на Facebook:

URL: http://www.linkedin.com/shareArticle

Основные параметры:

мини : должно быть установлено в «истина»
URL : URL страницы
источник : компания / названный источник (максимум 200 символов)
заглавие : название статьи (максимум 200 символов)
резюме : краткое описание (максимум 256 символов)

Пример: 

  http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fsitepoint.com%2F&title=SitePoint

Дополнительные ресурсы доступны по адресу https://developer.linkedin.com/documents/share-linkedin.

Прогрессивные всплывающие окна

Ссылки будут работать во всех браузерах. Тем не менее, они уведут вас со страницы, которая является шагом слишком далеко для самого нетерпеливого менеджера по социальным сетям.

Давайте дадим нашим социальным ссылкам класс «поделиться», а затем добавим небольшую автономную функцию JavaScript в конец страницы, которая перехватывает все клики и открывает их в небольшом всплывающем окне. (Я согласен, что всплывающие окна — это зло, и это похоже на кодирование в 1999 году, но это все равно большинство социальных кнопок). 

 <script>
// create social networking pop-ups
(function() {
	// link selector and pop-up window size
	var Config = {
		Link: "a.share",
		Width: 500,
		Height: 500
	};

	// add handler links
	var slink = document.querySelectorAll(Config.Link);
	for (var a = 0; a < slink.length; a++) {
		slink[a].onclick = PopupHandler;
	}

	// create popup
	function PopupHandler(e) {

		e = (e ? e : window.event);
		var t = (e.target ? e.target : e.srcElement);

		// popup position
		var
			px = Math.floor(((screen.availWidth || 1024) - Config.Width) / 2),
			py = Math.floor(((screen.availHeight || 700) - Config.Height) / 2);

		// open popup
		var popup = window.open(t.href, "social", 
			"width="+Config.Width+",height="+Config.Height+
			",left="+px+",top="+py+
			",location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1");
		if (popup) {
			popup.focus();
			if (e.preventDefault) e.preventDefault();
			e.returnValue = false;
		}

		return !!popup;
	}

}());
</script>

Скрипт будет работать во всех браузерах, включая IE8 и выше. Если это не удается, браузер просто откроет страницу социальной сети в главном окне.

Посмотреть демонстрационную страницу …

В результате получается несколько ссылок и необязательный сценарий, содержащий не более 900 символов для обработки всплывающих окон. Кому нужно 580Кб кода социальной сети ?

34
Share: