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

  • Tutorial
Как мы избавились от 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 — сопровождающий текст
  • 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 на изображение со скриншотом сайта


Финальный код кнопок объединенных в .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.

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

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 44

    +5
    Одно плохо — лишаемся счётчиков шаринга. Это психологически достаточно важный момент, влияет на посетителя странички.
      0
      Можно сделать единственный скрипт (наверняка, кто-нибудь уже сделал), который заботится обо всех счётчиках сразу.
        +3
        Артём Сапегин сделал jQuery-плагин Social Likes. И настраиваемый внешний вид, и счетчики — все одной библиотекой. При желании можно добавлять свои сети.
          +1
          Если интересно, то можно написать самому, лайки и шары легко получить в виде JSON или XML (нужно бы собрать Gist, на данную тему), вот пример для FB: api.facebook.com/restserver.php?method=links.getStats&urls=website.com
            +1
            кое что уже есть gist.github.com/jonathanmoore/2640302
              0
              у всех соцсетей с этим все ок, кроме VK, который отдает только JSONP в виде VK.Share.count(index, num); и ради которого приходится создавать объекты
                +1
                (чувствую меня разопнут сейчас, но)

                А в лоб парсить строку одной простой регуляркой, не?
                  0
                  парсить можно, если это делать на сервере, например после file_get_contents. А вот если это делать изнутри JS, то эта строка — JSONP, она нигде не отдается, она сразу выполняется.

                  Ну или я просто чего-то не знаю, тогда может быть сейчас и узнаю)
        +4
        Facebook Share

        Стандартная кнопка для “шаринга” URL с дополнительным текстом.
        HTTP-endpoint: www.facebook.com/sharer.php
        Параметры:
        u — url
        t — сопровождающий текст


        Текст таким образом больше не шарится. Нужно использовать
        <meta property="og:type" content="content">
        
        тэги на странице, которая шарится.

        stackoverflow.com/questions/12547088/how-do-i-customize-facebooks-sharer-php
          0
          Спасибо за замечание, поправлю на всех ресурсах информацию. Вообще использование opengraph и schema.org заслуживают отдельной статьи.
            0
            Добавлю, что чтобы те же теги действовали на расшаренные в твиттер ссылки и в твиттере эти ссылки отображались прям с аннотацией, с картинкой, ссылкой на твиттер автора, нужно пройти валидацию у Твиттера и попасть в белые списки (по ссылке есть возможность подать такую заявку).
          +8
          Тащить целый Bootstrap для отображения кнопок (совсем обленились верстальщики)? В своих проектах я ухожу от этого css-фреймворка оставляя только сетку (и то пока), Но это не существенное замечание — основное, это отображение количества лайков, ведь уже проставленные лайки это главный мотиватор поставить еще — люди ставят лайки там где ставят лайки другие как показатель ценности материала!
            +1
            Вы правы, логичнее будет собрать только кнопки в кастомайзере на get bootstrap.com, так же можно поступить и с font awesome.
              +8
              Никогда не было мотивацией (для меня лично) сколько там уже лайков. Я — не «баран»? Отчего большинство «бараны»?
                +5
                Мне кажется это вопрос из другой, но не менее интересной области, но факт остаётся фактом.
                  +1
                  Не вижу ничего интересного в изучении стадного чувства. Личностью нужно быть. И да, стоять на красный не смотря ни на что)
                  +3
                  Почему, когда толпа стоит на пешеходном переходе и ждёт зелёного сигнала, если один начнёт переходить на красный, следом за ним двинутся ещё несколько из толпы? Тот же самый эффект. Вы из тех, кто всё равно останется стоять и ждать зелёного сигнала.
                    0
                    Я в этом случае специально дождусь зеленого — даже если машин нет :-)
                    А вот если никто не идет — то я с большей вероятностью пойду.
                    0
                    А нужна тьма баранов зачастую =) Логика простая:
                    Если количество не мотивация, то в минус не будет
                    Если мотивация — добавит ещё, но, если есть что добавлять) (а кто указал, что количество «поделиться» должно быть реальным ?)
                    +2
                    Уже давно для этих целей использую social-likes (тоже никакого dns-lookup)
                    Там кстати есть возможность включить/выключить счетчики, дописать доп. сервисы при инициализации.
                    Также на одном проекте делал ленивую загрузку значений счетчиков при появлении счетчиков в области видимости.
                      0
                      Есть ещё Shariff — принцип работы тот же, но есть и счётчик лайков — вместо браузера пользователя количество лайков и репостов запрашивает ваш сервер.
                      Пример использования. Есть даже кнопка для WhatsApp ;-)
                        +4
                        Забавно — ТС предлагает отказаться от JS, но при этом тянет Bootstrap, другие предлагают альтернативное решение где требуется только jQuery.
                          0
                          В кастомайзере на getbootstrap.com можно собрать стили только для кнопок, так же можно поступить и с font awesome. Тем не менее тема отказа от jQuery заслуживает отдельной статьи
                            +3
                            Тем не менее, для многих jQuery уже пережиток прошлого
                              0
                              monolithed я на это и намекаю — jQuery уже не панацея в наши времена
                                0
                                Ок, хорошо что вы так считаете )
                                +1
                                Поделитесь, пожалуйста, а что сейчас для многих настоящее? А то я не в теме
                                  0
                                  А можно с непраздным интересом уточнить, на что, окромя jQuery/TwiBootstrap стоит посмотреть?
                                    0
                                    Простите-с, я по-ходу не в теме. Какая уже существует замена jQuery? Только его неплохо выучил, думаю вот круто, в ногу со временем неплохо иду, а тут… печалька короче(
                                +1
                                С нативными кнопками есть еще одна беда — если социалки заблокированы на работе/в стране, то браузер долго будет пытаться подгрузить нужные файлы, тормозя работу сайта.
                                  0
                                  Не будет, если грузить их асинхронно.
                                  0
                                  Не то слово, сколько тащут за собой эти счетчики. тоже запаривался с оптимизацией скорости загрузки страницы.
                                  Аналогично дело обстоит со встраиванием видео с ютуба и подобных сервисов. Чекнуться можно, при 10 роликах браузер рендерит страницу нестерпимо просто.Там верстки еще на пол кило.
                                  В связи с чем делал плагин wordpress.org/plugins/youtube-speedload/
                                  работает очень гибко, не создает зависимостей, не требует пересохранения страниц, хранит параметры в стандартном кеше пресса, где он хранит ютубовский кеш iframe. Об этом тоже, думаю, есть смысл поговорить.
                                    +1
                                    По той же причине избавились от Ютуба на livejournal.com (мес. 8 назад). Подход — такой же, как описан в этой статье относительно счётчиков (используется лишь картинка и ссылка, предоставляемые сервисом ютуба).
                                      0
                                      youtube у меня на копеешно кодном бложике тащил что-то около мегабайта всякого булщита.
                                      +2
                                      А что насчет счетчика звёзд на github?
                                        0
                                        Да, но если при использовании нативных кнопок любое изменение со стороны соц. сети не вызовет проблем с работой кнопок, то в случае с использованием чего-то своего получаем ещё одно поле, где необходимо постоянно следить за любыми изменениями.

                                        Я не прав?
                                          0
                                          Имейте ввиду, что Surfingbird не парсит предоставленный URL-страницы, все параметры ниже обязательны к заполнению.

                                          Парсим же: surfingbird.ru/share?url=http%3A%2F%2Fhabrahabr.ru%2Fpost%2F250021%2F
                                          • UFO just landed and posted this here
                                              0
                                              Вы избавились от js, но теперь зпвисите от серверного рендера. Я не могу использовать ваше решения у себя без правки бекенда. Плюс лишились ряда фич. Сомнительная оптимизация. Я бы смотрел в сторону агрегаторов лайков тогда уж, например от Яндекса
                                                +1
                                                Ссылку можно вставлять как на сервере так и клиенте, можно динамически парсить мета-теги на событии onclick.
                                                В статья я описываю подход, а не решение. Пользоваться им или нет — решать Вам. Если Вы решили воспользоваться предложенным подходом, как его использовать тоже решать — Вам. Кнопки собирать можно на сервере, можно на клиенте, возможно Вы найдете другое более удобное для себя решение.
                                                0
                                                Правильно ли я понимаю, что параметры, передаваемые кнопками посредством GET запроста, при таком подходе необходимо формировать для каждой страницы как-то отдельно, то есть придётся дорабатывать бэкэнд (чтобы href кнопок сразу содержали готовые параметры), либо делать формирование запроса по событию onclick?
                                                  0
                                                  Да, пожалуйста ознакомьтесь с моим комментарием выше

                                              Only users with full accounts can post comments. Log in, please.