Вставляем кнопку нравится от Facebook
Социальные кнопки или «лайки» стали неотъемлемом элементом множества сайтов. Теперь сложно представить публикацию в конце которой не обитали бы кнопки «Мне нравится», «Класс» и «Твитнуть». Они одинаково полезны, как вебмастеру в процессе продвижения, так и посетителю желающему оценить прочитанное или сохранить на своей странице ссылку.
Наличие «лайков» это не только появление трафика на сайт с социальных сетей, но и повышение юзабилити веб-проекта, а также интереса у поисковых роботов. Поэтому ряд основных соц. кнопок обязан быть и у Вас!
Одной из такого ряда – кнопка «Нравится» от Facebook. Установка «лайка» занимает пару минут, и подходит для размещения на всех CMS, в том числе популярной WordPress.
Как разместить кнопку от Facebook?
Действия по вставке кода кнопки на сайт очень схожи с ранее рассмотренным виджетом сообщества от ВКонтакте. Поэтому сперва авторизуемся в сети Facebook, и перейдём на страницу «Разработчикам»:
https://developers.facebook.com/docs/plugins/like-button
В начале нам предлагается настроить отображение будущей кнопки, чем мы и займёмся:
- URL to Like – ссылка на ваш сайт или страницу на нём, оставьте поле пустым, если хотите, чтобы виджетом использовался адрес актуальной ссылки, просматриваемой посетителем;
- Width – параметр «ширина», укажите числовое значение (в пикселях) для всплывающего окна комментария (рекомендуем от 300 до 600);
- Layout – вид кнопки, укажите из выпадающего списка один из вариантов отображения (изменения тут же будут показаны ниже в области предварительного просмотра);
- Action Type – название кнопки, укажите один из двух вариантов «Like» (Нравится) или «Recommend» (Рекомендую);
- Show Friends’ Faces – показ фото-миниатюр, нажавших пользователей из числа друзей (снять галочку для отмены);
- Include Share Button – показывать кнопку «Поделиться» рядом с кнопкой «Нравится» (снять галочку для отмены);
- По окончании настройки нажатием кнопки «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. Рассмотренная проблема отображения на адаптивных сайтах — единственная из немногих трудностей, возникающих при размещении.
.fb-like iframe {
max-width: none;
}
— вот за это — отдельное большое спасибо!
Рад, что удалось помочь! А проблема с отображением довольно распространённая среди адаптивных шаблонов.
Покажите, пожалуйста, куда ставить этот код картинкой. Ибо не выходит каменный цветок 🙁
.fb-like iframe {
max-width: none;
}
Здравствуйте, Наталья! Данный код стиля следует добавить в конце вашего файла style.css, который располагается в каталоге активной темы оформления. Сразу за последней фигурной скобкой вставляете, и сохраняете (см. рис. ниже). В редких случаях, изменения вступают в силу не сразу, и может потребоваться чистка кеша в интернет браузере.
Спасибо большое. Так и делала , кеш чистила — не выходит каменный цветок 🙁
Не подскажите как отключить после лайка всплывающее окно?
Здравствуйте! Всплывающее окошко является частью скрипта, и вряд ли имеет параметры работы. Можно попробовать применить CSS стиль:
.fb-like iframe { display: none;}
.fb-like iframe {
max-width: none;
}
Поставил где нужно, но всплывающее окно все еще выходит и выходит некорректно. Нету какого-то другого метода, чтобы исправить это?
Здравствуйте! Приведённый пример из статьи, лишь исправляет отображение всплывающего окна. Если CSS код не отрабатывается на страницах сайта, то следует искать причину в шаблоне. Скорее всего есть родительский стиль, который исключает дополнительное правило. Ну и кардинально может помочь отключение адаптивного формата, как минимум, это поможет уточнить проблемное место.
Привет, там над кодом вот такое сообщение написано, кто-нить обращал внимание?
«Это приложение находится в режиме развития и не доступны публично.
Общедоступный режим может быть включен в приложение панели.»
Если включить общедоступный режим, что будет?
И еще такой вопрос: когда публикую ссылку в хронике — то ФБ всегда загружает к ссылке одну и туже картинку, не имеющую отношения к статье. А хотелось чтобы, загружал самую первую картинку на странице со статьей. Как бы это исправить?
Здравствуйте! Отвечу на вторую часть сообщения, так как по первому вопросу некомпетентен -не обращал внимания на данный режим.
Что касаемо картинок прикрепляемых к посту, то зачастую, сервис Facebook автоматически выбирает их со страницы. Причём неважно, было ли изображение в статье или в боковой панели. Немного эту ситуацию разрешает присвоение соответствующих тегов, которые позволяют определять миниатюру как основную картинку для соц.сетей.
Попробуйте почитать про — «function opengraph_for_posts()». Данная функция определяет основные значения при формировании ссылки для соц.сетей.