1

我想将 facebook 提要集成到 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>
4

1 回答 1

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>

在这里查看演示

于 2013-10-14T10:56:51.093 回答