Главная Вебмастеру Вставляем кнопку нравится от Facebook

Вставляем кнопку нравится от Facebook

Социальные кнопки или «лайки» стали неотъемлемом элементом множества сайтов. Теперь сложно представить публикацию в конце которой не обитали бы кнопки «Мне нравится», «Класс» и «Твитнуть». Они одинаково полезны, как вебмастеру в процессе продвижения, так и посетителю желающему оценить прочитанное или сохранить на своей странице ссылку.

Вставляем кнопку нравится от Facebook

Наличие «лайков» это не только появление трафика на сайт с социальных сетей, но и повышение юзабилити веб-проекта, а также интереса у поисковых роботов. Поэтому ряд основных соц. кнопок обязан быть и у Вас!
Одной из такого ряда – кнопка «Нравится» от Facebook. Установка «лайка» занимает пару минут, и подходит для размещения на всех CMS, в том числе популярной WordPress.

Как разместить кнопку от Facebook?

Действия по вставке кода кнопки на сайт очень схожи с ранее рассмотренным виджетом сообщества от ВКонтакте. Поэтому сперва авторизуемся в сети Facebook, и перейдём на страницу «Разработчикам»:
https://developers.facebook.com/docs/plugins/like-button

page-like-button

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

  1. URL to Like – ссылка на ваш сайт или страницу на нём, оставьте поле пустым, если хотите, чтобы виджетом использовался адрес актуальной ссылки, просматриваемой посетителем;
  2. Width – параметр «ширина», укажите числовое значение (в пикселях) для всплывающего окна комментария (рекомендуем от 300 до 600);
  3. Layout – вид кнопки, укажите из выпадающего списка один из вариантов отображения (изменения тут же будут показаны ниже в области предварительного просмотра);
  4. Action Type – название кнопки, укажите один из двух вариантов «Like» (Нравится) или «Recommend» (Рекомендую);
  5. Show Friends’ Faces – показ фото-миниатюр, нажавших пользователей из числа друзей (снять галочку для отмены);
  6. Include Share Button – показывать кнопку «Поделиться» рядом с кнопкой «Нравится» (снять галочку для отмены);
  7. По окончании настройки нажатием кнопки «Get code», вызываем полученный код виджета (выделите его и скопируйте в буфер обмена по нажатию «Ctrl + C» или правой кнопкой мыши на выделенном тексте – пункт «Копировать»).

Скопированный код следует разместить в теме WordPress, также как и другие «лайки». Первую часть помещаем в файл «Header.php» между тегами <head>…</head>, а вторую в то место, где следует выводить саму кнопку (обычно, это файл «single.php» или «content-single.php» сразу после вывода основного контента). Не забываем сохранять изменения, а после проверять на страницах сайта!

Для того чтобы выровнять размещаемые кнопки в одну строку рекомендуем прочесть эту статью. В ней подробно описан один из способов с применением стилей CSS…

Проблема адаптивных шаблонов

Кнопка от Facebook не везде корректно отображается, а всё из-за всплывающей области комментирования. Адаптивные шаблоны обрезают эту область (по ширине кнопки), делая невозможным добавление сообщения и функцию «Поделиться».
Чтобы изменить вывод виджета, следует добавить дополнительные параметры для имеющегося класса CSS. А именно, требуется отменить действие «max-width» (максимальная ширина) для <iframe>:

.fb-like iframe {
max-width: none;
}

Вышеуказанный код вставьте в файл «style.css» вашей текущей темы (таблица стилей), сразу за последней фигурной скобкой, и сохраните изменения.

Вместо послесловия

Таким образом, в несколько шагов, как сказано выше, занимающих пару минут, можно разместить кнопку «нравится» от соц. сети Facebook. Рассмотренная проблема отображения на адаптивных сайтах — единственная из немногих трудностей, возникающих при размещении.

  поделитесь с друзьями:
Подписаться на почтовую рассылку
Комментарии
  1. Дмитрий
    • admin
  2. Наталья
    • admin
  3. Наталья
  4. Евгений
    • admin
  5. Vidadi
    • admin
  6. Ктулху
    • admin

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

Авторизоваться через: 

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

Нажимая кнопку "Отправить", я принимаю пользовательское соглашение и подтверждаю, что ознакомлен и согласен с политикой конфиденциальности

Сообщите об ошибке, мы исправим:

Отправить