Убираем JavaScript из кнопок социальных сетей

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

Простой способ убрать JavaScript-библиотеки соцсетей, существенно увеличить скорость загрузки web-страниц и применить RESTful API для кнопок like и share.

 

 

Почему только лишь HTML и ничего другого?

Любые like и share кнопки доступные в Твиттере, Гугл+, Вконтакте, Фейсбук или LinkedIn заставляют владельцев сайтов вносить в свои структуры их личный JavaScript-код. Каждый новый использованный script обращается и загружает чужие файлы с чужих серверов, и понятно, что любой сторонний запрос делает медленнее загрузку web-страницы и повышает уровень нагрузки на гаджет юзера. Так что он обязан дождаться окончания HTTP-запроса, DNS-lookUp, после чего идет ответ с самим script’ом, картинками и стилями, работающими в кнопке.

Далее проверяется авторизация юзера в соцсетях, информационный парсинг, перестраивание DOM-дерева и выстраивание новых элементов. По завершению всех процессов загрузки кнопки, script продолжает свою деятельность, ставит third-party cookies, наблюдает за поведением и вкусами юзера (благодаря чему соцсети и демонстрируют нам исключительно «актуальную» для нас рекламу).

Ещё один нюанс в том, что каждая like-share-кнопка (поведение и стиль на странице) находится за пределами нашей способности как-то повлиять на неё.

В нашем случае мы взяли RESTful API (или по-другому HTTP GET), а также Twitter Bootstrap 3 плюс Font Awesome для имплементации like-share-кнопок от каждой известной соцсети. Подобный взгляд на вещи будет актуален для любого открытого  REST-функционала без необходимости авторизации приложения, для всех соцсетей.

 

Подготовительный этап

Включаем Twitter Bootstrap 3 и Font Awesome. Берем цвета брендов соцсетей и прописываем для них CSS-стили. Для Surfingbird и Гугл+ организуем доп.стили, чтобы разместить логотип в кнопке «верным» образом. CSS:

 

Размечаем кнопки при помощи HTML

Ищем HTTP-endpoint’ы от соцсетей, определяем передаваемые через GET параметры. Выбираем иконку и делаем сверку с CSS-стилями, созданными выше. В нашем случае мы применили такую разметку:

 

Кнопка «шаринг» на Фейсбуке

Классическая URL кнопка share  с доп.текстом.

HTTP-endpoint: http://www.facebook.com/sharer.php

Параметры:

 

Кнопка «лайк» на Фейсбуке

Классический like для конкретного URL.

HTTP-endpoint: http://www.facebook.com/plugins/like.php

Параметры:

 

«Поделиться» Вконтакте

Поделиться URL. Тут вы также имеете возможность поставить имя сайта, изображение и небольшое описание.

HTTP-endpoint: http://vk.com/share.php

Параметры:

Чтобы изучить весь перечень используемых параметров вы можете зайти сюда.

 

«Твинуть» на Твиттере

Twitt с перелинковкой на страницу и доп. текстом.

HTTP-endpoint: http://twitter.com/share

Параметры:

 

Google+ кнопка «+1»

+1 к URL

HTTP-endpoint: https://apis.google.com/_/+1/fastbutton

Параметры:

 

Google+ кнопка «поделиться» (share)

Share (“поделиться”) URL.

HTTP-endpoint: https://plus.google.com/share

Параметры:

 

«Серфнуть!» на Surfingbird

«Расшарить» (Serf!) URL. Учитывайте тот факт, что данная социальная сеть не парсит указанный URL-страницы, все данные должны быть заполнены в обязательном порядке. В Font Awesome нет Surfingbird-иконки, так что мы исправим это при помощи изображения.

HTTP-endpoint: http://surfingbird.ru/share

Параметры:

 

«Поделиться» в LinkedIn

Share URL.

HTTP-endpoint: http://www.linkedin.com/shareArticle

Параметры:

 

Pinterest Pin

Расшарить media-file\ URL на Pinterest.

HTTP-endpoint: http://www.pinterest.com/pin/create/button/

Параметры:

1677 0

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *