Делаем кнопки социальных сетей самостоятельно

2678

Это уже далеко не первая статья, которая затрагивает социальные кнопки на сайте. А все почему? Да потому что без них никуда. В этот раз мы будем делать кнопки социальных сетей самостоятельно, т.е. без использования сторонних плагинов и сервисов, типа socialtools.

Преимущества ручного размещения

Чаще всего к такому методу приходят тогда, когда не хотят зависимости от сторонних сервисов. Допустим, что тот же UpToLike или SocialTools лёг, соответственно, кнопки на вашем сайте тоже легли, так как запросы все идут через него. Вот здесь и начинается работа над ускорением блога, загрузки страницы и т.д. В общем, кому этот метод понадобился, рассмотрим вариации.

Кнопка поделиться Twitter

Переходим на официальный сайт представителя, т.е. сюда 

https://about.twitter.com/ru/resources/buttons

и выбираем подходящее для себя оформление и тип кнопки. Вариантов для выбора достаточно, кроме того, здесь же можно взять и кнопку «Читать». Каждая из них настраивается, после чего выводится готовый код для вставки на сайте. Пример такого варианта можете увидеть на скрине:

Кнопка поделиться Twitter

Кнопка поделиться Вконтакте

Принцип размещения от предыдущей ничем не отличается. Переходим на страницу документации публикации ссылок Вконтакте по ссылке:

http://vk.com/dev/Share

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

Кнопка поделиться Вконтакте

Кнопка поделиться Одноклассники

Здесь уже настройки более интересные. Переходим в документацию новой кнопки класс по адресу: 

http://apiok.ru/wiki/pages/viewpage.action?pageId=42476656

Кнопка регулируется как по виду, так и по размеру. Счетчик можно выставить справа и сверху. Результат выводимой кнопки сразу перед глазами, готовый код конфигурируется ниже в режиме онлайн, в соответствии с выбираемыми вариантами оформления.

Кнопка поделиться Одноклассники

Кнопка поделиться Facebook

Документация вся на английском, поэтому у кого проблемы с этим языком, то придется не так уж и просто. Хотя, все, что вам понадобится, это получить код с этой страницы: 

https://developers.facebook.com/docs/plugins/share-button?locale=ru_RU

Жмем по кнопке «Get Code» и получаем необходимый код для вставки на сайте.

Кнопка поделиться Facebook

Кнопка поделиться Mail.ru

Очень схожее руководство и оформление с Одноклассниками. Настройки абсолютно такие же, и если вы разобрались с предыдущими, то и с этими проблем не возникнет. Получаем кнопку здесь: 

http://api.mail.ru/sites/plugins/share/

Если возникнут вопросы, то ниже настроек, как и на вышеописанных сервисах, есть ссылка на детальную документацию.

Кнопка поделиться Mail.ru

Более простой вариант — All in One

Вам показалось это все сложным? Возможно, потому как все эти кнопки нужно получить, влепить код и скрипты на сайт, но если вы в этом разбираетесь, то это всего нескольких минут дело. Все скрипты можно поместить в один файл, и подключить его в необходимом месте. Но если вам всё равно это кажется сложным, то есть более простой вариант. Для этого нам снова придется пойти на сторонний сервис и скачать готовую библиотеку, которая подключает всё необходимое одним файлом javascript, а также выводит в красивом оформлении посредством готового файла стилей css. Переходим на этот сервис: 

http://sapegin.github.io/social-likes/ru/

Играемся с настройками, выбираем необходимое количество социальный сетей, скин, вид, и после этого качаем готовый вариант файлов кликом по кнопке «Скачать кнопки» в самом низу. В архиве получится 3 файла, из которых 2 уже были описаны выше, а 3-й выступает примером для вставки блоков div на сайте.

Кнопки социальных сетей вручную

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



не скупись ;-) ставь лайк
Подписка на обновления:
Автор блога Рябухин Максим

Я фрилансер веб-разработчик. Последние несколько лет занимаюсь версткой и веб-программированием на PHP и Javascript. Если вам понадобится помощь с блогом Wordpress, либо в создании любой сложности и любым дизайном сайта, я всегда рад помочь с версткой, либо отдельными разработками. Обращайтесь ко мне за моими услугами.

связаться

Вместе с этим советую почитать:

Оставьте комментарий

у меня есть сайт
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

комментариев: 4
  • Раф

    Максим, Спасибо Вам Огромное!!!)

    Ответить
    • Максим Рябухин

      Раф, рад был помочь!

      Ответить
  • tovideo

    Спасибо очень неплохо прояснили в отличии от других блогов.

    Ответить
    • Максим Рябухин

      Старался по-максимуму дать ссылки на все источники, пользуйтесь ;)

      Ответить
показать все


Как вам новый дизайн сайта?

Курс Бери и Зарабатывай!

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

Узнать больше!

Курс по соц. сетям