Как поставить Recommendations Bar от facebook на своем сайте

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

Как поставить Recommendations Bar. Порядок действий:

1. Для начала следуем по адресу https://developers.facebook.com/apps/ — Это сервис facebook для разработчиков, где можно создать различные приложения.
2. На открывшейся странице в правом верхнем углу жмём кнопку «+ Создать новое приложение» (create a new app). Откроется модальное окно, где нужно будет ввести название приложения. Например «Моя панель рекомендаций». См. рисунок (кликабельно):
   

   Другие поля необязательны, можно не заполнять. Нажимаем кнопку «Продолжить».

3. Покажется окно с секретным кодом, нужно ввести каптчу, чтобы фейсбук убедился, что Вы человек.
4. После вводы каптчи, откроется страница с настройками приложения, где нужно будет скопировать ID приложения (Подчеркнуто красной линией на рисунке -Цифра 1) ввести адрес вашего сайта (Цифра 2 и стрелки). См. рисунок (кликабельно):
   
5. Далее идем по адресу: http://developers.facebook.com/docs/reference/plugins/recommendationsbar/, где получим код для вставки на свой блог или сайт.
6. На странице будет небольшая форма, которую нужно заполнить. Прилагаю скриншот того, как заполнил форму я. Скриншот увеличивается нажатием на него:
   
7. Нажимаем кнопку «Get code» (получить код). Форма выдаст код который нужно вставить сразу после тега body на своем сайте:
   JavaScript

   <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/ru_RU/all.js#xfbml=1&appId=APP_ID"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

   1 2 3 4 5 6 7 8

   <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/ru_RU/all.js#xfbml=1&appId=APP_ID";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

   APP_ID нужно заменить ID приложения (цифры), который получили ранее (4 пункт)

   Далее еще один кусок html кода, который тоже нужно вставить в удобное место на вашем сайте (можно сразу после первого куска кода):

   XHTML

   <div class="fb-recommendations-bar" data-trigger="X%" data-read-time="15" data-site="http://faniska.ru/"></div>

   1	<div class="fb-recommendations-bar" data-trigger="X%" data-read-time="15" data-site="http://faniska.ru/"></div>

   • data-trigger=»X%» — X% заменяем цифрой (например 30%). Это будет означать что панель рекомендации покажется после прокрутки страницы на 30%.
   • data-read-time=»15″ — 15 — это количество секунд через, которое покажется панель рекомендации от фейсбук. Можно менять на свой вкус. Минимум 10 секунд.
   • data-site=»http://faniska.ru/» — адрес моего блога замените на адрес вашего сайта.

Такая панель рекомендаций помогает немного задерживает читателя на Вашем сайте и тем самым улучшает поведенческие факторы сайта в глазах поисковых систем. Если решили поделиться с друзьями тем, как поставить Recommendations Bar от facebook на своем сайте, то просьба ссылаться на эту страницу 🙂 Надеюсь, что статья окажется полезной. Если остались вопросы, то пишите в комментариях свои вопросы!

На заметку:

Если беспокоитесь о сохранности данных сайта, то нужно позаботиться о резервном хранение информации. Прочитайте как сделать бэкап сайта и Ваше спокойствие гарантировано — т.к. несмотря ниначто можно будет восстановить сайт, его данные и базу данных!