フェイスブックボタンのjavascriptの読み込みについて


こちらのウェブサイトを参照して、フェイスブックのボタンを後読みにして表示しようと考えました。
http://fukuyama.co/lazyloadsns

ボタンの種類
https://developers.facebook.com/docs/reference/plugins/like/
サンプルのソースではiframe版を使用しています。
こちらの希望としてはhtml5を使用したいと考えています。

このiframeだと間違いなくボタンの表示ができたのですが、html5版に変更すると表示ができません。

おそらく、スクリプトの部分と表示の部分が2つに分かれているので、何らかの問題が発生していると思いいろいろと試行錯誤したのですが解決できませんでした。

html5形式を使用して、ボタンを後読み込みで表示させる方法を教えてください。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/09/06 05:28:40
  • 終了:2013/09/07 21:42:29

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4521ベストアンサー獲得回数18792013/09/06 11:45:06

ポイント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>
他1件のコメントを見る
id:a-kuma3

すみません、試したときの Facebook が重くて、setTimeout が効いていると思い込んでました。
極端な値にして確認したので、今度は大丈夫です。
回答に追記したので、確認してみてください。

2013/09/07 19:12:39
id:jamis

ありがとうございます。
問題なく動作しました。
助かりました。

2013/09/07 21:16:42

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4521ベストアンサー獲得回数18792013/09/06 11:45:06ここでベストアンサー

ポイント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>
他1件のコメントを見る
id:a-kuma3

すみません、試したときの Facebook が重くて、setTimeout が効いていると思い込んでました。
極端な値にして確認したので、今度は大丈夫です。
回答に追記したので、確認してみてください。

2013/09/07 19:12:39
id:jamis

ありがとうございます。
問題なく動作しました。
助かりました。

2013/09/07 21:16:42

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません