WordPress

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


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

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

アプリIDの取得

  1. まずは以下のページから「Facebook DEVELOPERS」へ。
  2. Facebook開発者
    ここでアプリIDを取得します。要ログイン。
  3. 「新しいアプリを作成」ボタンをクリック
  4. ページの右上に表示されているボタンをクリックします。
    Like Button2

  5. アプリ名をつけます
  6. とりあえずなんでも。そして「続行」ボタンです!
    Like Button3

  7. セキュリティチェック
  8. 入力覧に入力して「送信」ボタン!
    Like Button4

  9. アプリの基本設定画面に移動
  10. ここでいろいろ設定していきます。
    Like Button5

  11. 「Website with Facebook Login」をクリック
  12. 「サイトURL」を入力して「変更を保存」をクリック。
    Like Button6

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

  1. まずは以下からセッティングです。
  2. Like Button – Facebook開発者
    ここでコードをゲット!
  3. どんなボタンにするかお好みでセッティング
  4. 今回デフォルト設定から変更した点をメモしておきます。

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

    Like Button7

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

  7. 設定が終わったら「Get Code」します!
  8. Like Button9

コードの設置開始!

  1. 「1」のソースコードをbodyタグのすぐ後に配置します
  2. 「2」はボタンを入れたいところへ!
  3. これで完了です。あとはCSSで見た目を整えましょう。

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

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

関連記事

  1. wp_changeuser.jpg

    WordPress

    普段は変更できないWordPressのユーザー名を変更する方法

    ブログのドメインを新規取得してブログを立て直したい!ってことがある…

  2. 2段組

    WordPress

    個別ページだけ2段組にしてみた。

    それほど意味はないんだけど、こういうこともできる、ということで。どう…

  3. 20120623111008

    WordPress

    Twitterボタンの導入メモ

    Twitterボタンはわりとカンタンに導入できますね。すでにブログ…

  4. 20120620194435

    WordPress

    『zenback』をWPプラグインで簡単に設定できる「EZ zenback」が便利!

    『zenback』をブログに導入する時は、コードをphpファイルに埋…

  5. WordPressの基本的な設定項目をおさらい3「表示設定」篇

    WordPress

    WordPressの基本的な設定項目をおさらい3「表示設定」篇

    WordPressの設定項目のおさらい。こういうのはすぐに忘れてしまう…

  6. 20120617121102

    WordPress

    記事でソースコードを分かりやすく表示するWPプラグイン『WP-Syntax』を導入してみた

    プログラミング系のブログならソースコードを記事内に表示したいってこと…

最近の記事

  1. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  2. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  3. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  4. 【コレクション】カードダス:SDガンダム外伝シリーズ
  5. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  6. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  7. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  8. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  9. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  10. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」

アーカイブ

  1. ios dev3

    iOS

    iPhoneApp申請方法3:iTunes Connectへの申請登録
  2. AKATSUKI HAYABUSA

    イベント

    第30回 宇宙科学講演と映画の会
  3. 「はやぶさ」式思考法

    講演会

    川口淳一郎 講演会 「はやぶさ」式思考法
  4. 日常

    「文化庁メディア芸術祭」
  5. 日常

    高級カフェランチ
PAGE TOP