【Facebook】いいね!ボタンを押した時のコメント欄対応あれこれ[備忘録]

スポンサードリンク

Facebookのいいね!ボタン設置関係で今まで色々頭を悩ませたので、備忘録意味を込めて書き記しておきます。

いいねボタンのコメント欄が途切れる件

いいねボタンを押した時に表示されるコメント欄表示させる場合は下記

【WordPress】「いいね!」ボタンを押した時に表示されるコメント欄が切れる現象の対応


 いいねボタンのコメント欄自体を表示させない

これは「CSSで対応できる」という記事を見かけますが、全く効果が無かった(やり方が悪かった?)ので、僕が出した結論は

iframe版の「いいねボタン」を使う

これです。

モバイルテーマだと、コメント欄が表示されるとはみ出してしまって困るんですよね。

実はボタン押下時にコメント欄が表示されるのはHTML5版とXFBML版だけ(特定条件でiframeでも表示される場合はある)なので、モバイルページなどに設置する場合はiframe版をオススメします。

ボタンのコードの取得は「Facebook開発者ページ」からどうぞ。

 iframe版いいねボタンを記事別に対応する

iframe版には1つだけ欠点?があるんです、それは

指定したURLでしかコードが発行できない

これです。

Facebook開発者ページ」の「 (?)」の項目にURLを入れないとiframe版のコードが発行できないんですよねー・・・。

これを無理矢理対応させる方法(WordPressの場合)はこれをコピペで貼り付け

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&layout=button_count&show_faces=false&width=200&action=like&font&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true"></iframe>

 その他はこちらのサイトで詳しく書かれています。

「Facebookいいね!ボタン」をホームページやブログに設置~ワードプレス、ムーバブルタイプ~

 

というわけでPCテーマはHTML5版またはFBML版、モバイルテーマはiframe版がオススメです。

本当はHTML5版、FBML版でコメント欄表示の有無を指定できたら一番良いんですけどねぇ・・・。

 

この記事をサイトに埋め込む
スポンサードリンク
この記事をシェアする
RSSリーダーに登録する

 RSSリーダーで購読する

Facebookの反応