Как установить на сайт виджет для комментариев Facebook

13.08.2014

Для того чтобы добавить виджет комментариев от Facebook необходимо проделать чуть больше работы чем с виджетом комментариев ВКонтакте. Но все же особого труда не составляет. Изначально я пользовался инструкцией на сайте Шакина, но у него слишком много текста и есть лишние действия, которые делают процесс более длительным и запутанным. Попробую сделать более простую инструкцию.

Итак, в случае с установкой комментариев от Facebook нам не обязательно нужен доступ к аккаунту Facebook владельца сайта, потому что виджет мы создаем независимо от аккаунта, а затем просто добавляем мета-тег с ID администратора. Но доступ понадобится для проверки прав на редактирование комментариев. Далее более подробно.

Начинаем регистрацию виджета для комментариев на этой странице. Настроек всего несколько — это адрес сайта, ширина виджета, количество комментариев, которые будут выводиться на странице (5 или 10 вполне достаточно) и цветовая схема (light подходит для большинства сайтов).

Настройка виджета для комментариев Facebook

Затем жмем Get Code и в всплывающем окне получаем код, который нужно добавить на сайт.

код для виджета комментариев Facebook

Здесь так же как и для комментариев ВКонтакте необходимо две части кода поместить в разные места: код из первого блока поместить после открывающегося тега <body> (на сайтах на CMS WordPress чаще всего код нужно поместить в файл header.php после открывающегося тега <body>), а код из второго блока скопировать в код своего сайта в то место, в котором будет выводиться виджет с комментариями Facebook (на сайтах на CMS WordPress чаще всего этот код нужно поместить в файл single.php).

Важный момент! При копировании кода в файлы какой-либо CMS — нужно заменить параметр data-href во втором блоке (адрес сайта):

<div class="fb-comments" data-href="http://mariakuhtina.com/" data-width="550" data-numposts="5" data-colorscheme="light"></div>

на код для постоянных ссылок своего сайта, для CMS WordPress это <?php the_permalink(); ?>, и получим такой код для второго блока, который нужно вставить в место вывода виджета для комментирования:

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="550" data-numposts="5" data-colorscheme="light"></div>

Для DLE код для виджета комментариев Facebook выглядит так:

<div class="fb-comments" data-href="{full-link}" data-width="550" data-numposts="5" data-colorscheme="light"></div>

Для Drupal код для виджета комментариев Facebook такой:

<div class="fb-comments" data-href="<?php print url(drupal_get_path_alias('node/' . arg(1)), array('absolute' => TRUE)); ?>" data-width="550" data-numposts="5" data-colorscheme="light"></div>

Итак, коды установлены на сайт, теперь нужно предоставить права администратора для пользователя Facebook.

Для того, чтобы предоставить права администратора к виджету комментирования, нужно в head — перед закрывающимся тегом </head> добавить мета-тег:

<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>

, где {YOUR_FACEBOOK_USER_ID} — это ID пользователя, которому предоставляются права администратора, этот ID можно скопировать в адресе своей страницы:

Идентификатор для администратора виджета комментариев Facebook

Если же у вас используется такой формат вывода адреса своей страницы https://www.facebook.com/dencreative, тогда нужно скопировать адрес своей страницы и вставить его в поле на сайте http://findmyfbid.com/, нажать на кнопку «Find numeric ID →», тогда вы получите свой ID:

comments-facebook

Мой ID — 100001696632339.
Для того, чтобы назначить меня администратором, достаточно поместить в head такой мета-тег

<meta property="fb:admins" content="100001696632339"/>

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

Неправильно:

<meta property="fb:admins" content="100004761061407,100001696632339"/>

Правильно:

<meta property="fb:admins" content="100004761061407"/>
<meta property="fb:admins" content="100001696632339"/>

Важно! Панель модератора в комментариях появится только после того, как кто-то оставит комментарий на сайте.

После всех манипуляций получаем на сайте красиво оформленный виджет комментариев для Facebook:
Пример работы виджета для комментариев Facebook на рабочем сайте

Рабочий пример доступен на сайте http://mariakuhtina.com/

Не уходи, пока не прочитаешь:

