Как встроить ленту страницы Facebook на мой сайт

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

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

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


javascript facebook html facebook-page facebook-feed
person NickG    schedule 08.02.2012    source источник
comment
Это мероприятие на Facebook или страница на Facebook (вы использовали оба термина)?   -  person DMCS    schedule 08.02.2012
comment
Это страница, поэтому часть URL-адреса /pages/. Технически на Facebook настроено событие, но указанный выше URL-адрес — это место, где будут публиковаться обновления. Я хотел бы просто показать эти обновления с этой страницы, а не перепечатывать их на своем веб-сайте.   -  person NickG    schedule 08.02.2012
comment
developers.facebook.com/docs/reference/api ссылка на вашу страницу выглядит сломанный   -  person Jan K.    schedule 08.02.2012
comment
Для разработчиков веб-сайтов есть еще один вариант: следовать рабочему руководству по API Facebook Graph, например этому codeofaninja.com/2014/10/ Но если вам нужно быстрое решение, позволяющее мгновенно настроить и встроить ленту страницы Facebook, вам следует использовать веб-сайт плагины, такие как этот displaysocialmedia.com/   -  person Emkey    schedule 13.07.2017
comment
Попробуйте бесплатный fetchrss.com ;)   -  person KingRider    schedule 05.12.2017

Ответы (6)


arrow_upward
120
arrow_downward

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

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

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

person DMCS    schedule 08.02.2012
comment
Случайно не знает ли кто-нибудь, что является предпочтительным или наиболее поддерживаемым, HTML5, XFBML или iframe? - person NickG; 09.02.2012
comment
Я сам предпочитаю HTML5. Другие, как правило, склоняются к iframe, поскольку нет необходимости включать какой-либо javascript на хост-страницу. Честно говоря, не уверен, что больше всего поддерживается. - person DMCS; 09.02.2012
comment
Люди усложняют это, используя Grpah API и RSS-каналы. Это было супер просто, спасибо!! - person Tushar; 03.05.2014
comment
На тот случай, если вы хотите более индивидуально настроить его на своей веб-странице, это руководство — лучшее решение, которое я нашел codeofaninja.com/2014/10/ - person Emkey; 27.10.2014

arrow_upward
6
arrow_downward

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

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

<сильный>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

person Pranay    schedule 09.06.2016
comment
Позволяет ли этот подход получать несколько фидов? У меня есть экземпляр sitecore, на котором размещено несколько сайтов, и я хотел бы использовать один компонент между каждым сайтом с несколькими каналами под одной и той же учетной записью разработчика. - person Sean T; 12.08.2019
comment
Если вы сделаете компонент мало настраиваемым в Sitecore, то вы можете использовать тот же компонент, изменяя ключи и имя страницы fb для каждого сайта в Sitecore. - person Pranay; 21.09.2019

arrow_upward
4
arrow_downward

В новом плагине страницы вы можете создавать несколько вкладок на своем веб-сайте. Плагин 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>

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

введите здесь описание изображения

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

  • Вкладка «Временная шкала»: здесь будут показаны самые последние сообщения на временной шкале вашей Страницы 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>

person Somnath Muluk    schedule 05.12.2015

arrow_upward
2
arrow_downward

Плагин Like Box/Page — это, по сути, iframe и уродливый :D

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

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

person Patrick    schedule 05.02.2015

arrow_upward
0
arrow_downward

Поправьте меня, если я ошибаюсь, но кажется, что Facebook устарел от плагина ленты активности. Кроме того, кажется, что больше нет плагина-заменителя активности.

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

person Maksim Luzik    schedule 21.04.2015
comment
Лента активности устарела, но теперь доступен плагин страницы. Плагин Page позволяет легко встраивать и продвигать любую страницу Facebook на вашем веб-сайте. Как и на Facebook, ваши посетители могут ставить лайки и делиться страницей, не покидая ваш сайт. См. [мой ответ] (stackoverflow.com/a/34103284/1045444) - person Somnath Muluk; 05.12.2015

arrow_upward
0
arrow_downward

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

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

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

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

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

person Emkey    schedule 12.07.2017