facebook-app-id-app-secret_ecmg

マーケティング

サラリと終える開発者登録。FacebookのApp ID(アプリID)とApp secretの取得方法・調べ方

サイト運営をしていると、Facebookページとの連携が必要になることがあります。例えば、記事下にウツクシイ「いいね!」ボタンを設置したり・・

facebook-app-id-app-secret_01

サイドバーに「ページプラグイン」を設置したり・・

facebook-app-id-app-secret_02

またはこんなカッコ美しいオリジナルシェアボタン  を設置するために、WordPressプラグインとの連携を求められたりします。

facebook-app-id-app-secret_03

そのためには、Facebookの開発者登録をして、「Facebookアプリ」を作る必要があります。ややこしそーなイメージがありますが、サラリ、と終えることができます。腰が抜けます。

だって・・・10分程度で開発者登録をしたら、もうアプリは作られているんです。プラグインなどに必要となるApp ID(アプリID)とApp secretもその場で分かります。じゃあ早速。

実は現在、「ソーシャルプラグイン」と呼ばれている類のものは、開発者登録なしでも作れる状態なんですが・・・

facebook-app-id-app-secret_03-1

ガンガン更新されるFacebookの仕様変更やバージョン管理など、将来的な側面も考慮して、登録しておくことをおすすめします。

ちなみに、下のようなWordPressプラグインなどに必要となる「App ID・App secret」取得には、開発者登録が必須 そんな応用力もあるワケです。

便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効的な使い方

Facebookの開発者登録をする

所有するFacebookページの管理者アカウントでログインした状態で、下のリンク先の開発者向けページへ。

facebook for developers | 開発者向けFacebookページ 

facebook-app-id-app-secret_04

画面右上の「登録」ボタンを押すと、プライバシーポリシーなどへの同意を求められます。同意したら「はい」に切り替えて「次へ」ボタン。

facebook-app-id-app-secret_05-1

次の画面で電話番号を入力し、「SMSで受け取る」ボタンを押します。SMSで届いた認証コードをその下の項目に入力。最後に「登録する」ボタン。

facebook-app-id-app-secret_05-2

facebook-app-id-app-secret_05-3

次に「新しいアプリを追加」画面が現れます。今はiOSアプリなど本格的なものを作るわけではないですよね。用途どおりに「ウェブサイト」をクリックします。

facebook-app-id-app-secret_05-4

次に「アプリ名」を入力します。覚えやすい好きな名前でOK。入力後「新しいFacebookアプリIDを作成」ボタンをクリック。

facebook-app-id-app-secret_05-5

「新しいアプリIDを作成」画面が現れるので各項目を埋め、最後に「アプリIDを作成してください」をクリックします。 随分へりくだったオコトバですが、お願いしときしましょう。

facebook-app-id-app-secret_06

表示名:さっき入力したものが入っているので、そのままでOK

連絡先メールアドレス:Facebookに登録しているメールアドレス(推奨)

カテゴリ:運営サイトのテーマに合ったものを選択

その後、セキュリティチェック画面で質問に答えます。けっこう読みにくいですねぇ・・・

facebook-app-id-app-secret_07

「送信」を押してから少しタイムラグがあるので、「あれ?フリーズした?」と不安になり始めたぐらいに、画面が切り替わります。

facebook-app-id-app-secret_08

無事開発者登録ができました

最初のFacebookアプリは、もう作られている!

左カラムにある「Requ.log – test」。これが「Facebookアプリ」と呼ばれるもの。

facebook-app-id-app-secret_09

そう、一番最初に入力した名称です。つまり、もう「Facebookアプリ」はできているわけです。ではそのアプリ名の下にある「ダッシュボード」をクリック。

facebook-app-id-app-secret_10

今後いつでも戻ってこられるように、このあたりでブックマークしておきましょう

App IDとApp secretを取得する

さて・・・もう見えてますね。欲しいものが

facebook-app-id-app-secret_11

「アプリID」の数字の羅列が「App ID」です。その下にもありますね。「App secret」。でも隠されています。当然ですが、この状態のままコピーしても使えません

横にある「表示」ボタンをクリックするとFacebookページ管理者のログインパスワードが求められ、入力して初めて表示される仕組みになっています

facebook-app-id-app-secret_12

facebook-app-id-app-secret_13

はい、両方ゲットできましたオメデトーゴザイマス。

あとはWordPressプラグインなど、必要とされるところへコピーして利用するだけ。ね、あっという間です。あ・・大丈夫ですか?腰、抜けてますね。


WEBサイトとFacebookページ連携の一例

冒頭にも紹介しましたが、「開発者向けFacebookページ」では、WEBサイトといろいろなFacebookページ連携ができます。いいね!ボタンやページプラグインなど、運営サイトに有効な、便利なものを自由に作ることができます。開発者登録をするとその幅も広がります。

 記事下に設置する「いいね!ボタン」

