使用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頁面插件

回答

相關問題