Facebook like box, также известный как Facebook fan box стал практически обязательным элементом каждого вебсайта. Он позволяет владельцам сайтов предоставить своим пользователям самый простой способ присоединиться к своему коммьюнити на facebook и получать обновления прямо из ленты соц.сети. Недавно один из наших пользователей обратил внимание, что тему о том, как добавить facebook like box в WordPress мы еще не освещали. В этой статье мы покажем вам как добавить facebook fan box в WordPress.
Добавляем Like Box, используя официальный плагин Facebook для WordPress
Вероятно, самым простым способом добавления facebook like box на ваш сайт WordPress будет использование официального плагина Facebook для WordPress. Первым делом вам необходимо установить и активировать плагин Facebook. После активации плагина переходим в раздел Внешний вид » Виджеты. Просто перетягиваем виджет Facebook like box в свой сайдбар. Необходимо будет указать ссылку на вашу фан-страницу в фейсбуке в настройках этого виджета.
![facebook-likebox-widget[1]](https://wpincode.com/wp-content/uploads/2014/10/facebook-likebox-widget1.png)
В виджете представлены те же опции, что и в Facebook social plugins для вебсайтов. Можно выбрать, отображать ли ленту, лица, убрать заголовок, изменить цвет границы. На данный момент доступно только две темы: светлая и темная.
Добавляем like Box вручную без использования плагинов
Существует возможность добавить Facebook like box вручную, без использования плагинов. Переходим на страницу Facebook Social Plugin’s Like Box. Указываем ссылку на страницу Facebook и настраиваем внешний вид блока.
![facebook-likebox-code[1]](https://wpincode.com/wp-content/uploads/2014/10/facebook-likebox-code1.png)
Нажимаем кнопку Get Code для того, чтобы получить код для вставки Like box.
Facebook предоставляет несколько способов добавления кода like box на ваш сайт. Можно выбирать из HTML5, XFBML, и iframe. Мы покажем вам как добавить каждый из них, но выбрать нужно только один. По нашему мнению HTML5 является самым приемлемым для большинства сайтов на WordPress. XFBML пригодится тем пользователям, которые используют другие плагины Facebook, которые в свою очередь используют XFBML для отображения кнопок Facebook. Используйте iframe, если первые два варианта не сработают.
![likebox-code-formats[1]](https://wpincode.com/wp-content/uploads/2014/10/likebox-code-formats1.jpg)
Добавляем код HTML5 Facebook Like Box в WordPress
Кликаем на вкладку HTML5 из окна кода и копируем первую часть кода. Фейсбук рекомендует вставлять его сразу после тега <body>, который обычно располагается в вашем файле header.php. Однако, он сработает в любом месте body. Для того, чтобы упростить себе задачу, можно просто добавить его в футер с помощью плагина Insert Headers and Footers. Первая часть кода должна выглядеть примерно так:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Этот javascript подключает к вашему сайту библиотеку javascript от Facebook. Теперь скопируйте вторую часть кода, которая будет выглядеть примерно так:
<div class="fb-like-box" data-href="https://www.facebook.com/pages/Wpincode-Wordpress-%D0%B1%D0%B5%D0%B7-%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D0%BE%D0%B2/494113973953665" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
Эта часть кода сообщает яваскрипту, который вы подгрузили ранее, что нужно отобразить like box в этом месте и с этими параметрами. Для примера, мы вставим этот код в виджет сайдбара. Переходим в раздел Внешний вид » Виджеты. Перетягиваем текстовый виджет в свой сайдбар и вставляем в него код. Сохраняем виджет и проверяем свой сайт.
Это сработает в любой области вашего сайта. Можно вставить код в футер, после контента записи и т.д.
Не забудьте изменить ссылку на фан-страницу фейсбука на свою.
Добавляем код XFBML Facebook Like Box в WordPress
Кликаем на вкладку XFBML для получения кода XFBML Facebook like box. Для того, чтобы добавить XFBML Facebook like box, вам нужно добавить три небольших кусочка кода в WordPress.
Скопируйте первый кусок кода и вставьте его в файл header.php темы сразу после тега <body>. Как и предыдущий, этот код будет работать в любом месте body. Для того, чтобы упростить себе задачу, можно просто добавить его в футер с помощью плагина Insert Headers and Footers. Первая часть кода должна выглядеть примерно так:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Этот небольшой javascript подключает к вашему сайту библиотеку javascript от Facebook.
Вторая строка кода — это XML, и добавить ее нужно в тег <html> вашего сайта. Самым простым способом будет открыть файл functions.php и вставить в него следующий код:
//Добавляем Open Graph в атрибут Language
function add_opengraph_doctype( $output ) {
return $output . ' xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"';
}
add_filter('language_attributes', 'add_opengraph_doctype');
И, наконец, копируем третью строку кода, которая будет выглядеть примерно так:
<fb:like-box href="https://www.facebook.com/pages/Wpincode-Wordpress-%D0%B1%D0%B5%D0%B7-%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D0%BE%D0%B2/494113973953665" width="292" show_faces="true" stream="true" header="true"></fb:like-box>
Этот код сообщает javascript, который вы добавили на первом шаге, что нужно вывести like box в этом месте и с этими параметрами. Переходим в раздел Внешний вид » Виджеты. Перетягиваем текстовый виджет в свой сайдбар и вставляем в него код. Сохраняем виджет и проверяем свой сайт.
Добавляем Facebook Likebox iframe в WordPress
Кликаем на вкладку IFRAME и копируем код iframe. Переходим в раздел Внешний вид » Виджеты и перетягиваем текстовый виджет в свой сайдбар. Вставляем кода iframe в текстовый виджет и сохраняем изменения. Открываем свой сайт и любуемся facebook fan box.
Мы надеемся, что эта статья помогла вам добавить Facebook Like box / Fan box на свой WordPress сайт.
По всем вопросам и отзывам просьба писать в комментарии ниже.
Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.
