4 способа добавить кнопки социальных сетей на свой блог

4 способа добавить кнопки социальных сетей на свой блог

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

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

Первый способ - официальный.

Вы можете воспользоваться стандартным виджетом. Ныне все соцсети предоставляют веб-мастерам такую возможность. Давайте рассмотрим, как это делается, на примере сайта "ВКонтакте".

Залогинившись "ВКонтакте", переходим на страницу для разработчиков, далее выбираем "Виджеты и сторонние сайты". Попадаем на страницу, где перечислены те виджеты, которые "Контакт" предлагает разместить на нашем блоге. Настройка кнопки "Мне нравится" ВКонтакте

Как видите, здесь довольно широкие возможности для интегрирования. Допустим, нас интересует кнопка "Мне нравится". Она - третья в списке. После перехода по ссылке видим форму, где мы сейчас и будем настраивать нашу будущую кнопку.

Вначале нужно зарегистрировать свой ресурс. Вводим в соответствующих полях название, адрес, основной ресурс, жмем "сохранить". Далее мы можем настроить внешний вид кнопки. Допустим, мы выбрали первый вариант. Отрегулировали желаемую высоту. Задали надпись, которая должна быть на кнопке - "Мне нравится", либо же "Мне интересно". И вуаля - в нижней части формы нас ждет код, полностью настроенный именно для нашего ресурса. Первую часть кода нужно поместить в файле header. php, если наш сайт работает на WordPress. Кстати, даю на водку наводку: для быстроты загрузки нашего блога все заголовки скриптов можно размещать не в header. php, а в footer. php - в этом случае при обращении к конкретной странице вначале загрузится основной контент, а затем уже будут подгружаться скрипты из футера.

Но вернемся к нашей кнопке. Вторую часть кода: вы размещаете в том месте страницы, где кнопка должна располагаться. Все. Примерно таким же образом устанавливаются кнопки Facebook и Twitter.

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

Минусы: у разных соцсетей кнопки имеют разный размер и не сочетаются друг с другом, к тому же часто тот блок, который вы встроили, имеет еще и довольно обширную невидимую зону, размеры которой не поддаются регулированию. Это напрочь рушит всю компоновку кнопок (если их несколько в одном месте) и нарушает дизайн страницы. Во всяком случае, мне так и не удалось подружить между собой официальные кнопки "Контакта" и "Facebook". Быть может, вы знаете, как это можно сделать?

Вот ссылка для получения официальных виджетов Twitter: https://dev. twitter. com/docs/twitter-for-websites и аналогичный раздел на Facebook: http://developers. facebook. com/docs/plugins/.

Второй способ - креативный.

Как мне кажется, лучше всех его описал Михаил Шакин. Если вкратце, вам нужно найти в сети тот вариант кнопок, который вам нравится (к примеру, скопировав изображение с вышеперечисленных страниц социальных сетей), подогнать полученные иконки в Фотошопе, приведя их к некоему общему знаменателю, а затем подобрать нужный код для каждой. Можно написать его самому, а можно взять у старших товарищей, уже писавших в своих блогах на эту тему, к примеру - у того же Шакина. Я совсем не эксперт в PHP, поэтому поначалу воспользовался именно рецептом Михаила.

Плюсы способа: вы сами настраиваете вид кнопок и располагаете их так, как вам нужно.

Минусы: Если вы не слишком хорошо владеете Фотошопом, вам будет сложно добиться качественной графики. Та стильность, которая отличает оригинальные кнопки, может быть утрачена. Но при наличии прямых рук все это проделать не сложно.

Третий способ - легко осуществимый.

Если у вас - блог на WordPress, то вы можете установить плагин, который сам встраивает кнопки в ваши записи и страницы. В консоли WordPress войдите в меню "Плагины"-"Добавить новый" и в строке поиска введите "Вконтакте" или "Facebook".

Установка плагинов WordPress

Вы увидите список существующих плагинов для установки виджетов социальных сетей. Выбирайте понравившийся вам, нажимайте "Установить", затем "Активировать". Отмечайте нужные опции в настройках плагина в соответствии с инструкциями. Больше ничего делать не надо. Разве что протестировать несколько похожих, чтобы выбрать оптимальный вариант.

Плюсы: ничего регистрировать или встраивать не надо.

Минусы: так как подобные плагины в конечном итоге устанавливают к вам именно официальные виджеты, возникают все те же проблемы с совместимостью разных кнопок, что и в первом способе.

Четвертый способ - универсальный и еще более легкий.

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

Из подобных сервисов хочу упомянуть четыре. Это блок "Поделиться" от Яндекса, сервис "Одна Кнопка", зарубежный и весьма популярный сайт "Add This" и совсем недавно появившийся скрипт социальных кнопок "Share42.com", которым пользуюсь я сам на этом блоге. Мне кажется, что использование подобных сервисов скриптов - это чрезвычайно удобный вариант, лично меня он устроил больше всего. Правда, мне пришлось перебрать почти все названные скрипты, пока я не нашел то, что надо.

Сервисы скриптов

Плюсы: широкий охват различных социальных сетей и закладок, единый стиль (чаще всего) для всех элементов, легкость установки.

Минусы: разумеется, наряду с плюсами, у этого способа есть и свои минусы. Вот как раз про это я и расскажу в одном из следующих постов, где разберу подробно особенности таких скриптов.

На сегодня - все.


Карта сайта


Информационный сайт Webavtocat.ru