facebook-app-id-app-secret_01

 ウィジェットなどに設置する「ページプラグイン」

facebook-app-id-app-secret_02

 カッコ美しい「オリジナルシェアボタン」

facebook-app-id-app-secret_03

 参考記事

サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセンスよく設置する方法

「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWordPressウィジェットに設置しよう

カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタマイズ

注意点

運営サイトを共同管理するような人がいない限り、「App secret」は外部に漏らさないようにしましょう。「App ID」と「App secret」は、Facebookアプリを管理する際のIDとパスワードのようなもの。

どんなシチュエーションがあるかは分かりませんが、万が一漏れてしまった場合、「App secret」を表示状態にした時に横に現れる「リセット」ボタンを押しましょう。新たな乱数が「App secret」に設定されます。

facebook-app-id-app-secret_14

その時はもちろん、プラグインなど、既に外部で使用している「App secret」の記述は更新する必要があります。

「fb:admins ID」(管理者ID)の調べ方

これも混同しがちなんですが、「App ID」と「fb:admins ID」(管理者ID)は別物です。管理者IDは、「Facebookページ管理者の個人ページ」で名前部分をクリックした時に表示されるURLの末尾で知ることができます

facebook-app-id-app-secret_15



Facebookアプリを利用していると気づくと思いますが、開発者アカウントでできる設定変更など、分かりにくい部分がヒジョーに多い。アプリごとのバージョン管理など、仕様変更もヒジョーに多い。実際とっつきにくいものです。

でも、世界中で多くの人が利用しているものです。仕様変更があっても都度情報は流れます。サイト運営者にとっては便利なものには違いありません。利用しない手はないですよね。

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  2. “知っているつもり”の拡張子、jpg gif png。画…
  3. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  4. ブログにおける「価値あるコンテンツ」とは?三大要素と”オリジナリティー”の正体
  5. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…

関連記事

  1. retina-logo_ec

    ワードプレス

    【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像…

    サイトロゴは、サイトの顔。このサイトでは最上部にロゴを配置していま…

  2. lightshot_ecmg

    WEBデザイン

    Windows?Mac?なんでもゴザレ。スクリーンショットに特化したキャプチャーツールLightSh…

    "気軽な"先輩をウマく使おう。それなりに融通のきくMacのスクリー…

  3. feedly-count-problem_ecmg

    ワードプレス

    feedlyのフォロワー数が表示されないっ!?SNS Count Cacheのキャッシュ進捗「部分的…

    怪奇現象と、ある研究者の記録。私は街はずれの湖のさらに奥にある…

  4. unveil-lazy-load_ec

    ワードプレス

    設定不要!WordPressプラグイン「Unveil Lazy Load」でページ読込スピードアップ…

    簡単装備で速度をブースト!プラグインをインストールするだけで、ペー…

  5. backup-all-in-auto_ec

    ワードプレス

    WordPressサイトを丸ごとバックアップ!「BackWPup」で丸投げタイマー設定

    一度設定したら、後はおまかせ!せっかく作った自分のWEBサイトが、…

  6. tcd-mag_ecmg
【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. tcd-theme-selection_ecmg
  2. todoist-tips_ecmg
  3. valuable-content-from-image_ec
  4. tcd-theme-user-review_ecmg
  5. todoist-extension_ecmg
  6. improvement-flow_ecmg
  7. business-books_ecmg
  8. theme-change_ecrt
  9. todoist_ec
  10. tcd-mag_ecmg

ピックアップ記事

  1. tcd-theme-widget_ecmg
  2. todoist-basic_ec
  3. restriction_ecmg
  4. media-setting_ec
  5. todoist-routine_ecrt
  6. quicktag_ecmg
  7. chrome-font_ecmg
  8. gif-animation_ec
  9. widgetoon-js-count-jsoon_ecmg
  10. jpg-gif-png_ecmg

強みを見つけて、活かしていくために。

business-books

タスク管理で、自己管理。

todoist

おすすめ記事

  1. ”ブログにおいしい”、注釈画像の作り方。矢印や枠線、文字を追…
  2. アップデートで英語化された!?BackWPupをサクッと日本…
  3. タスクを完了させたくなる!? モチベーションアップに役立つT…
  4. 「Mailboxの代わりは・・?」代替メールアプリ最有力。S…
  5. 簡単に予定変更。Todoistで実現する、カレンダーだけでは…

魅力的なブログを、今すぐ作る。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

最近の記事

  1. 【使用者レビュー】WordPress初心者にこそおすすめのブ…
  2. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  3. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  4. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  5. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…
  2. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  3. 最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くし…
  4. 【フリーランス必見】確実に納期を守るために。タスク管理ツール…
  5. 『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテ…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  2. tcd-mag_ecmg

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  3. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
  4. improvement-flow_ecmg

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  5. business-books_ecmg

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
PAGE TOP