iframeは嫌なあなたへ…XFBMLでFacebookのLikeボタンをつけるのに必要な事前準備メモ - 適宜覚書-Fragments

iframeは嫌なあなたへ…XFBMLでFacebookのLikeボタンをつけるのに必要な事前準備メモ

      2017/03/03

アプリケーション作成

何となく活況を呈している日本のFacebook、筆者も誘蛾灯にフラフラと引き寄せられるようにここ数日中で遊んでいます。そして御多分にもれず、「いいね!」ボタンをポチポチ押しまくった揚句、自分のBlogにも設置してしまいました。軽佻浮薄そのものですね><。

普通に「いいね!」ボタンを付ける場合は、Facebook for Websites - Facebook開発者のページにありますように、iframe版とXFBML版の二種類があります。

Facebook for Websites - Facebook開発者より引用:

All social plugins can be integrated with your site with iframe tags or XFBML tags, special XML tags that can be included in your HTML pages and parsed by the JavaScript SDK. iframe tags don't have any dependencies, but XFBML tags are more flexible because they are not limited to the fixed size of the iframe.

手っ取り早いのはiframe版なのですが、iframeと聞いただけでソソクサと逃げ出したくなるスメルがある(iframe セキュリティ - Google 検索)ので、仕方なくXFBML版を使うことにしました。でもまあ、せっかくWordpress使っているんで極力楽をするためにプラグインに逃げます。テーマをいじると他のテーマに動く時に面倒ですし…。

事前に必要なこと

XFBML版で今回紹介するプラグインを使うには必要な情報が二つあります。

  1. Facebookへのアプリケーション登録して「アプリケーションID」を入手すること
  2. 自分の「FacebookID(uid)」を入手すること

本当はXFBMLでサンプルコード埋め込むだけなら、アプリケーションIDだけでも良さそうなんだけど…。

まず、アプリケーションIDですが、アプリケーションを作成 - Facebook開発者のフォームで埋め込むサイトの情報(サイト名、サイトURL、地域)を入力または選択して「アプリケーションを作成」ボタンをクリックします。

アプリケーション作成

アプリケーション作成

セキュリティチェックをパスして、アプリケーションの設定が表示されます。下図ではボカしてありますが、IDを追加:に書いたある数字の羅列がアプリケーションIDです。尚、その下にあるサンプルコードが、もろXFBMLを使った「いいね!」ボタンの設置コードです。自分は使わないのでIDのみ記録しました。

次に自分の「FacebookID(uid)」ですが、Facebookにサインインしてプロフィールを表示した際のURLが、http://www.facebook.com/profile.php?id=12345678901234みたいになっている人は2345678901234をそのまま使って下さい。もし設定で明示的なユーザ名を指定しているなら、そうは表示されません。その場合は、https://graph.facebook.com/userid(useridは個々にユーザ名に書き換えましょう)で表示されるidを取得してください。

FacebookユーザID

FacebookユーザID

関係の内容は、グラフAPI - Facebook開発者を参照のこと。

Like-Button-Plugin-For-Wordpress

ここからは普通にプラグインをインストールして、必要な設定を行っただけなので詳細割愛します。WordPress › Like-Button-Plugin-For-Wordpress « WordPress Pluginsというのを使いましたが、他にも沢山同程度の機能のプラグインはあります。もっと良いものがあれば是非紹介して下さい(^^。

本記事より遥かに凄いお勧め情報!

  • Facebook(フェイスブック)のいいね!ボタンとかシェアボタンのうち、よく使いそうなパターンの出力見本を出しただけのページ

論より証拠というか動くものを直接乗っけて、リソースにリンク張ってますね。素晴らしい!bardicheさんありがとー><。いやもう脱帽!

加えて記事作成に参考にしたサイトを感謝を込めてリンク。

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Facebook, Google, WordPress , , , , , , , , ,