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

Кнопки шейринга в соц сетях

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

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

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

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

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

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

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

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

Когда страница открывается точно по ссылке, например: http://www.ipetrenko.ru/2016/04/support-for-bloggers.html, то проблем с шарингом нету – счетчик показывает всё нормально и скрипт отдает в кнопку нужный URL. Но есть иная ситуация: я оставил комментарий и решил поделиться постом. В адресной строке такая ситуация: http://www.ipetrenko.ru/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%.

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

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


Если вам понравиласть эта статья, то поделитесь ей с друзьями. Вам не сложно, а мне приятно ;)
Присоединяйтесь к 200+ блоггерам и получите полезный в подарок
    Blogger Comment
    Facebook Comment

14 коммент. :

  1. Здравствуйте. Интересно узнать коды этих кнопок "поделиться".

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Спасибо за интерес к статье. В течении недели материал будет готов)

      Удалить
    2. Денис, к сожалению, на этой неделе не вышло опубликовать. На той неделе будет точно)

      Удалить
    3. Благодарю. Пожалуйста.

      Удалить
  2. Красивые кнопки вышли-)

    ОтветитьУдалить
  3. Кнопки неплохие, но круглые варианты смотрятся посимпатичнее, мне кажется :)

    ОтветитьУдалить
    Ответы
    1. Спасибо. Специально для вас сделаю и круглый вариант кнопок)

      Удалить
    2. Будет интересно :) Хотя, у меня есть в блоге нечто подобное - собственная разработка одного программиста, тоже делал подобный набор кнопок. Ответьте пожалуйста на мой вопрос про шаблоны ;)

      Удалить
  4. "зашел я к ним на гитхаб и у меня глаза разбежались – сотни иконок на любой вкус (сами посмотрите)" - цитата. А где посмотреть то, Игорь?) ссылку дайте. Заходил я к ним на гитхаб, но иконок не нашёл вообще. Может не там искал.

    И ещё. Мне нужны кнопки для ЖЖ, ОК и майл.ру :) Посодействуете в этом вопросе? ;) Я имею ввиду - такие же кнопочки как у вас, самодельные.

    ОтветитьУдалить
    Ответы
    1. Вот по этой ссылке - http://fontawesome.io/icons/.


      Да, сделаю в течении недели и оповещу вас ;)

      Удалить
    2. Игорь, так я и заходил ранее по той же ссылке. Нифига не понял там... там какие-то чёрно белые все иконки, не понятные.

      Удалить