Facebook как кнопка не загружается (имеет 0 ширину)

Question

Я пытаюсь настроить подобную кнопку. Я следовал официальным инструкциям, но он не будет загружаться. Осмотр показывает, что он имеет нулевую ширину. Я сделал jsfiddle, чтобы продемонстрировать эту проблему. Как вы можете видеть, ничего не отображается:

https://jsfiddle.net/4qme8mbn/

код из 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> 

Answer 1

Во-первых, для того, чтобы загрузить facebook SDK в JSFiddle вам нужно использовать протокол HTTPS. (фи 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/

Answer 2

Я думаю, что вам нужно инициализировать 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 раз , Это может помочь вам

Answer 3

тест с:

<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>