ﾌｪｲｽﾌﾞｯｸﾎﾞﾀﾝのjavascriptの読み込みについてこちらのｳｪﾌﾞｻｲﾄを参照して､ﾌｪｲｽﾌﾞｯｸのﾎﾞﾀﾝを後読みにして表示しようと考えました｡ http://fukuyama.…

ﾌｪｲｽﾌﾞｯｸﾎﾞﾀﾝのjavascriptの読み込みについて

こちらのｳｪﾌﾞｻｲﾄを参照して､ﾌｪｲｽﾌﾞｯｸのﾎﾞﾀﾝを後読みにして表示しようと考えました｡
http://fukuyama.co/lazyloadsns

ﾎﾞﾀﾝの種類
https://developers.facebook.com/docs/reference/plugins/like/
ｻﾝﾌﾟﾙのｿｰｽではiframe版を使用しています｡
こちらの希望としてはhtml5を使用したいと考えています｡

このiframeだと間違いなくﾎﾞﾀﾝの表示ができたのですが､html5版に変更すると表示ができません｡

おそらく､ｽｸﾘﾌﾟﾄの部分と表示の部分が2つに分かれているので､何らかの問題が発生していると思いいろいろと試行錯誤したのですが解決できませんでした｡

html5形式を使用して､ﾎﾞﾀﾝを後読み込みで表示させる方法を教えてください｡

これは､HTML5 版の埋め込むｺｰﾄﾞの前半です｡

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

それを､こうします｡

<div id="fb-root"></div> <script>window.setTimeout(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/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'), 5000);</script>

赤字が追加したところです｡
5秒後にﾎﾞﾀﾝを表示します｡

ざっくりと､こんな感じのｿｰｽになります｡

<html>
<body>
<!-- これが前半 -->
<div id="fb-root"></div>
<script>window.setTimeout(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/ja_JP/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'), 5000);</script>
<!-- 前半､ここまで -->

<b>この下に､いいね！を表示する</b><br>

<!-- これが後半 -->
<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-width="450" data-show-faces="true" data-send="true"></div>
<!-- 後半､ここまで -->

</body>
</html>

追記です｡

試してみましたが､表示されません｡
前半部分のsetTimeout が機能していないようです｡

すみません､試したときの Facebook が重くて､setTimeout が効いていると思い込んでました｡
極端な値にして確認したので､今度は大丈夫です｡
Facebook のｺｰﾄﾞを極力活かしたのがこちら｡

<html>
<body>
<div id="fb-root"></div>
<script>window.setTimeout(function() {(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/ja_JP/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'facebook-jssdk')}, 10000);</script>



<b>この下に､いいね！を表示する</b><br>
<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-width="450" data-show-faces="true" data-send="true"></div>


</body>
</html>

もうちょっと､分かりやすくしたのがこちらです｡

<html>
<body>
<div id="fb-root"></div>
<script>window.setTimeout(function() {
 var d = document;
 var s = 'script';
 var id = 'facebook-jssdk';
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}, 10000);</script>



<b>この下に､いいね！を表示する</b><br>
<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-width="450" data-show-faces="true" data-send="true"></div>


</body>
</html>