Позбавляємося від JavaScript у соціальних кнопках (Facebook, VK, Twitter та ін)


Як ми позбулися 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 створюємо додаткові стилі ставлячи логотип на кнопку «правильним» способом. Стилі:
Код додаткових 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: 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; }



Створюємо 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
    — супроводжуючий текст


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.ua/share

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


Фінальний код кнопок об'єднаних в .btn-group
<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.ua/share?url=_URL_&description=_DESCTEXT_&screenshot=_URL_TO_MEDIA&title=_TITLE_"
>
<i class="fa surfingbird fa-lg"></i>
</a>
</div>



Приклад з повним набором працюючих кнопок є на jsfiddle.net і codepen.io.

Корисні посилання:


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.