Избавляемся от JavaScript в социальных кнопках (Facebook, VK, Twitter и др.)
Как мы избавились от 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. Находим цвета брендов социальных сетей и пишем CSS-стили для них. Для Google+ и Surfingbird создаем дополнительные стили помещающие логотип в кнопку «правильным» образом. Стили: Код дополнительных CSS-стилей
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: 12 px; min-width: 25%; } i.surfingbird: before{ content: url (http://bootstrap-ru.com/cdn/i/surf.png); position: relative; left:0 px; top: -7 px; float: left; }
.google-plus-one{ overflow: hidden; position: relative; }
.google-plus-one i{ position: absolute; left: -4 px; bottom: -5 px; }
.google-plus-one span{ font-size: 16 px; font-weight: 900; line-height: 10 px; margin-left: 15 px; }
.btn-sm.google-plus-one span{ font-size: 14 px; } .btn-sm.google-plus-one i{ bottom: -3 px; } .btn-lg.google-plus-one span{ font-size: 20 px; margin-left: 18 px; } .btn-lg.google-plus-one i{ bottom: -5 px; } .btn-xs.google-plus-one span{ font-size: 12 px;} .btn-xs.google-plus-one i{ bottom: -7 px; } Создаем html-разметку кнопок Находим HTTP-endpoint«ы от социальных сетей, узнаем какие параметры можно передать через GET. Подбираем иконку и сверяемся с ранее созданными CSS-стилями. Мы будем использовать следующую разметку: Facebook Share Стандартная кнопка для «шаринга» URL с дополнительным текстом.HTTP-endpoint: http://www.facebook.com/sharer.phpПараметры: u — url t — сопровождающий текст Facebook Like Стандартный «лайк» для определенного URL.HTTP-endpoint: http://www.facebook.com/plugins/like.phpПараметры: Twitter Tweet «Твит» с ссылкой на страницу и дополнительным текстом.HTTP-endpoint: http://twitter.com/shareПараметры: url — url text — сопровождающий текст via — ссылка на Twitter-аккаунт (например официальный канал сайта) Google Plus One (+1) +1 к URLHTTP-endpoint: https://apis.google.com/_/+1/fastbuttonПараметры: url — url usegapi — Принимает значения true/false. Используется для включения/выключения показа дополнительного окна «расшарить» size — Принимает значения: small, medium, standard (по умолчанию), tall hl — Язык, список доступных языковС полным списком принимаемых параметров можно ознакомится — тут. Google Plus Share (Поделиться) Поделиться («расшарить») URL.HTTP-endpoint: https://plus.google.com/shareПараметры: url — url LinkedIn Share (Поделиться) Поделиться («расшарить») URL.HTTP-endpoint: http://www.linkedin.com/shareArticleПараметры: url — url VK.com (Vkontakte) Поделиться Поделиться («расшарить») URL. С возможностью указать название сайта, его описание и картинку.HTTP-endpoint: http://vk.com/share.phpurl — url title — Название сайта (страницы) description — Описание сайта (страницы) image — URL на картинкуС полным списком принимаемых параметров можно ознакомится — тут. Pinterest Pin Поделиться медиа-файлом и URL на Pinterest.HTTP-endpoint: http://www.pinterest.com/pin/create/button/url — url media — URL на картинку или видео description — Описание сайта (страницы) Surfingbird Surf! Поделиться («расшарить») URL. Имейте ввиду, что Surfingbird не парсит предоставленный URL-страницы, все параметры ниже обязательны к заполнению. Так же в Font Awesome не присутствует иконка Surfingbird, мы добавим её в виде картинки.HTTP-endpoint: http://surfingbird.ru/shareurl — url title — Название сайта (страницы) description — Описание сайта (страницы) screenshot — URL на изображение со скриншотом сайта Финальный код кнопок объединенных в .btn-group
Пример с полным набором работающих кнопок есть на jsfiddle.net и codepen.io.Полезные ссылки:
