Category Archives: WordPress

Facebook「いいね！」ボタンは、Facebook公式プラグインを使用していますが、使い方によってWordPressのページが壊されてしまっていました。

指摘してくださった方、ありがとうございます。

無事解決しましたので、お礼がてらブログとして記録しておくことにいたしました。

【問題点】

写真のように、右下にある[閉じる]ボタンがきちんと表示されていません。
設定によっては、ボタンが全く表示されないため閉じることができなくなってしまいます。

これは、固定ページや投稿ページの本文中に入れる「いいね！」ボタンを押すと、コメントを入力するポップアップが出てきますが、その横幅の問題です。

横幅をデフォルトのままにすると、iPhoneで見たときにページのデザインが崩れてしまいます(これは、TwitterBootstrapとの絡みもあります)。そのために、横幅を調節したのですが…

横幅が狭いと、「いいね！」ボタンを押すと出てくるコメント入力欄の右下にある[閉じる]ボタンが見えず、コメント入力欄が開きっぱなしになってしまいます(写真の状態)。

【解決方針】

コメント入力欄が出てこないようにする。そのためには、・・・

Facebook プラグインのコードバージョンには、HTML5、XFBML、IFRAME、URL といった種類があります。

これらのうち、コメント欄のポップアップが出てくるのは、
HTML5、XFBML
の二つでした(URL版は一瞬出てきて何故かすぐ消えました)。

IFRAME 版のプラグインを使えば、コメント欄のポップアップは出てきません。

【IFRAME 版のプラグインを選択する方法】

1. Facebook プラグインの設定項目のうち「Like Button」を選択し、「Like Button Settings」のページへ行きます。
   

2. 「Read more… 」と書いてあるリンク先へ飛びます。
   

3. 「URL to Like」の欄に、いいねをしてもらいたいページのアドレスを記入して、レイアウトなどを決めたら、下にある[Get Code]ボタンをクリックします。
   

4. 現れたポップアップ内の[IFRAME]ボタンを押します。
   

5. 表示されたコードをコピーして、「いいね！」ボタンを置きたいページの場所に、コードを貼り付けます。
   

おわり。