Социальные кнопки
JQuery+font staurus
от cubeShare
PNG от qkowlew
SVG от qkowlew

Кнопки соцсетей


Здесь мы собрали небольшую коллекцию кнопок расшаривания ссылки на страницы сайта в социальных сетях. На самом деле все эти решения делятся на три основных группы:

Внешние сервисы

Основная идея этих решений состоит не столько в том, чтобы сделать вам красиво, сколько чтобы шпионить за посетителями вашего сайта.

Плюсы

  1. Есть показ числа нажавших на кнопочку
  2. Если сервис существует достаточно долго, как например Яндекс, есть уверенность в том, что он достаточно внимательно обновляет обращение к API соцсетей, и вы вряд ли попадёте в ситуацию "ой, что-то не работает и непонятно как исправить"
  3. Интерактивная простая для пользователя настройка внешнего вида и набора соцсетей в интерфейсе сервиса, часто - с немедленным отображением результата

Минусы

  1. В зависимости от провайдера, конкретных соцсетей, конкретного сервиса, скорость загрузки страницы может оказаться просто ужасной
  2. Даже очень долго существующий сервис может что-то неожиданно поменять. Вон тот же Гугль Плюс прекращает существование в 2019 году, и что теперь? :)
  3. Роскомнадзор бдит. Вы можете оказаться в ситуации "страницы сайта грузятся вечность" не из-за вашего провайдера, не из-за хостинга, не из-за проблем у внешнего сервиса, а из-за действий третьих лиц
  4. Как и с роскомнадзором, если вы берёте яваскрипты, картинки и стилевые файлы с внешних сервисов, конкретный домен может разделегироваться, его ДНСы могут не вполне адекватно работать (см 1 марта 2019 года и eDNS0!), их могут взломать в конце концов. Используя такие решения, вы ставите работоспособность сайта в зависимость от действий уже не третьих, а четвёртых и пятых лиц
  5. Так как в этом случае вы ни в малейшей степени не контролируете яваскрипты, загружаемые со сторонних сайтов в контексте вашего сайта, ваш сайт и ваш бизнес могут пострадать юридически. Если обработка украденных злоумышленными скриптами со страниц вашего сайта персональных данных какого либо пользователя всего лишь... производилась за пределами Российской Федерации.
Потому неудивительно, что народ стал строить "чистые социальные кнопки", свободные от таких зависимостей. Но сначала стали действовать "в лоб", заимствуя готовые решения, написанные с применением тяжеловесных библиотек, с картинками и CSS стилями. Потому что так было проще, тяп ляп и в продакшн. В результате стали получаться:

Огромные скрипты с картинками, шрифтами, стилями

Например, тут

Сайтам, на которых и так уже есть тяжеловесные яваскриптовые библиотеки и подгружаемые шрифты, увеличение числа таких элементов уже не повредит. Потому народ с удовольствием применяет конструкции на сотни килобайт и подгружаемый для них шрифт AweSome с кучей социальных кнопок.

Плюсы

  1. Наиболее широкие возможности настройки внешнего вида CSS
  2. Отсутствие зависимости от внешних сервисов

Минусы

  1. Большое время загрузки страниц сайта, в том числе повышение сложности рендеринга страницы
  2. Сложность установки на сайт, требуется внимательно редактировать сайт сразу в нескольких местах
При тестировании в поисковиках (например в сервисе PageSpeed Гугла) народ, ставящий такие "чистые" конструкции, быстро обнаруживает, что не всё так уж хорошо... Потому стали появляться решения:

Минималистические

Всё собрано в один яваскрипт, нет никаких обращений к каким либо внешним ресурсам, библиотекам и шрифтам. Все изображения сформированы яваскриптом же.

Плюсы

  1. Простота установки на сайт - единственный файл и единственная строка в HTML коде
  2. Простота упаковки и кеширования яваскрипта
  3. Наилучшее отношение поисковых систем к скорости его загрузки
  4. Есть уверенность в том, что на вашем сайте не загружается ничего такого, за что вас могут взять за задницу по формальным признакам

Минусы

  1. Отсутствует интерактивный показ числа нажавших на кнопочку
  2. При изменении логики обращения к конкретной социальной сети приходится самому лезть в скрипт и менять порой достаточно сложную конструкцию
  3. Внешний вид сравнительно легко меняется в предусмотренных автором скрипта пределах, но за его пределами требует вдумчивого и внимательного редактирования и добавления стилей и классов.
  4. Несовместимость со старыми браусерами. Однако по мере того, как происходит изменение протокола SSL/TLS, актуальность поддержки старых браусеров в том случае, если посетитель ходит в социальные сети, приближается к нулю. Всё равно все соцсети сейчас предоставляют доступ исключительно по https