如何将Facebook页面的源嵌入我的网站

时间:2012-02-08 03:19:11

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

我正在与一个小组合作,以帮助推广慈善活动。我想要嵌入的页面不是我的Facebook个人资料,而是某人创建的Facebook页面。

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

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

6 个答案:

答案 0 :(得分:111)

啊,这太简单了,不需要编程。

请参阅:https://developers.facebook.com/docs/plugins/page-plugin

您需要启用show stream选项。你可以调整宽度和高度以及其他一些东西。

答案 1 :(得分:6)

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

涉及两个主要步骤 - 1.获取Facebook Access Token,2。调用Graph API传递访问令牌。

<强> 1。获取访问令牌 - 以下是获取Facebook页面访问令牌的分步流程。 - Embed Facebook page feed on my website。因此,您需要在Facebook开发者页面中创建一个应用程序,它将为您提供应用程序ID和应用程序密钥。使用这两个并获取访问令牌。

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

答案 2 :(得分:3)

在新的page-plugin中,您可以在网站中执行多个标签。 Page插件可让您轻松嵌入和宣传您网站上的任何Facebook页面。就像在Facebook上一样,您的访问者可以在不离开您的网站的情况下喜欢并共享该页面。

  1. 在您的网页上包含一次JavaScript SDK,最好是在打开<body>标记之后。
  2. <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. 将插件的代码放在您希望插件显示在页面上的任何位置。
    2. <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>

答案 3 :(得分:2)

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

所以我创建了自己的免费插件,我调用Famax plugin来显示FanPage提要。它与类似的盒子相似,但具有更好的用户界面,更具可定制性。

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

答案 4 :(得分:0)

如果我错了,请纠正我,但似乎Facebook弃用了活动源插件。此外,似乎没有任何替代活动插件。

以下是链接:https://developers.facebook.com/docs/plugins/activity

答案 5 :(得分:0)

对于网站开发者而言,您拥有的另一个选择是遵循工作的Facebook Graph API教程,例如this one

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

这是一步一步指南:

  1. 获取Free KeyPaid Key
  2. 转到this login page并使用密钥登录。
  3. 登录后,点击“+创建自定义Feed”按钮。
  4. 在弹出窗口中,命名您的自定义Facebook页面Feed。
  5. 在下拉菜单中,选择“Facebook网页Feed在您的网站上”选项。
  6. 输入您的Facebook页面ID。
  7. 单击“继续”按钮。这将显示自定义选项。
  8. 点击屏幕右上角的“嵌入网站”按钮。
  9. 在弹出窗口中,单击“复制代码”按钮复制嵌入代码。
  10. 将嵌入代码粘贴到您的网站上。
  11. 访问tutorial link以查看现场演示。