Facebookソーシャルブラグイン 「いいね!」挙動

Facebookソーシャルブラグイン 「いいね!」挙動 GW明けなので、軽いネタです。
Facebookの「いいね!」ボタンはここで生成したりhttps://developers.facebook.com/docs/reference/plugins/like/なれている人やCMSはいつもので指定しているかと思います。
で、「いいね!」した後にコメントボックスが出るときと出ない時があります。
っていうのを確かめようという微妙な検証ネタです。

HTML5 まずはhtml5です。
jsをbody下に
<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&appId=************";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

で、表示場所に下記。
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
▼結果
Facebookソーシャルブラグイン 「いいね!」挙動 HTML5
IE6,7でコメントきかない
※IETesterでの確認

XFBML HTML5同様jsをbody下に記述。
<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&appId=*************";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

次に下記を記載
<html xmlns:fb="http://ogp.me/ns/fb#">
最後に表示場所に下記。
<fb:like href="URLを記載" send="false" width="450" show_faces="true"></fb:like>
▼結果
Facebookソーシャルブラグイン 「いいね!」挙動 XFBML
IE6,7でコメントきかない
※IETesterでの確認

IFRAME 表示したい場所に下記を記載
<iframe src="//www.facebook.com/plugins/like.php?href=URLを記載&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80&appId=***********" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
▼結果
Facebookソーシャルブラグイン 「いいね!」挙動 IFRAME
Layout Styleがstandardの時にのみコメント可能。
ただし、「いいね!」した直後のみ。

IE6,7もLayout Styleがstandardであればコメント可能。
おまけ shareボタンもまだ利用可能です。
表示させたい場所に下記を記述します。
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
こちらはどのブラウザでもコメント可能でしたがhttpsには対応していないようですし、今後サポートなしです。

▼結果
Facebookソーシャルブラグイン 「いいね!」挙動 share

sponsors

「Facebookソーシャルブラグイン 「いいね!」挙動」をシェアする

記事作成:
記事URL:

TOP > > > Facebookソーシャルブラグイン 「いいね!」挙動