facebook「いいねボタン」の正しい設置方法「アプリ登録編」※2015年3月版

●ソーシャルプラグインの一般化

サイトをつくった際に、
ソーシャルプラグインを実装する機会も増えましたよね。

その代表的なものに
facebookの「いいねボタン」
があります。

いまや、どのサイトにいっても「いいねボタン」を目にします。
その設置が手軽なのも流行したひとつの要因と言えるかもしれません。

しかし、、、それら「いいねボタン」含むソーシャルプラグインは
ただサイトに設置するだけでは

全く意味がありません!

今回はその正しい設置方法(2015年3月時点)を自分なりにまとめてみました。

●facebookいいねタグ取得編

実はタグを取得するだけであれば5秒で終わります。
https://developers.facebook.com/docs/plugins/like-button
上記URLより各種設定をした後、「get code」ボタンを押すと好きな書式でタグが取得できます。
11
タグ取得はこんな画面です。
別にfacebookにログインしていなくても取得出来てしまいます。

余裕ですね

ちょっとまって!ちょっとまって!お兄…(自粛)

これだと後々問題が生じます。
OGPのタグ設定がきちんと反映されません。
※OGPについては後で説明します。

いいねボタンのタグを取得する前に「アプリ登録」が必要です。

ここでいうアプリ登録とは
facebookに対して「ここでこのプラグイン(api)を使いますよ~」っていう申請見たいなもんです。
必ずしもアプリケーションを開発することを指しているわけではありません。

アプリ登録の際はfacebookのアカウント登録は必須です。
登録してない人は登録しておきましょう。

ログインしているアカウントがそのアプリの登録者という位置づけになります。

https://developers.facebook.com/

ログイン後上記開発者用のページにアクセスしてください。
01
上部メニューの
「My Apps」より、「Add a New App」に進んでください。
02
すると、「新しいアプリを追加」というモーダルが開くので
03
一番右にあるウェブサイトを選んでください。

04

「Quick Start for Website」
という画面が開きますのでアプリの名前を入力し、カテゴリーを選択します。
ここは自分で分かれば何でもいいです。
05
今回は「social_plugin」という名前にします。かっこつけて英語にしました。
入力がすんだら「Create App Id」をクリックします!

06
すると 「Quick Start for Website」の画面に戻ります。
ここまでですでにアプリ登録は完了してます。
07
ページ下部に「いいねボタン」を使用するサイトURLを入力して「次へ」を押します。
※「サイトURL」「モバイルサイト」どちらか一方でも進めます。

08
画面が自動でスクロールしますので
最下部の「次のステップ」欄でアプリの用途を選びます。

今回は「いいねボタン」なのでソーシャルプラグインを選択してください!

09
すると、使用出来るソーシャルプラグインの一覧がでます。
「いいね!」ボタンを選択してください。

10
さあ、これでようやく、、冒頭で紹介した「いいねボタン」の取得画面と同じ画面に飛びます。

ここで
URL to LIke…使用するウェブサイトのURL
Width…ボタンの幅
Layout…ボタンの種類
ActionType…ボタンを押したときの挙動

上記4項目を指定して
Get Codeを押してください。

12
ここで4種類のタグを選べます。
HTML5
XFBML
IFRAME
URL

どれにすりゃいいのやら。。。
と迷うのであれば

XFBMLを選んでください。
XFBMLはfacebook独自のマークアップ言語です。

独自なだけあって「いろいろ融通がきく」と思ってください。
実際にいいねが押された時の表示・機能が他と変わります。

スグに仕様を変えるfacebookなので
XFBMLを利用したほうが低リスクともいえます。

ただ、iframeのようにタグが一つで設置時が楽なものにくらべると
少し手間が増えますね。

設置方法は、このウインドウ内に説明が書いてありますが

3つにわかれたタグを説明通りそれぞれの適した場所に置くことになります。※タグ設置については別途記載します
晴れてタグを記述したWEBサイトをアップロードすれば設置は完了なんですね!!カンタン!

と言いたいところですが、、、この画面良く見てください。。。
上部黄色い枠でなんか言ってるけど英語でかかれててよくわかんない。。

なんて書いてあるかっていうと

「アプリが公開モードになってないですよー」

っていう警告です。
なので最後にアプリ公開っていう作業が待ってます。

同画面黄色枠部分「App Dashboard」へのリンクをクリック
13
すると登録したアプリのトップ画面に行きます。

そうです。この画面の上部「NO」になっているスイッチをYESにすればいいんです!

あれ、、できない。。

これが最後のひっかけです。
メールアドレスを登録していないと、YESに出来ません!
わかりづらい。。

サイドメニューにある「Settings」をクリック。

14
上部枠右下の「Contact Email」にメールアドレスを入力してください。
右下の「save Changes」で変更を確定します。

そうしたら再度
サイドメニュー 「Status & Review」をクリックし、先ほどの画面に戻り
今度こそ、公開モードをYESにします!

Are you sure you want to make your app public? It will become available to everyone.
これ公開したら他の人も利用できるけどいい?

っていう旨のアラートが出るので[確認]をクリックする 。

これでようやく、いいねボタンをつかうための下準備が完了しました

ここまでやれば、基本的に普通に動作するいいねボタンが設置出来ます。
しかし通常のタグを設置しただけでは
アプリ登録をせずに設置するのと何ら変わりがありません。

ここまで書いたのは全て、、さらにOGPタグを設置するための下準備に他ならないのです。

OGPタグとは!?

…と。。長くなってしまったので次回はいよいよタグ設置と、OGPタグの設定について説明していきます。
次回もよろしくお願いします。