こちらのウェブサイトを参照して、フェイスブックのボタンを後読みにして表示しようと考えました。
http://fukuyama.co/lazyloadsns
ボタンの種類
https://developers.facebook.com/docs/reference/plugins/like/
サンプルのソースではiframe版を使用しています。
こちらの希望としてはhtml5を使用したいと考えています。
このiframeだと間違いなくボタンの表示ができたのですが、html5版に変更すると表示ができません。
おそらく、スクリプトの部分と表示の部分が２つに分かれているので、何らかの問題が発生していると思いいろいろと試行錯誤したのですが解決できませんでした。
html5形式を使用して、ボタンを後読み込みで表示させる方法を教えてください。
No.1
4973
2154
100pt
これは、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秒後にボタンを表示します。
ざっくりと、こんな感じのソースになります。
55
53
<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>
No.1
49732154
ここでベストアンサー
100pt
これは、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>
すみません、試したときの Facebook が重くて、setTimeout が効いていると思い込んでました。
極端な値にして確認したので、今度は大丈夫です。
回答に追記したので、確認してみてください。
ありがとうございます。
問題なく動作しました。
助かりました。
2
1
1
2
1
すみません、試したときの Facebook が重くて、setTimeout が効いていると思い込んでました。
2013/09/07 19:12:39極端な値にして確認したので、今度は大丈夫です。
回答に追記したので、確認してみてください。
ありがとうございます。
2013/09/07 21:16:42問題なく動作しました。
助かりました。