Facebook的按鈕將不會加載（有0寬度）

我想設置一個像按鈕。我遵循官方指示，但它不會加載。檢查顯示它似乎具有零寬度。我做了一個jsfiddle來展示這個問題。正如你所看到的，什麼也不顯示：Facebook的按鈕將不會加載（有0寬度）

從的jsfiddle代碼：

<!-- fb like script --> 
<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 = "http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"; 
    fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 

</script> 

<!-- fb like button --> 
<div class="fb-like" data-href="http://www.mylinkhere.com" data-layout="button_count" data-width="100" data-action="like" data-show-faces="false" data-share="false"> 
</div>

來源

2016-01-23 MrSnappingTurtle

首先，爲了加載的Facebook SDK中的jsfiddle你需要使用HTTPS。（FI https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5或只是//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5如果你已經在HTTPS情況下）

其次，沒有一個明確的解決方案，而是一個解決方法是手工強制設定寬度和高度facebook的元素，像這樣：

.fb-like, 
.fb-like > span, 
.fb-like > span iframe { 
width: 100px !important; 
height: 20px !important; 
}

例子： https://jsfiddle.net/8rutttoq/1/

來源

2016-01-30 09:53:45 vtosh

享受那些多汁的50分。 – MrSnappingTurtle

我認爲你需要初始化你的Facebook SDK這樣

FB.init({ 
    appId  : '{your-app-id}', 
    status  : true, 
    xfbml  : true, 
    version : 'v2.4' // or v2.0, v2.1, v2.2, v2.3 
    });

參考this一次。它可以幫助你

來源

2016-01-23 22:01:39

不neccessary對於像按鈕 – luschn

呀，我並不需要一個實際的FB-應用程序或頁面進行像按鈕網站的網址，是吧？ – MrSnappingTurtle

測試用：

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

來源

2016-01-23 22:31:20

這並沒有工作，但不是沒有一個？版本查詢相同的代碼？ – MrSnappingTurtle

更重要的變化是將協議切換到https。否則，SDK將無法加載，並且控制檯中將顯示以下錯誤：「混合內容：'https://fiddle.jshell.net/_display/'頁面通過HTTPS加載，但請求不安全的腳本'http://connect.facebook.net/en_US/sdk.js'。此請求已被阻止，內容必須通過HTTPS提供。「 – vtosh

Facebook的按鈕將不會加載（有0寬度）

回答

相關問題