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

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

2013-11-18 追加

今日、Facebook プラグインの「Like Button」を再々度(何度やったかは忘れましたが)試してみました。

すると、選択できるボタン3種類のうち、
[standard] を選択すると、相変わらずiPhoneでの表示が崩れてしまいますが、
[button_count]と[box_count] の2つではiPhoneでの表示が(一時崩れはしますが)正常になることを確認しました。

(もしかしてバグだった?のを修正?)

プラグインでiPhoneにも対応できるのなら、下の記事は不要になりますね。

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

「いいね!」ボタンを押すと

「いいね!」ボタンを押すと

【問題点】

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

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

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

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

【解決方針】

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

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

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

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

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

  1. Facebook プラグインの設定項目のうち「Like Button」を選択し、「Like Button Settings」のページへ行きます。
    Facebook [Like Button]
  2. 「Read more… 」と書いてあるリンク先へ飛びます。
    Facebook [readme]
  3. 「URL to Like」の欄に、いいねをしてもらいたいページのアドレスを記入して、レイアウトなどを決めたら、下にある[Get Code]ボタンをクリックします。
    Facebook[Get Code]
  4. 現れたポップアップ内の[IFRAME]ボタンを押します。
    Facebook[IFRAME]
  5. 表示されたコードをコピーして、「いいね!」ボタンを置きたいページの場所に、コードを貼り付けます。
    Facebook[Paste Code]

おわり。

コメントを残す