logo标签列表

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

javascripthtmlfacebookfacebook-pagefacebook-feed
72
我正在与一组人一起协助推广一项慈善活动。我想嵌入的页面并不是我的Facebook个人资料，而是其他人创建的Facebook页面。
我希望在我的网页中展示该页面的新闻动态。如果需要从该页面获取信息/访问权限，请告诉我。如果有其他人有可行的示例，请告诉我。我一直在使用jsfiddle.net进行绘制。
以下是页面链接: http://www.facebook.com/pages/Chefs-Classic-Knock-OUT-Bout/225835004169328
这是一个Facebook事件还是一个Facebook页面（您同时使用了这两个术语）？ - DMCS
这是一个页面，因此URL中有“/pages/”部分。在Facebook上技术上设置了一个事件，但上述URL是更新将发布的位置。我想仅从此页面显示这些更新，而不是在我的网站上重新输入它们。 - NickG
https://developers.facebook.com/docs/reference/api/ - Jan K.
对于网站开发人员，另一个选择是遵循工作中的Facebook Graph API教程，例如此链接 https://www.codeofaninja.com/2014/10/display-facebook-page-feed-on-wordpress-or-website.html但如果您需要快速解决方案，可以即时自定义和嵌入Facebook页面动态，您应该使用网站插件，例如此链接 https://www.displaysocialmedia.com/display-show-embed-facebook-page-feed-on-website/ - Emkey
试试免费的 http://fetchrss.com ;) - KingRider
6个回答
122
有没有人知道哪种方式更受欢迎或支持，HTML5、XFBML还是iframe？ - NickG
1
我个人更喜欢HTML5。其他人倾向于使用iframe，因为无需在主机页面上包含任何JavaScript。说实话，我不确定哪种方式得到的支持最广泛。 - DMCS
1
人们通过Graph API和RSS Feeds使这件事情变得复杂了。其实它非常简单，谢谢！ - Tushar
1
如果您想在网页上进行更多的自定义，那么我发现这篇教程是最好的解决方案：https://www.codeofaninja.com/2014/10/display-facebook-page-feed-on-wordpress-or-website.html - Emkey
2
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. - cameronjonesweb
6
如果您正在寻找自定义代码而非插件，则这可能会对您有所帮助。自Facebook图形发展以来，它已经经历了一些变化。下面是最新的Graph API步骤，我最近尝试过并且效果很好。
涉及三个主要步骤-1.确保您可以使用服务器端语言(PHP)进行编码，2.获取Facebook访问令牌，3.通过传递访问令牌调用Graph API。 1.获取访问令牌-以下是逐步获取Facebook页面访问令牌的过程。-在我的网站上嵌入Facebook页面提要。根据此，您需要在Facebook开发人员页面中创建一个应用程序，该应用程序将为您提供应用程序ID和应用程序密钥。使用这两个获取访问令牌。

2. 调用图形 API - 一旦获得访问令牌，这将非常简单。您只需要形成一个URL到Graph API，并使用您想要检索的所有字段/属性进行GET请求。以下是在asp.net MVC中执行此操作的示例。使用asp.net mvc嵌入Facebook动态。在任何其他技术中，这应该是非常相似的，因为它只是一个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实例，并且希望在每个站点之间共享一个组件，在同一个开发账户下使用多个数据源。 - Sean T
如果你在Sitecore中使组件变得可配置，那么你可以在每个Sitecore站点中更改键和fb页面名称来使用相同的组件。 - Pranay
4
在新的页面插件中，您可以在网站中添加多个选项卡。页面插件使您可以轻松地嵌入和推广任何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>

  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

点赞框/页面插件基本上是一个iframe，看起来有点丑:D

因此我创建了自己的免费插件，称之为Famax插件来显示FanPage feeds。它类似于点赞框但具有更好的用户界面和更多的可定制性。

另外，由于点赞框显示在具有固定宽度和高度等属性的iframe中，所以它不太具有响应性。

0
活动动态已被弃用，但现在有页面插件可用。页面插件可以让您轻松地在您的网站上嵌入和推广任何Facebook页面。就像在Facebook上一样，您的访问者可以在不离开您的网站的情况下点赞和分享该页面。请参阅我的回答。 - Somnath Muluk
0
对于网站开发人员来说，另一个选择是跟随一个有效的Facebook Graph API教程，例如this one。
但如果您需要一个快速解决方案，可以立即自定义和嵌入Facebook页面源，您应该使用网站插件，例如this one。
以下是一步一步的指南：
  1. 获取免费密钥或付费密钥。
  2. 前往此登录页面并使用密钥登录。
  3. 登录后，单击“+创建自定义订阅”按钮。
  4. 在弹出窗口中，为您的自定义Facebook页面订阅命名。
  5. 在下拉列表中，选择“在您的网站上的Facebook页面订阅”选项。
  6. 输入您的Facebook页面ID。
  7. 单击“继续”按钮。这将显示自定义选项。
  8. 单击位于屏幕右上角的“嵌入到网站”按钮。
  9. 在弹出窗口中，通过单击“复制代码”按钮复制嵌入代码。
  10. 将嵌入代码粘贴到您的网站上。

访问教程链接以查看演示。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接