Facebook App ID の作成方法

  • LINEで送る

Facebook の App ID の作成

Facebook でフォローボタンや OGP の設定に必要な Facebook AppID の作成と設定方法を解説します。

アプリ ID の作成をするには、

1.Facebook にログインする。

facebook にログインします。

2.開発者アカウント

開始するには Facebook 開発者アカウントが必要です。アカウントをまだ持っていない場合は、ここで個人用 Facebook アカウントをFacebook 開発者アカウントにアップグレードします。開発者アカウントをすでに持っている場合はこのスッテプをスキップします。

以上の、設定が完了していることが前提条件となります。

ウェブのカスタム記事

Open Graph で最初の記事を公開するステップを開始する前に次を実行する必要があります。

  • Facebook アプリ ID を作成する。
  • アプリを Facebook と連携するよう設定する。
  • 静的ウェブページを作成する場所となるパブリックウェブサーバーへのアクセス権限を取得する。

この手順が完了したら、次のステップに進むことができます。

Facebook アプリを作成する

すでに、プロジェクト用として Facebook アプリ ID が取得済みであれば、それを使用します。複数のプラットホームをまたいで(iSO, Android, ウェブサイトなど)同じアプリID を使用できます。

まだ、Facebook アプリ ID がない場合、まず、ID を作成してください。

新しいアプリ ID を作成

ポップアップボックスが作成され、次の2つの項目を入力するよう指示されます。

facebook%e9%96%8b%e7%99%ba%e8%80%85-%e3%82%a2%e3%83%97%e3%83%aaid-%e9%96%8b%e7%99%ba%e8%80%85%e5%90%91%e3%81%91facebook

  • 表 示 名  : これは記事を Facebook やその他の場所に公開するときに使用されるア  プリの名前です。ここでは、open Graph Getting Stared (Open Graph スタートガイド)または、それに近い名前をつけます。
  • カ テ ゴ リ : これにより、構築するアプリの種類が決定します。ここでは[コミュニケーション]を選択します。

facebook%e9%96%8b%e7%99%ba%e8%80%85-%e3%82%a2%e3%83%97%e3%83%aaid-02-%e9%96%8b%e7%99%ba%e8%80%85%e5%90%91%e3%81%91facebook

表示名を入力後、カテゴリを選択して、「アプリIDを作成してください」ボタンをクリックします。

facebook%e9%96%8b%e7%99%ba%e8%80%85-%e3%82%bb%e3%82%ad%e3%83%a5%e3%83%aa%e3%83%86%e3%82%a3%e3%83%81%e3%82%a7%e3%83%83%e3%82%af-%e9%96%8b%e7%99%ba%e8%80%85%e5%90%91%e3%81%91facebook

すると、セキュリティチェックの画面が表示されます。チェックするべき画面をすべて選択したら、「送信」ボタンをクリックします。

webvarious-%e2%80%95-%e3%83%80%e3%83%83%e3%82%b7%e3%83%a5%e3%83%9c%e3%83%bc%e3%83%89-%e9%96%8b%e7%99%ba%e8%80%85%e5%90%91%e3%81%91facebook

アプリを作成すると「ユーザー」および「APIデータ」が掲載されたダッシュボードが表示されます。この段階で、App ID (16桁の数字列)が作成されました。この画面の左側にある[設定]をクリックします。

webvarious-%e2%80%95-%e8%a8%ad%e5%ae%9a-%e9%96%8b%e7%99%ba%e8%80%85%e5%90%91%e3%81%91facebook

  • アプリドメイン     : アプリがホストされるドメイン(http://またはhttps://プリフィックスなし)
  • 連絡先メールアドレス: 開発者の電子メールアドレス

この例は基本的なウェブページです。したがって、プラットフォームとしてのウェブを追加する必要があります。ページ下部の[プラットフォームを追加]をクリックし、「ウェブサイト」を選択します。

webvarious-%e3%83%97%e3%83%a9%e3%83%83%e3%83%88%e3%83%9b%e3%83%bc%e3%83%a0%e3%82%92%e8%bf%bd%e5%8a%a0

ウェブサイトを選択すると、「サイト URL」に URL を入力するフィールドがあります。

webvarious-%e8%a8%ad%e5%ae%9a

 

Facebook との連携

 

ウェブサイトと Facebook との連携の設定をします。 サイト URL を入力して、「クイックスタート」をクリックします。   「Quick Start for ウェブサイト」の画面が表示されます。

%e3%82%af%e3%82%a4%e3%83%83%e3%82%af%e3%82%b9%e3%82%bf%e3%83%bc%e3%83%88-website-%e9%96%8b%e7%99%ba%e8%80%85%e5%90%91%e3%81%91facebook

%e3%82%af%e3%82%a4%e3%83%83%e3%82%af%e3%82%b9%e3%82%bf%e3%83%bc%e3%83%88-sdk-%e9%96%8b%e7%99%ba%e8%80%85%e5%90%91%e3%81%91facebook

Setup the Facebook SDK for JavaScript

アプリを作成した時の、「表示名」が表示されています。そして、「Setup the Facebook SDK for JavaScript」で、この JavaScript を <body> タグの開始タグの次にコピペして挿入します。

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : ' App ID    ',
      xfbml      : true,
      version    : 'v2.7'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

%e3%82%af%e3%82%a4%e3%83%83%e3%82%af%e3%82%b9%e3%82%bf%e3%83%bc%e3%83%88-websit-url-%e9%96%8b%e7%99%ba%e8%80%85%e5%90%91%e3%81%91facebook

Tell us about your website

ウェブサイト(記入したサイトURL)を公開して周知を促すため、「Next」ボタンをクリックします。

%e3%82%af%e3%82%a4%e3%83%83%e3%82%af%e3%82%b9%e3%82%bf%e3%83%bc%e3%83%88-app-configuration-%e9%96%8b%e7%99%ba%e8%80%85%e5%90%91%e3%81%91facebook

Facebook 統合をテストします

上のHTML をウェブページの任意の場所に貼り付けて、「Like button」を設置することができます。

%e3%82%af%e3%82%a4%e3%83%83%e3%82%af%e3%82%b9%e3%82%bf%e3%83%bc%e3%83%88-finished-%e9%96%8b%e7%99%ba%e8%80%85%e5%90%91%e3%81%91facebook

そのほか、「シェア」「ログイン」「ソーシャルプラグイン」「Ads(フェイスブック広告でアプリを発達させる)」との統合することができます。以上で終了しました。

[ま と め]

以上で、 Facebook App ID の作成と Facebook とウェブサイトとの連携の設定の方法です。

「シェアボタ」ンや「フォローボタン」、「いいね!」ボタンなどの設定方法も別の機会で解説したいと思います。

 

 

  • LINEで送る

SNSでもご購読できます。