如何将 Facebook 页面的提要嵌入我的网站答案

【问题标题】：How to embed a Facebook page's feed into my website如何将 Facebook 页面的提要嵌入我的网站
【发布时间】：2012-02-29 12:57:25
【问题描述】：

我正在与一个团体合作，帮助宣传一项慈善活动。我想嵌入的页面不是我的 Facebook 个人资料，而是某人创建的 Facebook 页面。

我想在我的网页中显示该新闻提要。如果我需要从此页面获取信息/访问权限，请告诉我。如果其他人有工作示例，请告诉我。我一直在使用 jsfiddle.net 来绘制它。

这是页面：http://www.facebook.com/pages/Chefs-Classic-Knock-OUT-Bout/225835004169328

【问题讨论】：

是 Facebook 活动还是 Facebook 页面（您同时使用了这两个术语）？
这是一个页面，因此是 URL 的“/pages/”部分。从技术上讲，Facebook 上有一个活动设置，但上面的 URL 是发布更新的位置。我只想从这个页面显示这些更新，而不是在我的网站上重新输入它们。
developers.facebook.com/docs/reference/api您的页面链接似乎已损坏
对于网站开发人员，您的另一个选择是遵循一个有效的 Facebook Graph API 教程，例如这个 codeofaninja.com/2014/10/… 但如果您需要一个快速的解决方案，您可以立即自定义和嵌入 Facebook 页面提要，你应该使用这样的网站插件displaysocialmedia.com/…
免费试用fetchrss.com ;)

标签： javascript html facebook facebook-page facebook-feed

【解决方案1】：

啊，这超级简单，无需编程。

见：https://developers.facebook.com/docs/plugins/page-plugin

您需要保持show stream 选项处于打开状态。您可以调整宽度和高度以及其他一些东西。

【讨论】：

碰巧，有谁是首选或最受支持的 HTML5、XFBML 或 iframe？
我自己更喜欢 HTML5。其他人倾向于使用 iframe，因为不需要在主机页面上包含任何 javascript。老实说，不确定哪个最受支持。
人们通过 Grpah API 和 RSS 提要使这件事复杂化。超级简单，谢谢！！
如果您希望在您的网页上进行更多自定义，本教程是我找到的最佳解决方案codeofaninja.com/2014/10/…
With the release of Graph API v2.3, the Like Box plugin is deprecated and will stop working on June 23rd 2015. Use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites.

【解决方案2】：

如果您正在寻找自定义代码而不是插件，那么这可能会对您有所帮助。 Facebook 图表自发展以来已经发生了一些变化。这些步骤适用于我最近尝试并运行良好的最新 Graph API。

涉及三个主要步骤 - 1. 确保您可以使用服务器端语言 (PHP) 进行编码，2. 获取 Facebook 访问令牌，3. 调用 Graph API 传递访问令牌。

1.获取访问令牌 - 这是获取 Facebook 页面访问令牌的分步过程。 -Embed Facebook page feed on my website。根据这个，您需要在 Facebook 开发人员页面中创建一个应用程序，该应用程序将为您提供一个 App Id 和一个 App Secret。使用这两个并获取访问令牌。

2。调用 Graph API - 一旦获得访问令牌，这将非常简单。您只需要使用要检索的所有字段/属性形成一个指向 Graph API 的 URL，并向该 URL 发出 GET 请求。这是一个关于如何在 asp.net MVC 中执行此操作的示例。 Embedding facebook feeds using 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

【讨论】：

这种方法是否允许我获得多个提要？我有一个托管多个站点的 sitecore 实例，并希望在每个站点之间共享一个组件，并在同一个开发帐户下使用多个提要
如果您在 Sitecore 中使该组件几乎不可配置，那么您可以使用相同的组件更改 Sitecore 中每个站点的键和 fb 页面名称。

【解决方案3】：

在新的page-plugin 中，您可以在您的网站中创建多个标签。主页插件可让您轻松地在您的网站上嵌入和推广任何 Facebook 主页。就像在 Facebook 上一样，您的访问者无需离开您的网站即可点赞和分享主页。

在您的页面中包含一次 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>

将插件代码放置在您希望插件显示在页面上的任何位置。

<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>

【讨论】：

【解决方案4】：

Like Box/Page 插件基本上是一个 iframe 和丑陋的 :D

所以我创建了自己的免费插件，我称之为Famax plugin 来显示FanPage 提要。它类似于点赞框，但具有更好的 UI 并且更可定制。

另外，由于 Like 框显示在具有固定宽度和高度等的 iframe 中，它并没有真正响应。

【讨论】：

【解决方案5】：

如果我错了，请纠正我，但 Facebook 似乎弃用了 Activity Feed 插件。此外，似乎不再有任何替代活动插件。

这里是链接：https://developers.facebook.com/docs/plugins/activity

【讨论】：

活动提要已弃用，但现在有 page plugin 可用。主页插件可让您轻松地在您的网站上嵌入和推广任何 Facebook 主页。就像在 Facebook 上一样，您的访问者可以在不离开您的网站的情况下点赞和分享页面。见[我的回答] (stackoverflow.com/a/34103284/1045444)

【解决方案6】：

对于网站开发人员，您还有另一个选择是遵循 Facebook Graph API 教程，例如 this one。

但是，如果您需要一个快速的解决方案，您可以立即自定义和嵌入 Facebook 页面提要，您应该使用网站插件，例如 this one。

这是一个分步指南：

获取Free Key 或Paid Key。
转到this login page 并使用密钥登录。
登录后，点击“+ Create Custom Feed”按钮。
在弹出窗口中，为您的自定义 Facebook 页面提要命名。
在下拉菜单中，选择“您网站上的 Facebook 页面供稿”选项。
输入您的 Facebook 主页 ID。
单击“继续”按钮。这将显示自定义选项。
点击位于屏幕右上角的“嵌入网站”按钮。
在弹出窗口中，单击“复制代码”按钮复制嵌入代码。
将嵌入代码粘贴到您的网站上。

访问tutorial link 也可以在那里观看现场演示。

【讨论】：