Как установить кнопки социальных сетей для сайта

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

Непосредственно код кнопки самой соц. сети не будет нагружать хостинг, как те же плагины для WordPress, или модули для других CMS. Желающие в конце статьи найдут ссылку сразу на готовый набор кнопок социалок.

Самыми популярными кнопками, которые мы сейчас установим, являются следующие:

Как установить кнопку Like (Мне нравится) от Facebook

Прежде, чем установить "Мне нравится" (Like), необходимо ее создать на соответствующей странице Facebook. Для этого переходим на страницу генерации кнопки Like где видим следующее:

В основном все понятно, но некоторые пункты требуют пояснения.

• URL to Like - это первое поле, куда мы что-то можем написать. Здесь следует указывать ссылку, на которую будут вести все Like. Если же кнопка у Вас будет установлена "сквозняком" по всему сайту, то лучше это поле оставить пустым: в этом случае ссылка будет автоматически браться на статью, где была нажата. Так сделано на большинстве сайтов.
• Send Button (XFBML Only) - довольно новая функция, которая позволяет отправить сообщение своему другу или знакомому сразу с посещаемого в данный момент сайта, т.е. Вашего. Насколько она нужна - решать Вам. Скажу, что работать она будет на Вашем сайте, если подключена библиотека JavaScript SDK.

Остальные пункты понятны сразу из пояснений на картинке выше. Сверху сразу смотрим результат выбора кнопки. Как только все настроили - нажимаем Get Code (внизу картинки) и получаем код, который необходимо установить себе на сайт. К примеру код, который получился у меня:

Код из верхнего окошка (цифра 1) необходимо поместить в Ваш файл шаблона в пределах тега body (подчеркнуто красным). Facebook рекомендует это сделать в самом начале, поэтому открываем файл header.php (чаще всего здесь в шаблонах находится открывающий body) и вставляем весь код из первого окошка сразу после него.

Код из второго окошка отвечает непосредственно за отображение кнопки "Мне нравится" (Like). Поэтому подбираем место по своему усмотрению, но его обычно устанавливают перед статьей, либо после нее. Чтобы это сделать, нам нужно будет открыть файл single.php (если такого нет, то смотрите какой отвечает за вывод информации постов) и вставить предложенный код №2 в нужное место (обычно перед или после <?php the_content(); ?>).

Как установить кнопку +1 от Google

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

Настройки здесь аналогичные Facebook, за исключением нескольких пунктов:

• Мы можем и должны выбрать язык;
• В расширенных настройках рекомендую выбрать Асинхронный код и синтаксис HTML5;
• В поле выполнять код можно оставить как по умолчанию, однако вариант "при явном вызове" мне кажется лучше;
• Последнее поле, URL для +1, аналогично с первым на Facebook: оставляем пустым, если кнопка бедт "сквозняком" через весь сайт. Если же она только на одной странице или должна собирать +1 на одну страницу, то указываем URL.

По окончании всех настроек снизу мы увидим готовый код, который необходимо разместить на своем сайте в соответствующем месте:

Как понятно из названия кода красной рамки - помещаем в место отображения (можно рядом с Like от Facebook). Код, который в зеленой рамке, необходимо поместить в тот же файл, куда будет помещен "красный". К примеру: мы помещаем "красный" код в single.php, поэтому "зеленый" код мы помещаем в этот же файл, можно в самом его начале, чтобы он не сливался с остальным шаблоном.

Как установить кнопку "Твитнуть" от Twitter

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

Если честно, то настройки у Twitter самые простые и не вызовут сложностей у любого человека (я надеюсь). В красной панели выбираем тип кнопки, в зависимости от которой откроются свои поля на выбор.

Если оставите URL пустым, то он возьмет страницу. на которой произошел клик по кнопке (как у Facebook и Google +1). Аналогично чуть ниже с текстом: можете прописать свой, либо будет брать заголовок статьи. Далее настраиваем упоминания и #хэштег.

