Как вставить фид страницы Facebook на мой сайт - PullRequest
Новая
       72

Как вставить фид страницы Facebook на мой сайт

66 голосов
/ 08 февраля 2012

Я работаю с группой, чтобы помочь в продвижении благотворительной акции.Страница, которую я хотел бы добавить, НЕ является моим профилем в Facebook, а созданной кем-то страницей в Facebook.

Я хотел бы показать эту новостную ленту на своей веб-странице.Если мне нужно получить информацию / доступ с этой страницы, пожалуйста, дайте мне знать.Если у кого-то есть рабочий пример, пожалуйста, дайте мне знать.Я использовал jsfiddle.net, чтобы нарисовать это.

Вот страница: http://www.facebook.com/pages/Chefs-Classic-Knock-OUT-Bout/225835004169328

Ответы [ 6 ]

112 голосов
/ 08 февраля 2012

Ааа, это очень просто, программирование не требуется.

См .: https://developers.facebook.com/docs/plugins/page-plugin

Вы хотите, чтобы опция show stream была включена. Вы можете настроить ширину и высоту, а также несколько других вещей.

6 голосов
/ 09 июня 2016

Если вы ищете собственный код вместо плагина, то это может вам помочь.График Facebook претерпел некоторые изменения с момента его развития.Эти шаги относятся к последней версии Graph API, которую я недавно попробовал и которая работала хорошо.

Здесь есть два основных этапа: 1. Получение токена доступа Facebook, 2. Вызов API Graph, передача токена доступа.

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

2.Вызов Graph API - это будет довольно просто, как только вы получите токен доступа.Вам просто нужно сформировать URL для Graph API со всеми полями / свойствами, которые вы хотите получить, и сделать запрос GET для этого URL.Вот один пример того, как это сделать в asp.net MVC. Встраивание фидов Facebook с использованием asp.net mvc .Это должно быть очень похоже на любую другую технологию, так как это будет просто запрос HTTP GET.

Пример запроса FQL: https://graph.facebook.com/FBPageName/posts?fields=full_picture,picture,link,message,created_time&limit=5&access_token=YOUR_ACCESS_TOKEN_HERE

3 голосов
/ 05 декабря 2015

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

  1. Включите JavaScript SDK на свою страницу один раз, в идеале сразу после открывающего тега <body>. 

<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/sdk.js#xfbml=1&version=v2.5&appId={APP_ID}";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  1. Разместите код для вашего плагина там, где вы хотите, чтобы плагин появился на вашей странице. 

<div class="fb-page" 
     data-href="https://www.facebook.com/YourPageName" 
     data-tabs="timeline" 
     data-small-header="false" 
     data-adapt-container-width="true" 
     data-hide-cover="false" 
     data-show-facepile="true">
  <div class="fb-xfbml-parse-ignore">
    <blockquote cite="https://www.facebook.com/facebook">
      <a href="https://www.facebook.com/facebook">Facebook</a>
    </blockquote>
  </div>
</div>

Вы также можете изменить следующие настройки:

enter image description here

Также теперь вы можете иметь вкладки шкалы времени, событий и сообщений с новым плагином страницы:

  • Вкладка «Временная шкала»: будут отображаться самые последние записи вашей временной шкалы на странице Facebook.
  • Вкладка «События». Люди могут следить за событиями на вашей странице и подписываться на события из плагина.
  • Вкладка «Сообщения». Люди могут отправлять сообщения прямо на ваш сайт. Для использования этой функции необходимо войти в систему. 

<div class="fb-page" 
  data-tabs="timeline,events,messages"
  data-href="https://www.facebook.com/YourPageName"
  data-width="380" 
  data-hide-cover="false">
</div>
2 голосов
/ 05 февраля 2015

Плагин Like Box / Page - это в основном iframe и безобразный: D

Поэтому я создал свой собственный бесплатный плагин, который я называю Плагин Famax для отображения каналов FanPage. Он похож на аналогичный блок, но имеет лучший интерфейс и более настраиваемый.

Кроме того, поскольку поле «Мне нравится» отображается в iframe с фиксированной шириной, высотой и т. Д., Оно не очень отзывчиво.

0 голосов
/ 13 июля 2017

Для разработчиков веб-сайтов другой вариант, который у вас есть, - это следовать рабочему учебнику API Graph Facebook, например , этому .

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

Вот пошаговое руководство:

  1. Получите БесплатноКлюч или Платный ключ .
  2. Перейдите на эту страницу входа и используйте ключ для входа в систему.
  3. После входа нажмите «Кнопка «Создать пользовательский канал».
  4. Во всплывающем окне укажите свой пользовательский канал страницы Facebook.
  5. В раскрывающемся списке выберите параметр «Подача страницы Facebook на свой веб-сайт».
  6. Введите идентификатор своей страницы в Facebook.
  7. Нажмите кнопку «Продолжить».Это покажет вам параметры настройки.
  8. Нажмите кнопку «Вставить на веб-сайт», расположенную в верхнем правом углу экрана.
  9. Во всплывающем окне скопируйте код для вставки, нажавкнопка «Скопировать код».
  10. Вставьте код для встраивания на свой веб-сайт.

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

0 голосов
/ 21 апреля 2015

Поправьте меня, если я ошибаюсь, но, похоже, Facebook не поддерживает плагин «Лента новостей».Кроме того, похоже, что больше нет заменяющего плагина для активности.

Вот ссылка: https://developers.facebook.com/docs/plugins/activity

...