使用Facebook页面插件

虽然试图使用Facebook的页面插件创建一个小的portlet来显示公司页面的更新，但我遇到了各种错误。其中最大的是插件显示屏，根本没有显示出来。使用Facebook页面插件

这里是我的代码（直接复制并从Facebook粘贴，除了HTML标签）：

<html> 
    <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"; 
      fjs.parentNode.insertBefore(js, fjs); 
     }(document, 'script', 'facebook-jssdk'));</script> 

     <div class="fb-page" data-href="https://www.facebook.com/facebook" 
     data-small-header="false" data-adapt-container-width="true" 
     data-hide-cover="false" data-show-facepile="true" 
     data-show-posts="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> 
    </body> 
</html>

错误控制台抛出：获取文件：//connect.facebook.net/en_US/sdk.js网:: ERR_FILE_NOT_FOUND

解决方案：将路径前面的“https：//”添加到sdk。在下面的行产生变化：

js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";

然而，这会导致无法再抛出的错误，但该插件显示（实际控件）是仍未显示。或者说，没有任何东西正在展示。

我试着：

卸下 '＃XFBML = 1个&版本V2.5 =' 在路径
改变与ID的div的位置“FB-根的端部“
更改脚本的位置（之前和之后的各种元素）
使用多个浏览器
使用所有可能的解决方案，从this问题

我很难相信来自Facebook开发者网站的示例代码本身不起作用，并且想要解释我做错了什么。

来源

2015-10-21 Bimde

首先，你需要使用的代码，通过HTTP（S）查看的网站上，否则参考形式SDK'// connect.facebook.net /'赢得”工作。您是通过浏览器在本地浏览您的页面吗？是通过文件系统打开吗？在这种情况下，SDK可能无法工作（即使您解决了地址问题） - 尝试将页面上传到（本地）Web服务器并通过HTTP（S）访问时。 – CBroe

@CBroe谢谢你的输入，我试着将文件上传到网络服务器，并查看它的方式和令人惊讶的是，它的工作。但是，可以请你向我解释为什么发生这种情况，为什么从本地文件系统打开文件时的SDK无法访问（即使有：在链接前面的“https”）。再次感谢。 – Bimde

SDK可以被“访问”，但它可能无法正确检查其他内容 - 比如哪个用户当前在浏览器中登录Facebook。（如果你的FB页面，要显示，尚未公布的插件，或限制存取在一些其他的方式，其用户的事项记录下来。） – CBroe

我已编辑此答案，使其更好。

首先，确保你是嵌入自己的网页，而不是Facebook的...

相反的：

... 
<div class="fb-page" data-href="https://www.facebook.com/facebook" ... 
...

..your代码将是这样的：

<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_GB/sdk.js#xfbml=1&version=v2.5"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk'));</script> 
    <!-- your content --> 
    <div class="face"> 
     Here is the div or section where you want to place your Facebook snippet. 
     <br> 
     <div class="fb-page" data-href="https://www.facebook.com/YOURPAGE" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/YOURPAGE"><a href="https://www.facebook.com/YOURPAGE">YOUR PAGE TITLE</a></blockquote></div></div> 
    <!-- your content --> 
</body>

保留所提供的代码，不需要更改，如果要这样做，请确保在Facebook's code gen处执行此操作。

然后，您将需要本地服务器才能看到结果，如Mampp或Xampp。否则，只有在将您的页面上传到Web服务器时，才会看到它工作。

已安装Xampp，您需要做的唯一事情就是将您的网站根文件夹添加到名为htdocs的文件夹中。这是你的localhost。每个你想要创建的网站，我都建议你在这个文件夹中做这个，这样你就可以看到网页浏览器显示的内容。

假设您的网站根文件夹名为example，它位于htdocs Xampp文件夹内。你把阿帕奇on在XAMPP并转到您的浏览器并输入localhost/example/，你会看到你的索引页。

希望它有帮助！如果有，请将答案标记为正确或有用！感谢;）

来源

2015-10-24 05:29:06

一切顺利的代码，唯一的问题是它不在Web服务器上。 Xamppp很棒。谢谢。 – Bimde

不客气！很高兴有帮助！ –

以防万一你仍然有这个问题，使用此代码代替，Facebook的代码似乎对我的博客是给错误，直到我用下面这个网站代码的行。 http://www.HipHopLevel.net

<div id='fb-root'/> 
<script>//<![CDATA[ 
(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.3&appId=YOUR APP ID"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 
//]]></script>

来源

2016-08-23 00:56:14 Abraham

使用Facebook页面插件

回答

相关问题