Как мы избавились от JavaScript-библиотек социальных сетей, ускорили скорость загрузки страниц и использовали RESTful API для “шаринга” и “лайков”.

Почему HTML и только?

Все кнопи “шаринга” и “лайков” предлагаемые от 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 создаем дополнительные стили, помещающие логотип в кнопку “правильным” образом. Стили:

Создаем html-разметку кнопок

Находим HTTP-endpoint’ы от социальных сетей, узнаем какие параметры можно передать через GET. Подбираем иконку и сверяемся с ранее созданными CSS-стилями. Мы будем использовать следующую разметку:

<a
   class="btn btn-default"
   href=“addre.ss?param=_VALUE_”
>
   <i class="fa fa-social-icon additional-class”></i>
</a>

Facebook Share

Стандартная кнопка для “шаринга” URL с дополнительным текстом.
HTTP-endpoint: http://www.facebook.com/sharer.php
Параметры:

• u — url
• t — сопровождающий текст
• UPD: Для передачи описания страницы используйте OpenGraph, обсуждение на SO

Facebook Like

Стандартный “лайк” для определенного URL.
HTTP-endpoint: http://www.facebook.com/plugins/like.php
Параметры:

• u — url

Twitter Tweet

“Твит” с ссылкой на страницу и дополнительным текстом.
HTTP-endpoint: http://twitter.com/share
Параметры:

• url — url
• text — сопровождающий текст
• via — ссылка на Twitter-аккаунт (например официальный канал сайта)

Google Plus One (+1)

+1 к URL
HTTP-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.php

• url — 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/share

• url — url
• title — Название сайта (страницы)
• description — Описание сайта (страницы)
• screenshot — URL на изображение со скриншотом сайта

Пример с полным набором работающих кнопок есть на jsfiddle.net и codepen.io.

Полезные ссылки:

• Статья на английском: How to Social Buttons in HTML only using Twitter Bootstrap 3 and Font Awesome Icons (No Javascript)
• Палитра цветов брендов социальных сетей
• REST-endpoint’ы
• Библиотеки для генерации кнопок: shb и SocialButtons, UPD: shariff (запрашиваем данные на сервере), Social Likes (плагин jQuery)