Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Избавляемся от JavaScript в социальных кнопках (Facebook, VK, Twitter и др.)

Дата добавления: 09.02.2015 - 04:56
Добавил: Buger
Количество просмотров: 651
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
Избавляемся от JavaScript в социальных кнопках (Facebook, VK, Twitter и др.)
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 0.0
/
голосов 0
Как избавиься от 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-функционалу не требующему авторизации приложения, любой социальной сети.

Подготовка
Подключаем Twitter Bootstrap 3 и Font Awesome. Находим цвета брендов социальных сетей и пишем 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 — сопровождающий текст
UPD: Для передачи описания страницы используйте OpenGraph, обсуждение на StackOverflow

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 на изображение со скриншотом сайта

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

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

Источник: http://habrahabr.ru/post/250021/
Добавлять комментарии могут только зарегистрированные пользователи.