如何将 Facebook 页面的 feed 嵌入到我的网站中

我正在和一个组织合作，帮助宣传一个慈善活动。我想嵌入的页面不是我的 Facebook ID，而是别人创建的 Facebook 页面。

我想在我的网页上显示这条新闻。如果我需要从这个页面获得信息/访问，请让我知道。如果其他人有一个可行的例子，请让我知道。我一直在使用 jsfiddle.net 来起草它。

这就是那一页: http://www.facebook.com/pages/Chefs-Classic-Knock-OUT-Bout/225835004169328

416432 次浏览
小开
最佳答案

超级简单，不需要编程。

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

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

小开

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

所以我创建了我自己的免费插件，我调用 Famax 插件来显示 FanPage 提要。它类似于 like 框，但是具有更好的 UI 和更可定制的特性。

另外，因为 Like 框显示在一个具有固定宽度和高度等的 iframe 中，所以它并没有真正的响应。

小开

如果我说错了请纠正我，但 Facebook 似乎反对使用 Activity Feed 插件。此外，似乎没有任何活动的替代插件了。

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

小开

在新的 页面插件中，你可以在你的网站上设置多个标签页。Page 插件可以让你轻松地在你的网站上嵌入和推广任何 Facebook 页面。就像在 Facebook 上一样，你的访问者可以在不离开你的网站的情况下喜欢并分享这个页面。

  1. 在页面上包含 JavaScriptSDK 一次，最好是在打开 <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>

小开

如果您正在寻找一个自定义代码，而不是插件，那么这可能会有所帮助。Facebook 的图表自从进化以来已经发生了一些变化。这些步骤是为了最新的 GraphAPI，我最近尝试过，工作得很好。

涉及的主要步骤有三个: 1。确保您可以使用服务器端语言(PHP)编写代码，2。获取 Facebook 访问令牌，3。通过访问令牌调用 Graph API。

1.获取访问令牌 -下面是获取 Facebook 页面访问令牌的逐步过程。在我的网站上嵌入 Facebook 页面.根据这一点，你需要在 Facebook 开发者页面中创建一个应用程序，它会给你一个应用程序 ID 和一个应用程序秘密。用这两个拿到访问令牌。

2.调用 Graph API ——一旦获得访问令牌，这将非常简单。您只需要形成一个到 Graph API 的 URL，其中包含您想要检索的所有字段/属性，并向该 URL 发出一个 GET 请求。下面是一个关于如何在 asp.net MVC 中实现的示例。使用 asp.net mvc 嵌入 facebook feed.这在任何其他技术中都应该非常类似，因为它只是一个 HTTPGET 请求。

示例 FQL Query: https://graph.facebook.com/FBPageName/posts?fields=full_picture,picture,link,message,created_time&limit=5&access_token=YOUR_ACCESS_TOKEN_HERE

小开

对于网站开发人员，另一个选择是遵循工作 Facebook 图形 API 教程，如 这个。

但是，如果你需要一个快速的解决方案，你可以自定义和嵌入 Facebook 页面即时饲料，你应该使用网站插件，如 这个。

下面是一步一步的指导:

  1. 做个 免费钥匙或者 付费钥匙。
  2. 转到 登入网页并使用密钥登录。
  3. 登录后，单击“ + Create Custom Feed”按钮。
  4. 在弹出的，命名您的自定义 Facebook 页面饲料。
  5. 在下拉菜单中，选择“ Facebook Page Feed On Your Site”选项。
  6. 输入你的 Facebook 页面 ID。
  7. 单击“继续”按钮。这将显示您的自定义选项。
  8. 点击屏幕右上角的“嵌入网站”按钮。
  9. 在弹出窗口中，通过单击“复制代码”按钮复制嵌入代码。
  10. 将嵌入代码粘贴到您的网站上。

访问 教程链接也可以看到一个现场演示。


提交答案