【AFFINGER4】AMPページのFacebookシェアボタンがエラーになる場合の対処法とOGP設定について

WordPressテーマ「AFFINGER4」のAMPページは、デフォルト機能でソーシャルボタンが表示されるようになっています。

ここで見落としがちなのが、Facebookのシェアボタン。

実際にAMP化したページのシェアボタンをクリック（タップ）してみて、下記のようなエラーが出る場合は、管理画面にある必須項目の「App ID」が正しく入力されているかチェックしてみてください。
シェアボタンの動作確認をする端末は、パソコンでもスマホでもどちらでも大丈夫です。

App IDが未入力の場合は、Invalid App ID:0
正しいApp IDが入力されていない場合は、Invalid App ID:管理画面に入力したコード

↑このようにエラーメッセージが表示されます。

今回は、App IDの取得方法の他に、AFFINGER4のOGP設定について。重複エラーやTwitterカードが表示されない場合の対処法なども一緒にお伝えしていきたいと思います。

「fb:admins」（Admins ID）と「fb:app_id」（アプリID）の違い

WordPressダッシュボード→AFFINGER4管理→「SNS設定」の項目には、「OGP設定」（fb:admins）の入力欄と「Facebook設定」（fb:app_id）の入力欄があります。

fb:admins（Admins ID）
→個人のFacebookアカウント画面のプロフィール画像をクリックしてアドレスバーに表示される「&type」の直前の15桁の数字

fb:app_id（アプリID）
→Facebookで取得するアプリ開発用のID。AMPページのFacebookシェアボタンを機能させるための必須項目となっています。

「fb:app_id」（アプリID）の取得と設定方法

「fb:app_id」（アプリID）の取得方法は、こちらのページ内で説明しています。（内容はSTINGER PLUSのカスタマイズの記事となっていますので、アプリIDの取得方法以外の箇所はスルーしてくださいね）

取得後、コピーしたアプリIDは、WordPressダッシュボード→AFFINGER4管理→SNS設定→Facebook設定→「Facebook App ID(AMP用）」にペーストしてください。

「fb:app_id」（アプリID）を入力した場合、そちらが優先されますので、「OGP設定」の「fb:admins」（Admins ID）は、空欄にします。

ここまでで、AMPページのFacebookシェアボタンが正常に機能するようになります。

OGP設定のエラーチェックを忘れずに

テーマ側でOGP設定（AMP対応には必須）を行った場合、OGP（Open Graph Protocol）が自動的に出力されるため、プラグインとの重複エラーがないか、Twitterカードは正常に表示されるかのエラーチェックすることをおすすめします。

OGPの重複エラーがある場合

OGP設定やSEO設定に関するプラグイン「All in One SEO Pack」や「Open Graph Pro」は、AFFINGER4では不要となりますので停止します。

また、更新情報の自動投稿にプラグイン「Jetpack」の「パブリサイズ」を利用している場合、自動的にOGPが出力されるため、ファイル編集をしてプラグイン側のOGPを削除します。

Twitterカードが表示されない場合

記事文頭に画像を配置するとエラーになる現象を確認しています。
この場合は、アイキャッチ画像の位置変更のカスタマイズ後、アイキャッチ画像を利用することでエラーを回避することが可能です。

上記の対処法とエラー確認方法については、下記ページにまとめてありますので、必要に応じてご参考になさってくださいね。

以上、AFFINGER4のAMPページのFacebookシェアボタンがエラーになる場合の対処法とOGP設定についてご紹介しました。

最後までお付き合いくださりありがとうございます。