将facebook Feed嵌入到html中

时间:2013-10-14 10:48:28

标签: html css xhtml feed

我想将facebook Feed整合到html页面中。 我已经研究了很多,并找到了几种方法来做到这一点,但它们似乎都不起作用......

我认为最有效的方法是使用iFrame。但每当我将一个加载到我的页面时,我都会收到错误。 该错误表明他找不到文件或目录。错误以灰色矩形表示,皱着眉头。

请注意,我仍在创建此网站,因此所有内容都处于离线状态,可以通过我的电脑访问。

干杯!

这是我的代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Sample</title>
        <link href="_resources/styles/sample.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />

    </head>
    <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/all.js#xfbml=1&appId=207087449372135";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<div class="fb-like-box" data-href="http://www.facebook.com/FacebookDevelopers" data-width="200" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>

    </body>
</html>

1 个答案:

答案 0 :(得分:2)

非常简单,无需编程,请点击此处 - https://developers.facebook.com/docs/plugins/like-box-for-pages/

您需要将此代码放在开始正文标记

之后
<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/all.js#xfbml=1&appId=207087449372135";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

并将以下代码粘贴到您想要显示Feed的位置。

<div class="fb-like-box" data-href="http://www.facebook.com/FacebookDevelopers" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>

<强> CHECK OUT THE DEMO HERE