WordPressにAMPプラグインを導入した際、SNSボタン(Facebookシェアボタン)を機能させるためには、Facebook APP ID(アプリID)の設定が必要になります。
サイトがAMPで表示された際に、SNSボタンにアプリIDが設定されていなければ、Facobookでのシェア投稿ができずエラーが表示されます。
![](https://open-cage.com/wp-content/uploads/2021/02/bd0a3db92dcb5dbe585270ae9e84c29f-1.png)
この記事では、アプリ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の「スタートガイド」をクリックします。
![](https://open-cage.com/wp-content/uploads/2021/02/a8c2681f05dce9a2ca41bd350dca2ea4-1024x604.png)
下記の画面で[次へ]をクリックします。
![](https://open-cage.com/wp-content/uploads/2021/02/ab6c4dd45594813fd5a510e795614edd-1024x604.png)
電話番号を入力して開発者アカウントを認証します。
![](https://open-cage.com/wp-content/uploads/2021/02/2e448e46cb402827806fd1959aa5e51c-1024x604.png)
携帯電話のSMS(メッセージ)に送られる認証コードを入力して[次へ]をクリックします。
![](https://open-cage.com/wp-content/uploads/2021/02/d6c22d4520fffb4951cfb2f86c5df0b4-1024x604.png)
[メールアドレスを認証]をクリックします。
![](https://open-cage.com/wp-content/uploads/2021/02/ea45ee3c201a08859de596e175e0f60f-1024x604.png)
自分に当てはまる役割を選択して[登録完了]をクリックします。
![](https://open-cage.com/wp-content/uploads/2021/02/59a073f2ae3f8e4391f1d223d1c5cb6e-1024x604.png)
2.アプリを作成する
Facebook for Developersに登録できたら、アプリIDを取得するためにアプリを作成します。
下記の画面(マイアプリ)で[アプリを作成]をクリックします。
![](https://open-cage.com/wp-content/uploads/2021/02/0c0d1f5d2695b067128a8903c0a5eae4-1024x604.png)
まずは、これから作成するアプリに必要な機能を選択しますが、今回はシェアボタン設定用のアプリIDの取得が目的なので「他のオプション」を選択して[次へ]をクリックします。
![](https://open-cage.com/wp-content/uploads/2021/02/eaf991ca38d9b4ef9ebdb1a27c9d5cbb-1024x604.png)
「アプリの表示名」に任意のアプリ名(管理上わかり易いもの)を入力して[アプリを作成]をクリックします。
![](https://open-cage.com/wp-content/uploads/2021/02/d14ff1157fb1a716554f85d412d071f1-1024x604.png)
セキュリティチェックを実行して[送信]をクリックします。
![](https://open-cage.com/wp-content/uploads/2021/02/2a4dc636f132eb76ca7e2d01bcce4730-1024x604.png)
ひとまず以上で、アプリの作成ができました。次はアプリの設定に進みます。
3.アプリの設定とアプリIDの取得
アプリと自分のサイトを紐付けるために必要な設定を行い、アプリIDを取得します。
Facebook for Developersの管理画面の【設定 > ベーシック】をクリックします。
![](https://open-cage.com/wp-content/uploads/2021/02/f95129bceed35c8f7dab519fcaa00554-1024x604.png)
ベーシックの画面で下記の設定を行います。
- 「プライバシーポリシーのURL」で、自分のサイトのプライバシーポリシーページのURLを入力
- 「カテゴリ」で、自分のサイトに当てはまるものを選択
![](https://open-cage.com/wp-content/uploads/2021/02/908fb846333b65e25b61f7301a7e62c6-1024x604.png)
画面下部の「プラットフォームを追加」から「ウェブサイト」を選択します。
![](https://open-cage.com/wp-content/uploads/2021/02/6392cfa1f400941eff3ecd862bfca963-1024x604.png)
![](https://open-cage.com/wp-content/uploads/2021/02/02ddafae4326dc78e36b16c39e0f2615-1024x604.png)
すると「ウェブサイト」の設定項目が現れるので「サイトURL」に、自分のサイトのURLを入力して[変更を保存]をクリックします。
![](https://open-cage.com/wp-content/uploads/2021/02/16311e134f510a4aca647f8981043f5d-1024x604.png)
最後に、ページ上部の「開発中」スイッチをクリックして、ライブモードに切り替えます。
![](https://open-cage.com/wp-content/uploads/2021/02/f7d753982337d2b52c24ef5a3f60e023-1024x604.png)
「ライブモードに切り替えますか?」と表示されるので[モード切り替え]をクリックします。
![](https://open-cage.com/wp-content/uploads/2021/02/636b808df93f4f7d7a446cfad4c221c0-1024x604.png)
開発者モードでは、アプリを作成した本人以外のユーザーが利用できないため、この状態ではアプリIDを設定しても機能しない可能性があります。ライブモードへの切り替えは忘れないようにしましょう。
そして、ライブモードに切り替わったら、アプリIDをコピーします。
![](https://open-cage.com/wp-content/uploads/2021/02/af31cacc004c61eed173ba23d6a3e243-1024x604.png)
以上で、Facebook for Developersでの作業は完了です。
アプリIDを入力してAMP用SNSボタンを設定する
次に、取得したアプリIDをストーク19に設定して、AMP用のFacebookシェアボタンが機能するようにします。
WordPress管理画面の【外観 > カスタマイズ > SNSボタン設定】で「Facebook APP ID」にアプリIDを入力して[公開]をクリックします。
![](https://open-cage.com/wp-content/uploads/2021/02/a472f323a1ff3d76f96a0003dd549fa9-1024x747.png)
「Facebook APP ID」は、AMPプラグインが有効化されている場合に表示される設定項目です。AMPプラグインを有効化していなければ表示されません。
これで、AMP閲覧の際にもFacebookシェアボタンが機能するようになります。
![](https://open-cage.com/wp-content/uploads/2021/02/d60ae440c3eb78199f17d759b8ecfffa.png)
以上で、AMP用のFacebookシェアボタンの設定は完了となります。
AMPサイトでSNSボタンを表示する場合は、この設定を行うようにしましょう。