Как я решил сделать свои кнопки для шаринга

Всем привет, дорогие читатели ipetrenko.com!
Сегодня я бы хотел Вам рассказать о том, как я пришел к выводу, что лучшие кнопки это те, которые сделаны своими руками.

Почему я решил отказаться от сторонних сервисов?

Тот, кто посещает IP в течении последнего года, помнит что долгое время у меня были установлены кнопки от сервиса Share42. Меня они более чем устраивали по следующим причинам:

• присутствуют русские социальные сети;
• есть кнопка сохранение в Evernote;
• в наличии кнопки «Наверх», «Печать» и «Добавить в избранное»;
• «старый» вид иконок для ВК и Твиттера (согласен, преимущество на любителя).

Но были минусы, среди которых настройка блока, а если быть точнее сервисов, которые там отображались. То есть, я создал виджет, выбрал иконки, скачал архив, установил на сайт и всё – пользуюсь. Однако, как только я надумал убрать/добавить какую-то социальную сеть – нужно было создавать новый виджет.

Я всегда выбирал плавающий вертикальный блок. Мне казалось, что он очень удобен при просмотре с ПК – и это так и было. Но вот при посещении сайта с мобильного устройства блок выглядел коряво. Меня это немного напрягло.

Как вы помните, я писал в статье про сжимание изображений о том, что Google советует минимизировать количество сторонних документов на веб-странице (в том числе js кода) и по максимуму его сжимать. И наличие скрипта для этих кнопочек соц.сетей - плюс 10 Кб для страницы. Вроде бы немного, да? Вот с таких мелочей и складывается страница. Этот факт тоже меня напряг.

Я стал на поиск нового сервиса кнопок для добавления контента в социальные сети.

Что я попробовал?

Блок «Поделиться» от Яндекса
Чудесный сервис, который у российской компании вышел лучше чем у Google. Серьезно, есть разные стили и разнообразие сервисов. Но есть «баг», который заставил меня отказаться от этих кнопок.

Когда страница открывается точно по ссылке, например: https://www.ipetrenko.com/2016/04/support-for-bloggers.html, то проблем с шарингом нету – счетчик показывает всё нормально и скрипт отдает в кнопку нужный URL. Но есть иная ситуация: я оставил комментарий и решил поделиться постом. В адресной строке такая ситуация: https://www.ipetrenko.com/2016/04/support-for-bloggers.html?showComment=1462265100674#c238831197560954292.И именно этот URL будет шарить Яндекс. А это очень плохо!

Насколько я понимаю, то проблема в том, что скрипт URL «тянет» не с метатега rel="canonical", а с адресной строки.

rrssb
Прикольный и очень современный сервис. Очень понравилась адаптивность и «легкость». Есть огорчение – масштабирование настроено с помощью иконок в svg формате, которые через раз нормально отображались на IP. Русских соц.сетей на момент публикации нету.

Pluso и их же с ними
Многие используют этот сервис и схожие с ним. Однако опять вопрос об оптимизации загрузки страницы – сторонний скрипт на сайте не кульно. Да и репутация не совсем чиста у сервиса.

Читайте также: Что такое кнопка Like и зачем она нужна?

Сделай сам

Сидел я и думал: кнопки должны помочь поделиться моим контентом или сохранить его на странице юзера в соц.сети и это должно быть максимально просто! Также пришел к выводу, что все эти счетчики не очень важны, если пост действительно классный и нужный. И здесь в голову пришла идея сделать самому кнопки для шаринга.

Требований к кнопкам у меня всего лишь три:

• легкость;
• яркость;
• удобность.

Растолкую подробней. Легкость - они должны быть минимально зависимы от сторонних скриптов, графики и прочего. Яркость - их должен заметить пользователь. ИХ ДОЛЖЕН ЗАМЕТИТЬ ПОЛЬЗОВАТЕЛЬ! Удобность - ими хочется воспользоваться (1 пункт + 2 пункт).

Первое что пришло в голову – текстовые ссылки, однако они вообще не презентабельные. Но, если ваш сайт очень минималистичный, то может и в самый раз.

Далее появилась логичная идея сделать кнопки в виде изображений. Скачал я официальные логотипы ВК, Facebook, Twitter и Google + и начал в фотошопе их подгонять «под себя». Получилось, но всё-таки это изображения и они тоже имеет вес (порядка 7 Кб). И вот здесь эврика!

Font Awesome в помощь

Я посмотрел на шапку своего сайта и справа, где поисковая строка, я увидел иконки соц.сетей, которые были сделаны с помощью бесплатного css-фреймворка Font Awesome. Самое главное, что они широко распространен и наряду с js-файлом jQuery сейчас находиться в вашем кэше. Это означает, что время на загрузку уже сократилось!  Но вернемся к иконкам - зашел я к ним на гитхаб и у меня глаза разбежались – сотни иконок на любой вкус (сами посмотрите).

Мне нужны были только иконки определенных сервисов. Я составил себе список:

1. Вконтакте (крупнейшая сеть СНГ);
2. Facebook (самая большая соцсеть в мире);
3. Twitter (популярный сервис микроблогинга);
4. Google + (социальная сеть самого крутого поисковика);
5. Pocket (популярный сервис для сохранение ссылок в облаке).

Теперь осталось сделать html конструкцию и стилизовать ее с использованием этих иконок. И в конце-концов подогнать под функционал Blogger, чтобы они были готовы на все 100%.

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

На этом всё. До новых встреч.