新テーマ「ストークSE」をリリースしました!

Facebook APP IDの取得方法【AMP用SNSボタンの表示に必要】

WordPressにAMPプラグインを導入した際、SNSボタン(Facebookシェアボタン)を機能させるためには、Facebook APP ID(アプリID)の設定が必要になります。

サイトがAMPで表示された際に、SNSボタンにアプリIDが設定されていなければ、Facobookでのシェア投稿ができずエラーが表示されます。

このようにアプリIDが無効としてエラー表示になります。

この記事では、アプリIDの取得方法を解説しますので、ストーク19でAMP用のFacebookシェアボタンを設定する際の参考にしていただければと思います。

Facebook APP ID(アプリID)を取得する方法

アプリIDを取得するには、Facebook for Developersへの登録が必要になります。今回は、Webサイトに使用するためのアプリIDを取得するものとします。

Facebook for Developersの登録には、Facebookアカウントが必要になります。

1.Facebook for Developersに登録する

(Facebookにログインして)Facebook for Developersの「スタートガイド」をクリックします。

「スタートガイド」をクリック

下記の画面で[次へ]をクリックします。

[次へ]をクリック

電話番号を入力して開発者アカウントを認証します。

携帯電話番号を入力して[認証SMSを送信]をクリック

携帯電話のSMS(メッセージ)に送られる認証コードを入力して[次へ]をクリックします。

認証コードを入力して[次へ]をクリック

メールアドレスを認証]をクリックします。

[メールアドレスを認証]をクリック

自分に当てはまる役割を選択して[登録完了]をクリックします。

役割を選択して[登録を完了]をクリック

2.アプリを作成する

Facebook for Developersに登録できたら、アプリIDを取得するためにアプリを作成します。

下記の画面(マイアプリ)で[アプリを作成]をクリックします。

[アプリを作成]をクリック

まずは、これから作成するアプリに必要な機能を選択しますが、今回はシェアボタン設定用のアプリIDの取得が目的なので「他のオプション」を選択して[次へ]をクリックします。

「他のオプション」を選択して[次へ]をクリック

アプリの表示名」に任意のアプリ名(管理上わかり易いもの)を入力して[アプリを作成]をクリックします。

「アプリ表示名」を入力して[アプリを作成]をクリック

セキュリティチェックを実行して[送信]をクリックします。

セキュリティチェックを実行して[送信]をクリック

ひとまず以上で、アプリの作成ができました。次はアプリの設定に進みます。

3.アプリの設定とアプリIDの取得

アプリと自分のサイトを紐付けるために必要な設定を行い、アプリIDを取得します。

Facebook for Developersの管理画面の【設定 > ベーシック】をクリックします。

「ベーシック」をクリック

ベーシックの画面で下記の設定を行います。

  1. プライバシーポリシーのURL」で、自分のサイトのプライバシーポリシーページのURLを入力
  2. カテゴリ」で、自分のサイトに当てはまるものを選択
「プライバシーポリシーのURL」を入力して「カテゴリ」を選択

画面下部の「プラットフォームを追加」から「ウェブサイト」を選択します。

「+プラットフォームを追加」をクリック
[ウェブサイト]を選択

すると「ウェブサイト」の設定項目が現れるので「サイトURL」に、自分のサイトのURLを入力して[変更を保存]をクリックします。

サイトのURLを入力して[変更を保存]をクリック

最後に、ページ上部の「開発中」スイッチをクリックして、ライブモードに切り替えます。

[開発中]をクリック

「ライブモードに切り替えますか?」と表示されるので[モード切り替え]をクリックします。

[モードの切り替え]をクリック

開発者モードでは、アプリを作成した本人以外のユーザーが利用できないため、この状態ではアプリIDを設定しても機能しない可能性があります。ライブモードへの切り替えは忘れないようにしましょう。

そして、ライブモードに切り替わったら、アプリIDをコピーします。

アプリIDをコピー

以上で、Facebook for Developersでの作業は完了です。

アプリIDを入力してAMP用SNSボタンを設定する

次に、取得したアプリIDをストーク19に設定して、AMP用のFacebookシェアボタンが機能するようにします。

WordPress管理画面の【外観 > カスタマイズ > SNSボタン設定】で「Facebook APP ID」にアプリIDを入力して[公開]をクリックします。

Facebook for DevelopersでコピーしたアプリIDを貼り付ける

「Facebook APP ID」は、AMPプラグインが有効化されている場合に表示される設定項目です。AMPプラグインを有効化していなければ表示されません。

これで、AMP閲覧の際にもFacebookシェアボタンが機能するようになります。

以上で、AMP用のFacebookシェアボタンの設定は完了となります。

AMPサイトでSNSボタンを表示する場合は、この設定を行うようにしましょう。

NEWモデル

STORK SE

よりコンテンツに集中させるテーマ
STORK SE(ストークSE)

STORK SEはシングルカラム(1カラム)に特化したテーマなので、より訴求力の高いページやブログ記事を作成するのに向いています。

究極のモバイルファーストテーマ
STORK19(ストーク19)

ブログを書くのが楽しくなる仕掛けや機能がたっぷり!STORK19は読む人も書く人も快適なWordPressテーマです。