Facebookのいいね！ボタン導入メモ

TwitterとGoogle+のボタンを入れたらやっぱりFacebookのボタンも揃えたい。この３つくらいが見やすくていいかな、と。それに大きさも揃ってるし。

Facebookのボタンはちょっとめんどくさい感じしますね〜。

アプリIDの取得

まずは以下のページから「Facebook DEVELOPERS」へ。

Facebook開発者 ここでアプリIDを取得します。要ログイン。

「新しいアプリを作成」ボタンをクリック

ページの右上に表示されているボタンをクリックします。


アプリ名をつけます

とりあえずなんでも。そして「続行」ボタンです！


セキュリティチェック

入力覧に入力して「送信」ボタン！


アプリの基本設定画面に移動

ここでいろいろ設定していきます。


「Website with Facebook Login」をクリック

「サイトURL」を入力して「変更を保存」をクリック。

いいね！ボタンコード取得

まずは以下からセッティングです。

Like Button – Facebook開発者 ここでコードをゲット！

どんなボタンにするかお好みでセッティング

今回デフォルト設定から変更した点をメモしておきます。

• 「Send Button」のチェックをはずしました。
• 「button_count」に変更しました。
• 「Width」は数字を削除。
• 「Show faces」のチェックをはずしました。



覧の右側にプレビューが表示されてますよ。



設定が終わったら「Get Code」します！

コードの設置開始！

「１」のソースコードをbodyタグのすぐ後に配置します

「２」はボタンを入れたいところへ！

これで完了です。あとはCSSで見た目を整えましょう。

プレビューが変わらない時は

まれに設定を変更してもプレビューが変化しないときがあります。
私の場合はFirefoxがダメでした。
ブラウザを変えたらうまくいったので、どうしてもだめなら思い切ってブラウザを変えてみてください。Chromeでうまくいきました。