23 Июн 2013

Установка кнопок социальных сетей — Facebook

Задача: установить кнопки социальных сетей Facebook, Tweeter, Google+, В контакте, Одноклассники.

Решение 1. Устанавливаем кнопку от Facebook.

Заходим по ссылке на официальный сайт Facebook и заполняем следующую форму.

facebook-form

Заполняем:

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

Send Button - включение этого чекбокса позволяет вам вставить также кнопку "Отправить". Чем хороша эта кнопка - вы можете ввести е-майл адрес или имена конкретных пользователей, с кем бы вы хотели поделиться этой статьей.

Layout Style - вы можете выбрать три варианта: стандартный, как на картинке выше или с количеством голосов.

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

Show Faces - включение этого чекбокса позволяет видеть аватары пользователей, которым понравился ваш сайт или блог.

Font - позволяет выбрать шрифт, согласно дизайну вашего блога или сайта.

Color Scheme - позволяет выбрать одну из двух предлагаемых схем оформления кнопки: светлую или темную.

Verb to display - позволяет выбрать название кнопки «Like» или «Recommend» (в русскоязычном варианте «Нравится» или «Рекомендовать»).

Когда все необходимые настройки выставлены - жмем кнопку «Get code» («Получить код»). В выпадающем окне вы получите свой код:

facebook-kod

Что мы делаем с этим кодом? Первую часть кода нам рекомендуется вставлять сразу за открывающим тэгом < body>. Обычно этот тэг вы найдете в файле header.php вашей темы. В некоторых шаблонах - в файле index.php.

kod

Вторую часть кода вам нужно вставить в том месте, где вы хотите видеть кнопку. Обычно кнопку ставят непосредственно в конце статьи. Для этого вам нужно найти в вашей теме файл single.php и в нужном месте вставить вторую часть кода.

Как найти это нужное место? Зайдите на ваш сайт через браузер Firefox и нажмите клавишу F12. Если у вас имеется дополнение Firebug (если такого дополнения у вас нет, настоятельно рекомендую его загрузить), то появится следующая картинка.

Search-place

Нажмите на значок, указанный стрелкой, и мышкой встаньте на то место, где у вас заканчивается статья. В дополнении Firebug синим цветом подсветится код строчки, после которой мы можем разместить вторую часть нашего кода. Ищем эту строчку в нашем файле single.php и после закрытия этой строчки вставляем вторую часть кода. Если вы не нашли в файле single.php нужное нам место, то проверьте файл index.php или, если вы используете совсем современные темы на HTML5, например, Twenty Twelve, то нужное нам место находится там в файле content.php.

Всё! Кнопка стоит и работает. Отступы и поля вы можете настроит в вашем файле style.css. Не знаете как? Напишите в комментариях.

Решение 2. Чтобы не утруждать себя установкой каждой кнопки в отдельности, можно воспользоваться очень удобным сервисом Pluso. Этот сервис позволяет выбрать необходимые вам кнопки, а также кнопки "Распечатать" и "Отправить на е-майл". Выглядеть это может так:

pluso

Как настроить этот сервис под себя, читайте в уроке Установка Share-кнопок .

Понравилась статья? Поделись с друзьями!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Решите задачку * Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.