16 Декабря 2014 CubeCamp 3 061 8 В избр. Сохранено

Оптимизируем страницу при помощи собственных социальных кнопок

В статье рассмотрены готовые решения и показан способ создания собственных быстрых и красивых социальных кнопок.

Мнение автора может не совпадать с мнением редакции

Готовые решения социальных кнопок

Когда мы начинали делать наш продукт, мы серьезно не задумывались по поводу шаринг-кнопок на сайт. Просто взяли готовые сервисы и добавили на страницы:

http://www.pluso.ru - для русской версии
http://www.addthis.com - для английской версии

Но со временем мы заметили, что с ними не все так гладко. А именно:

лишний трафик
не всегда корректно работает через ajax
реклама
долго загружаются или не загружаются вообще
поедают память браузера, особенно когда контент постоянно обновляется через ajax

Поэтому мы стали искать другие варианты предоставления пользователям поделиться нашей ссылкой в социальных сетях.

На github есть много готовых решений, например:

По сути, мы могли на этом остановиться, но было решено сделать свой вариант, так как нам всего лишь надо 5 различных шаринг-кнопок (VK, Facebook, Twitter, Google+, LinkedIn + отправка на электронную почту) без каких-либо наворотов. Как известно, хочешь сделать хорошо - сделай сам.

Создание собственных кнопок

Так как на сайте мы уже использовали шрифты с социальными иконками (для кнопок авторизации через соц сети и для ссылок на группы) то мы просто взяли их - дополнительной памяти на них не требуется.

Так же можно воспользоваться готовыми элементами, например для bootstrap - http://lipis.github.io/bootstrap-social/ который использует Font Awesome (Font Awesome сам по себе очень большой, по этому если Вам надо только определенные иконки, то советуем выбрать только те которые нужны через http://fontello.com/)

Мы создали страницу, где приведены примеры использования наших собственноручно написанных социальных кнопок, если возникнут вопросы - спрашивайте в коментариях:

http://www.cubecamp.ru/articles/share/cubecamp.html

Статистика и выводы

Addthis - примерно 11 запросов на сервис и примерно 200кб трафика (с кешем примерно 2.6кб)
Pluso - примерно 9 запросов на сервис и примерно 45кб трафика (с кешем примерно 1.4кб)
Собственное решение - 3.5кб сам скрипт (с кешем примерно 200б) + иконки на ваше усмотрение

Даже такая мелочь как социальные кнопки могут серьезно влиять на скорость загрузки страницы, особенно если пользователь использует данные через мобильную сеть. Потратив небольшое время на создание собственных кнопок вы увеличите скорость, получите возможность создать свой дизайн и приктрутить дополнительный функционал, например статистику. И никаких лишних запросов на сторонние сервисы + не надо волноваться если вдруг они не загрузятся.

P.S. Список ссылок на шаринг самых популярных социальных сетей, для тех кому лень искать:

Twitter https://twitter.com/intent/tweet?text=YOUR-TITLE&u...
Facebook https://www.facebook.com/sharer/sharer.php?u=YOUR-...
Google plus https://plus.google.com/share?url=YOUR-URL
LinkedIn https://www.linkedin.com/shareArticle?mini=true&ur...
Pinterest https://pinterest.com/pin/create/button/?url=YOUR-...
VK https://vk.com/share.php?url=YOUR-URL&title=YOUR-T...
Xing https://www.xing-share.com/app/user?op=share;sc_p=xing-share;url=YOUR-URL
Tumblr http://www.tumblr.com/share/link?url=YOUR-URL&desc...
Reddit http://www.reddit.com/submit?url=YOUR_URL&title=YO...
Odnoklassniki http://www.odnoklassniki.ru/dk?st.cmd=addShare&st....

В избр. Сохранено