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. アイキャッチと本文画像の最初がダブっているときの対処法

    WordPress

    アイキャッチと本文画像の最初がダブっているときの対処法

    テーマによると思いますが、アイキャッチと本文の一番最初にくる画像が…

  2. WordPress

    MarsEditでアイキャッチの設定が簡単にできるWPプラグイン「Auto Post Thumbna…

    ブロガーで「MarsEdit」を使っている人は多いことでしょう。そし…

  3. FacebookのLike Boxをレスポンシブ対応させる方法

    WordPress

    FacebookのLike Boxをレスポンシブ対応させる方法

    最初、これ分からなくて困っていたのでメモしておきます。いまどきはデフ…

  4. WordPress

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

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

  5. リンク集追加

    WordPress

    リンク集追加で、3段組。

    とりあえず、3段組完了。最終的にレイアウトどうしようかな。まだ仮の状…

  6. WordPress4.1でMarkDown記法を使うように設定してみた

    WordPress

    WordPress4.1でMarkDown記法を使うように設定してみた

    今までWordPress3系を使っていました。先日新しくテーマを買った…

最近の記事

  1. ホワイトハウスコックスの財布
  2. 進撃の巨人展FINAL チラシ
  3. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  4. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  5. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  6. 【コレクション】カードダス:SDガンダム外伝シリーズ
  7. 懐かしい!!カードダスSD戦国伝!!

アーカイブ

  1. 日常

    仕事モードへ
  2. 日常

    「東方式 / 東アジア文字宇宙の知られざる法則」
  3. 日常

    空想モノ
  4. 日常

    ひとしごと
  5. 日常

    これで正式な納品
PAGE TOP