- PVSM.RU - https://www.pvsm.ru -
Как мы избавились от JavaScript-библиотек социальных сетей, ускорили скорость загрузки страниц и использовали RESTful API для “шаринга” и “лайков”.
Все кнопи “шаринга” и “лайков” предлагаемые от Twitter, Google+, LinkedIn, vk.com, Facebook обязывают нас внедрять в проекты их собственный JavaScript-код, каждый подключенный скрипт выполняет запросы и подгружает дополнительные файлы со сторонних серверов, каждый запрос «на сторону» замедляет скорость загрузки страницы и увеличивает нагрузку на устройство пользователя. Пользователь вынужден ждать пока будут закончены такие процессы как DNS-lookup, HTTP-запрос, затем ответ включающий в себя сам скрипт, стили и изображения используемые в кнопке.
Далее следует процесс проверки пользователя на предмет авторизации в социальной сети, парсинг пришедшей информации, переваривание DOM’а и отрисовка новых элементов. После того как все необходимые процессы для появления самой кнопки — окончены, погруженный скрипт продолжает работать, устанавливает third-party cookies, следит за пользователем, его действиями и предпочтаниями (вот откуда социальные сети показывают нам “правильную” рекламу).
Другой момент — все “шаринг/лайк”-кнопки находятся вне нашего контроля, как их поведение, так и стили на странице.
Мы решили использовать RESTful API (он же HTTP GET) и связку Twitter Bootstrap 3 + Font Awesome для имплеменации кнопок “шаринга” и “лайков” от всех популярных социальных сетей, данный подход применим к любому открытому REST-функционалу не требующему авторизации приложения, любой социальной сети.
Подключаем TWBS3 и FA. Находим цвета брендов социальных сетей [1] и пишем CSS-стили для них. Для Google+ и Surfingbird создаем дополнительные стили помещающие логотип в кнопку “правильным” образом. Стили:
i.fb, span.fb{ color: #3b5998; }
i.tw, span.tw{ color: #00aced; }
i.google, span.google{ color: #dd4b39; }
i.linkin, span.linkin{ color: #007bb6; }
i.vk, span.vk{ color: #45668e; }
i.pinterest,span.pinterest{color: #cb2027;}
i.surfingbird{ max-height: 12px; min-width: 25%; }
i.surfingbird::before{
content: url(http://bootstrap-ru.com/cdn/i/surf.png);
position: relative;
left:0px;
top: -7px;
float: left;
}
.google-plus-one{
overflow: hidden;
position: relative;
}
.google-plus-one i{
position: absolute;
left: -4px;
bottom: -5px;
}
.google-plus-one span{
font-size: 16px;
font-weight: 900;
line-height: 10px;
margin-left: 15px;
}
.btn-sm.google-plus-one span{ font-size: 14px; }
.btn-sm.google-plus-one i{ bottom: -3px; }
.btn-lg.google-plus-one span{ font-size: 20px; margin-left: 18px; }
.btn-lg.google-plus-one i{ bottom: -5px; }
.btn-xs.google-plus-one span{ font-size: 12px;}
.btn-xs.google-plus-one i{ bottom: -7px; }
Находим HTTP-endpoint’ы от социальных сетей [2], узнаем какие параметры можно передать через GET. Подбираем иконку и сверяемся с ранее созданными CSS-стилями. Мы будем использовать следующую разметку:
<a
class="btn btn-default"
href=“addre.ss?param=_VALUE_”
>
<i class="fa fa-social-icon additional-class”></i>
</a>
Стандартная кнопка для “шаринга” URL с дополнительным текстом.
HTTP-endpoint: http://www.facebook.com/sharer.php
Параметры:
u
— urlt
— сопровождающий текст
Стандартный “лайк” для определенного URL.
HTTP-endpoint: http://www.facebook.com/plugins/like.php
Параметры:
u
— url
“Твит” с ссылкой на страницу и дополнительным текстом.
HTTP-endpoint: http://twitter.com/share
Параметры:
url
— urltext
— сопровождающий текстvia
— ссылка на Twitter-аккаунт (например официальный канал сайта)
+1 к URL
HTTP-endpoint: https://apis.google.com/_/+1/fastbutton
Параметры:
url
— urlusegapi
— Принимает значения true
/false
. Используется для включения/выключения показа дополнительного окна “расшарить”size
— Принимает значения: small
, medium
, standard
(по умолчанию), tall
hl
— Язык, список доступных языков [3]
Поделиться (“расшарить”) URL.
HTTP-endpoint: https://plus.google.com/share
Параметры:
url
— url
Поделиться (“расшарить”) URL.
HTTP-endpoint: http://www.linkedin.com/shareArticle
Параметры:
url
— url
Поделиться (“расшарить”) URL. С возможностью указать название сайта, его описание и картинку.
HTTP-endpoint: http://vk.com/share.php
url
— urltitle
— Название сайта (страницы)description
— Описание сайта (страницы)image
— URL на картинку
Поделиться медиа-файлом и URL на Pinterest.
HTTP-endpoint: http://www.pinterest.com/pin/create/button/
url
— urlmedia
— URL на картинку или видеоdescription
— Описание сайта (страницы)
Поделиться (“расшарить”) URL. Имейте ввиду, что Surfingbird не парсит предоставленный URL-страницы, все параметры ниже обязательны к заполнению. Так же в Font Awesome не присутствует иконка Surfingbird, мы добавим её в виде картинки.
HTTP-endpoint: http://surfingbird.ru/share
url
— urltitle
— Название сайта (страницы)description
— Описание сайта (страницы)screenshot
— URL на изображение со скриншотом сайта<div class="btn-group">
<button
class="btn btn-default disabled"
>
Share:
</button>
<a
class="btn btn-default"
target="_blank"
title="Like On Facebook"
href="http://www.facebook.com/plugins/like.php?href=_URL_"
>
<i class="fa fa-thumbs-o-up fa-lg fb"></i>
</a>
<a
class="btn btn-default google-plus-one"
target="_blank"
title="+1 On Google"
href="https://apis.google.com/_/+1/fastbutton?usegapi=1&size=large&hl=en&url=_URL_"
>
<i class="fa fa-google-plus fa-2x google"></i><span class="google">1</span>
</a>
<a
class="btn btn-default"
target="_blank"
title="On Facebook"
href="http://www.facebook.com/sharer.php?u=_URL_&t=_DESCTEXT_"
>
<i class="fa fa-facebook fa-lg fb"></i>
</a>
<a
class="btn btn-default"
target="_blank"
title="On Twitter"
href="http://twitter.com/share?url=_URL_&text=_DESCTEXT_"
>
<i class="fa fa-twitter fa-lg tw"></i>
</a>
<a
class="btn btn-default"
target="_blank"
title="On Google Plus"
href="https://plusone.google.com/_/+1/confirm?hl=en&url=_URL_"
>
<i class="fa fa-google-plus fa-lg google"></i>
</a>
<a
class="btn btn-default"
target="_blank"
title="On LinkedIn"
href="http://www.linkedin.com/shareArticle?mini=true&url=_URL_"
>
<i class="fa fa-linkedin fa-lg linkin"></i>
</a>
<a
class="btn btn-default"
target="_blank"
title="On VK.com"
href="http://vk.com/share.php?url=_URL_&title=_TITLE_&description=_DESCTEXT_&image=_URL_TO_MEDIA"
>
<i class="fa fa-vk fa-lg vk"></i>
</a>
<a
class="btn btn-default"
target="_blank"
title="Pin It"
href="http://www.pinterest.com/pin/create/button/?url=_URL_&description=_DESCTEXT_&media=_URL_TO_MEDIA"
>
<i class="fa fa-pinterest fa-lg pinterest"></i>
</a>
<a
class="btn btn-default"
target="_blank"
title="Surf!"
href="http://surfingbird.ru/share?url=_URL_&description=_DESCTEXT_&screenshot=_URL_TO_MEDIA&title=_TITLE_"
>
<i class="fa surfingbird fa-lg"></i>
</a>
</div>
Пример с полным набором работающих кнопок есть на jsfiddle.net [6] и codepen.io [7].
Полезные ссылки:
Автор: drdimitru
Источник [11]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/82045
Ссылки в тексте:
[1] цвета брендов социальных сетей: http://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
[2] HTTP-endpoint’ы от социальных сетей: https://gist.github.com/dr-dimitru/7164862
[3] список доступных языков: https://developers.google.com/+/web/+1button/#available-languages
[4] тут: https://developers.google.com/+/web/+1button/#tag_parameters
[5] тут: http://vk.com/pages?oid=-17680044&p=Sharing_External_Pages
[6] jsfiddle.net: http://jsfiddle.net/ostrio/MVDh6/6/
[7] codepen.io: http://codepen.io/OstrIO/pen/ICGiH
[8] How to Social Buttons in HTML only using Twitter Bootstrap 3 and Font Awesome Icons (No Javascript): http://ostr.io/code/html-social-like-share-buttons-no-javascript.html
[9] shb: https://github.com/dr-dimitru/SHB-js
[10] SocialButtons: https://github.com/fonorobert/SocialButtons
[11] Источник: http://habrahabr.ru/post/250021/
Нажмите здесь для печати.