Комментарии (28) к “Как установить на сайт виджет для комментариев Facebook”

  • Игорь

    Я лично web-ratings.ru/webmasters виджет стал юзать.
    Плюс в том что он простой + отзывы отображаются сразу на странице (не переходя на сторонний сайт).

    Ответить
  • Владимир

    Доброго дня! Подскажите как это встроить в WPMU?
    И как встроить в адаптивную тему? То есть, что бы и форма стала адаптивного дизайна.
    Заранее благодарю за любую помощь!

    Ответить
  • Сергей Грицюк

    Для Worpress в data-href я просто добавил адрес сайта без php. Для появления в виджете на блоге Интерфейса модератора для возможности администрировать комментарии мне пришлось создать новое приложение и в fb:app_id в хедере прописать его ID. ID профиля в fb:admins в хедере так же нужен. Код вывода комментариев вставлял в comments.php в нужное место, под код вывода комментариев нужно добавить код свежесозданного приложения. После добавления первого комментария появляется Интерфейс модератора. Другие танцы с бубном не помогали. Актуальных инструкций на данный момент Гугл не выдал. Большинство из них — 2011-2012 года. А с тех пор много воды утекло…

    Ответить
    • Denis Creative

      Для простого редактирования достаточно этих действий.
      Для модерирования всех комментариев сайта действительно нужно создать новое приложение и в fb:app_id в хедере прописать его ID, но больше нигде его добавлять не нужно.
      В поле data-href обязательно нужно указать адрес страницы, а не адрес сайта.

      Ответить
      • Анатолий

        Уже третий день бьюсь что бы сделать возможность администрирования данных комментариев на сайте, но ничего не получается. Комментарии выводятся, но возможности их администрирования как не было так и нет. Ваши способы так же опробовал. Ничего не подходит.

        Ответить
        • Denis Creative

          Администрирования комментариев как такого нет, вы можете просто просматривать все комментарии к сайту, скрывать ненужные комментарии, но редактировать текст в чужих комментариях не получится. Для того, чтобы видеть панель модератора, нужно создать новое приложение и в fb:app_id в хедере прописать его ID, подробнее про этот момент здесь.

          Ответить
  • Андрей

    Здравствуйте!

    » Важный момент! При копировании кода в файлы какой-либо CMS — нужно заменить параметр data-href во втором блоке (адрес сайта):»

    Скажите, пожалуйста, какой код нужен для cms Joomla.
    Нигде не могу найти, перерыл уже очень много сайтов форумов и блогов…

    Заранее благодарен за ответ.

    Ответить
    • Denis Creative

      Возможный код для вывода текущей страницы для CMS Joomla:

      <?php $uri = &JFactory::getURI();
      $url = $uri->toString(array('path', 'query', 'fragment'));
      print $url; ?>

      Нужно проверить на рабочем сайте, проверял на локальном сервере, вроде бы работает.

      Ответить
  • Никита Сизов (Nick de Golden)

    Добрый день!

    Насчёт data-href есть один вопрос: мною был заменён адрес сайта не на < ?php the_permalink(); ?>, а на адрес страницы, для которой нужны комментарии Фейсбука. Например: site.ru. Код из второго блока я буду вставлять на каждую страницу по отдельности. Нормально так будет?

    А за статью моя Вам огромная благодарность! Очень подробно и понятно всё описано, как я и хотел! :)

    Ответить
    • Denis Creative

      Можно и так, просто больше ручной работы, а так код можно просто в шаблон вставить и забыть)

      Пожалуйста, хорошо, что статья полезна для людей.

      Ответить
  • FreeWebmaster

    Материала свежего по установке комментариев Facebook на сайт нет. Пришлось додумывать самостоятельно. На Blogger, так вообще код не сохранялся.
    blogger.freewebmaster.info/2015/05/kak-ustanovit-v-Blogger-kommentarii-Facebook.html

    Плагин на сайте непонятно глючит, галочка на чекбоксе трансляции комментов в профиль не стоит по умолчанию, а если поставить, то коммента в профиле всё-равно нет.
    promotion.freewebmaster.info/2015/05/kak-ustanovit-na-sayt-kommentarii-Facebook.html

    С модерацией тоже всё убого, нельзя удалить комментарии, а можно только их скрыть.
    promotion.freewebmaster.info/2015/05/moderatsiya-kommentariyev-sotsialnogo-plagina-Facebook.html

    Если есть советы, оставляйте коменты. Да…с вконтакте нет такого геморроя. Вот я думаю, если нет перепоста в профиль и нахрена мне этот плагин

    Ответить
  • Павел

    Комментарии обязательно нужно размещать на своем сайте для увеличения интереса, повышении позиции на поиске, и это влияет на продажи (если сайт коммерческий)!
    Я бы советовал для повышения конверсии установить CallBack, (обратная связь, виджет) — LeadMeBack.com
    Я использую этот сервис обратного звонка CallBack, в среднем на 3 интернет-магазинах увеличилось количество звонков и конверсия примерно на 30-40%. С помощью CallBack от сервиса LeadMeBack.com можно добиться хороших результатов, — считаю, что использование системы комментирования, скрипта или формы обратной связи (обратный звонок callback), а также контекстной рекламы в совокупности дает очень, очень большой поток клиентов.
    Если кому-то интересно по этому поводу спросите у меня — vk.com/i.love (моя страница в ВК).
    Спасибо за статью!

    Ответить
  • Саня

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

    Ответить
  • Андрей

    Большое спасибо !
    Хоть одна нормальная статья на просторах инета !

    Ответить
  • Спасибо

    Спасибо

    Ответить
  • Инна

    Что значит нужно скопировать dencreative и вставить в такой url https://graph.facebook.com/comments/?ids={YOUR_URL} вместо comments/?ids={YOUR_URL}.? Не понятно вообще.

    Ответить
  • FinanceNeupt

    Всем привет)
    Как установить на сайт виджет для комментариев Facebook — Создание сайтов на CMS WordPress

    Ответить
  • Иван

    А что вы скажете на счет тандема комментариев социальных сетей и систем комментирования типа disqus, getrate . me, cackle.

    Ответить
    • Denis Creative

      Если использовать какие-то системы комментирования на подобие Disqus или Cackle, то незачем использовать еще формы комментирования социальных сетей, потому что в Disqus или Cackle есть авторизация через социальные сети, и незачем дублировать функционал.

      Ответить
  • Fresh

    Подскажите, плиз, установил плагин комментариев от Facebook.
    Вроде все правильно: 1ая часть в header.php, 2ая в single.php.
    В итоге НА ВСЕХ СТРАНИЦАХ комментарии дублируются. Т.е. пишешь коммент к одной статье, такой же автоматом добавляется в других. С плагином от vk таких проблем нет, все по аналогии и все работает.

    Ответить
    • Denis Creative

      Важный момент! При копировании кода в файлы какой-либо CMS — нужно заменить параметр data-href во втором блоке (адрес сайта) на адрес страницы:
      <div class="fb-comments" data-href="http://site.com/" data-width="550" data-numposts="5" data-colorscheme="light">

      Если сайт статический, тогда для каждой страницы нужно будет ставить свой url вручную.

      Если сайт на движке каком-то, то должен выводиться динамический url страницы, для WordPress будет так:
      <div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="550" data-numposts="5" data-colorscheme="light"></div>

      Ответить
      • Fresh

        Спасибо большое, помогло (wordpress)
        Только 1 косяк нарисовался, ПЕРВЫЙ коммент в статье добавляется с ошибкой «Неизвестный тип объекта», поле ввода коментария в виджете становится неактивной, хотя после обновления страницы коммент таки оказывается добавленным. Последующие комментарии добавляются без проблем. Также, что интересно, если удалить все комментарии на странице, то «как бы первый» уже будет добавляться БЕЗ ошибки. Не подскажете, в чем может быть проблема? Спасибо!

        Ответить
  • MichaelCom

    Очень порадовали Вы меня! Как раз актуально на данный момент! :) Спасибо!

    Ответить
  • Марина

    Отличная статья!
    Но есть вопрос: как настроить автоматическое проставление «галочки» в поле «опубликовать на Faceook» (открывается при написании нового комментария)?
    Спасибо

    Ответить
    • Denis Creative

      Дублирование комментариев

      Функция «Дублирование комментариев» позволяет людям участвовать в одном обсуждении независимо от того, откуда приходят комментарии: с вашей веб-страницы или Страницы Facebook. Когда вы публикуете ссылку с вашего сайта на вашу Страницу на Facebook, комментарии, размещенные на вашей веб-странице, появятся и в вашей публикации Facebook (и наоборот). Это позволяет сделать обсуждение более обстоятельным, так как на обоих ресурсах увеличивается количество комментариев.

      Включить функцию «Дублирование комментариев» можно в инструменте модерации во вкладке Настройки. Для этого вам нужно быть администратором Страницы Facebook, на которой вы хотите дублировать комментарии.

      Ответить

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