Опубликовано автор в категориях Верстальщику.

Сервисы для внедрения социальных кнопок на сайт вещь безусловно удобная, классная, но… Как правило, размещая подобные скрипты на своем сайте, чтобы вывести панель с социальными кнопками для пользователя, вы подгружаете довольного большой объем сервисного JavaScript, что негативно сказывается на производительности фронтэнда вашего сайта. Если производительность для вас важнее некоторых «фишек», которые предоставляют сервисы для социального шаринга, то можно подойти к вопросу размещения социальных кнопок на сайте правильно. Ниже рассмотрим, как именно.

Отказываемся от специальных сервисов

Казалось бы, зачем? Ответ производительность. Итак, ниже приведена таблица с данными размера загружаемого JS популярными социальными ресурсами, в случае полного использования API

Site Files Size
Google+ 1 15.2KB
Facebook 3 71.7KB
LinkedIn 2 47.9KB
Pinterest 3 12.9KB
Tumblr 1 1.5KB
Twitter 1 34.5KB
Total 11 183.7KB

 

Это 11 запросов, а также порядка 1.29 секунды времени загрузки при высокоскоростном соединении. Что уже и говорить про мобильный Интернет. Так что, если для вас это важно, то следуйте инструкциям ниже.

Используйте специальные Share URL

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

Вот пример share ссылки Facebook:

https://www.facebook.com/sharer/sharer.php?u=URL_TO_SHARE

Facebook принимает только один параметр u, и вам нужно заменить его на ссылку, которой вы хотите поделиться. Это URL_TO_SHARE в примере.

URL Encode

Очень важно, используя подобные ссылки, помнить о том, что они должны быть перекодированы, пробелы и специальные символы в ссылках будут правильно интерпретированны только если это будет именно перекодированный формат ссылки. Ссылка в перекодированном виде будет выглядеть приблизительно так:
http%3A%2F%2Fwww.master-web.info%2F
В случае с популярным PHP, для этого есть специальная функция urlencode

Конструируем Share URL

Создать Share URL для Facebook довольно просто. Как уже говорилось выше, она принимает только один параметр — это перекодированная ссылка, которой вы хотите поделиться. Вот так будет выглядеть ссылка, для того чтобы поделится моим сайтом:
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.master-web.info%2F
Все что вам нужно сделать это использовать ее в для атрибута href тега a

<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.master-web.info%2F" target="_blank">Share on Facebook</a>

Атрибут target="_blank" использован, чтобы ссылка открылась в новом коне.

Множественные параметры

В случае с Facebbok все просто, там только один параметр. Однако, например Twitter, позволяет принимать несколько параметров.
https://jonsuh.com/blog/social-share-links/
https://twitter.com/intent/tweet?text=TWEET_TO_SHARE&url=URL_TO_SHARE&via=USERNAME_TO_SHARE
В данном примере мы видим три параметра text, url и via.
Теперь сформируем код ссылки:

<!--
text: Посетите мой сайт!
url : http://www.master-web.info/
via : hiway
-->
<a href="https://twitter.com/intent/tweet/?text=Посетите%20мой%20сайт!&url=http%3A%2F%2Fwww.master-web.info%2F&via=hiway" target="_blank">Посетите мой сайт!</a>

Немного JavaScript

Для того чтобы наши ссылки открывались не в новом окне, а в всплывающем, подобно ссылкам с использованием серверного JS, нужно добавить несколько строк JavaScript, совсем чуть-чуть.
Функция которая будет выполнятся для всплывающего окна:

function windowPopup(url, width, height) {
  // Calculate the position of the popup so
  // it’s centered on the screen.
  var left = (screen.width / 2) - (width / 2),
      top = (screen.height / 2) - (height / 2);
 
  window.open(
    url,
    "",
    "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=" + width + ",height=" + height + ",top=" + top + ",left=" + left
  );
}

Теперь к нашим кнопкам мы добавим слушатель события на клик. Для того чтобы это сделать добавим к кнопкам сначала класс js-social-share, а далее напишем такой скрипт (вариант для jQuery и чистый JS):

//jQuery
$(".js-social-share").on("click", function(e) {
  e.preventDefault();
 
  windowPopup($(this).attr("href"), 500, 300);
});
 
// Vanilla JavaScript
var jsSocialShares = document.querySelectorAll(".js-social-share");
if (jsSocialShares) {
  [].forEach.call(jsSocialShares, function(anchor) {
    anchor.addEventListener("click", function(e) {
      e.preventDefault();
 
      windowPopup(this.href, 500, 300);
    });
  });
}

Вот теперь ссылки будут открываться в всплывающем окне, а не в новом.

Share URLs популярных социальных платформ

Facebook

https://www.facebook.com/sharer/sharer.php?u=URL_TO_SHARE
Принимает только один параметры u, и он обязателен.

Google+

https://plus.google.com/share?url=URL_TO_SHARE
Имеет один обязательный параметр url, а по остальным читайте документацию

LinkedIn
https://www.linkedin.com/shareArticle?mini=true&url=URL_TO_SHARE&title=Some%20title&source=URL_FOR_SOURCE&summary=Short%20summary

Есть два обязательных параметра: mini — всегда равен true, и url. По остальным читайте документацию.

Pinterest

https://www.pinterest.com/pin/create/button/?url=URL_TO_SHARE&media=IMAGE_SOURCE_URL&description=Short%20description&hashtags=web,development
Параметр url обязательный. По остальным читайте документацию

Twitter

https://twitter.com/intent/tweet/?text=Some%20text%20&url=URL_TO_SHARE&via=username&hashtags=web,development
Все параметры задаются опционально. Детали в документации.

Итоги
Данная реализация, конечно же не предоставляет нам такого богатого функционала как специализированные сервисы, но зачастую, мы и не требуем такого богатого функционала. Однако, все популярные социальные сервисы имеют очень сильный API и при желании можно попробовать реализовать тот или иной функционал дополнительно. Только в данном случае уже лучше сразу определится что вам нужно и насколько сложно это будет сделать, возможно, тогда лучше в ущерб производительности использовать прикладные библиотеки.

Статья на английском

Оставить комментарий

  • (не будет показан)