Справа мы видим результат настройки, а чуть ниже код. Копируем весь и вставляем в нужное место на сайте в одно место. Настроек проводить не нужно. Единственное - это можно добавить атрибут rel="nofollow", чтобы ссылка была закрыта от индексации.

Как установить кнопку Мне нравится от ВКонтакте

Переходим на страницу Виджет "Мне нравится" и приступаем к настройкам:

Все это мы уже проходили, кроме пункта под красной рамкой. Здесь нам нужно подключить свой сайт, если этого не делали ранее: заполняем три строки и нажимаем Сохранить, после чего вводим капчу и наш сайт появляется в списке. Таким образом можно подключить все свои сайты, чтобы управление виджетами ВКонтакте осуществлялось с Вашего аккаунта. Единственное условие - Вы должны быть залогиненым в этот момент и быть авторизованным (подтвердить себя через телефон). В противном случае Вы не получите свой идентификационный номер (API-id), без которого не работает любое приложение от ВКонтакте.

Вместо букв в красной рамке должны появиться цифры, если Вы правильно подключили сайт.

После того, как добавили свой сайт в список, проводим стандартные настройки кнопки и снизу видим код. Тот, который за красной чертой - устанавливаем в пределах тега head (обычно в файле header.php). Вторую же часть кода ,которая под зеленой чертой, устанавливаем в то место, где будет отображаться кнопка.

Как установить кнопку Mail.ru и Одноклассники

Данные кнопки проще всего устанавливать в паре, т.к. владельцем этих двух популярных ресурсов является одна компания. Именно поэтому она продвигает одновременно 2 бренда.

Переходим на страницу генератор кнопки Mail и выбираем внешний вид:

Одновременно с кнопкой Mail.ru мы настраиваем и устанавливаем кнопку Одноклассников. Все это делает в одном блоке.

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

В самом конце получаем код, которые необходимо поместить в выбранное место на сайте.

Яндекс кнопки социальных сетей

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

Установка так же проста: выбираем в интерфейсе нужные сервисы и размещаем представленный код в нужное место на сайте.

Переходим по ссылке Яндекс кнопки и видим:

Здесь мы выбираем какие сервисы будут представлены в блоке социальных кнопок Яндекс. А в следующем блоке нам предлагают выбрать внешний вид, а так же код, который мы с легкостью водружаем в нужное место на страничке своего сайта:

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

Ближе к концу 2012 года Яндекс предложил пользователям установку кнопок социальных сетей другого формата. Смотрите сами:

Это стандартные кнопки "расшаривания" страницы, только они получили счетчик. Выглядит весьма красиво.

Чтобы поставить на сайт подобные соц. кнопки от Яндекса, необходимо поместить следующий код в пределах тега

В зависимости от движка сайта, найти теги можно: для WordPress файл header.php, для других движков это может быть index.php. А вот и код:

C помощью него мы подключаем скрипт кнопок, т.е. сам функционал будет находиться не на вашем сайте, а на серверах Яндекса (очень удобно, т.к. не дает нагрузки).

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

Обратите внимание: в данном коде есть перечисление кнопок социальных сетей (yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus). Вы можете поменять их порядок. Так же можете увеличить размер самих иконок, заменив data-yashareType="small" на data-yashareType="big".

Послесловие

Ранее я публиковал статью Кнопки рейтинга сайтов в одну строку. При помощи нее Вы сможете выставить кнопки социальных сейте в одну строку, либо друг под другом. Попробуйте.

Если же Вы осознали, что вся эта морока с кодом не для Вас, то можете почитать статью Все социальные плагины WordPress на mojWP.ru и воспользоваться одним из предложенных плагинов, который сделает всю работу автоматически, или почитать статью Марины Лазаревой - Кнопки социальных сетей для сайта, которые ставятся в первую очередь.

Если что-то не получилось - пишите в комментариях. Постараюсь помочь всем.