伝えたい想いを自分らしく・・・

Kanamii

スポンサーリンク

STINGER・AFFINGERカスタマイズ

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

投稿日:2017年3月2日 更新日:

【3月10日追記】
新規で作成したFacebookの fb:App_id(アプリID)を「開発者モード」から「公開」に変更する部分の記載漏れがございました。
開発者モードのままですと、自分以外のFacebookアカウントではエラーとなってしまいますので、3月10日以前に記事を参考にしてくださった方は、こちらをご参照の上、Facebookサイトにてアプリの公開作業をお願いいたします。
ご迷惑をおかけしてしまい、申し訳ございません。

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カードが表示されない場合

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

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

OGP設定とは?OGP設定の重要性と設定方法 - ゼロからのWordPress入門【10】

Googleサイトとの連携が完了したら、次は『OGP設定』へと進みます。 OGP設定とは、テーマファイルの<head>内にOGP(Open Graph Protocol)で記述したメタ情報 ...

続きを見る

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

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

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGER・AFFINGERカスタマイズ

スポンサーリンク

Copyright© Kanamii , 2017 AllRights Reserved Powered by AFFINGER4.