スポンサーリンク

STINGER・AFFINGERカスタマイズ

【STINGER PLUS 】 OGP設定の「fb:admins」を「fb:app_id」に変更する方法

投稿日:2016年7月5日 更新日:



AFFINGER4 は、管理画面内の「Facebook設定(AMP用)」に「fb:app_id」の入力欄があります。入力した場合は優先して出力されますので、テーマファイルのカスタマイズは不要です。
Facebookサイトにて「fb:app_id」を取得する方法は、こちらでご紹介しています。

無料WordPressテーマ『STINGER PLUS+』は、OGP設定の入力欄にFacebookの「fb:admins」を入力するだけで、簡単にOGP設定が完了するようになっています。

それにプラスしてTwitterのユーザー名を入力することでTwitterカード導入機能もONになるので、STINGERでは必須項目ですよね。

kanamii-1986-2

「fb:admins」(Admins ID)は、個人のFacebookアカウント画面のプロフィール画像をクリックしてアドレスバーに表示される、「&type」の直前の15桁の数字です。(2016年7月現在)

ここに入力したコードは、meta情報としてヘッダーのソースに表示されますが、実はこのコードでFacebookの個人アカウントページへアクセスすることができてしまうというのが問題点・・。

まぁ。そこまでして、私に興味を持って下さる方がいるかどうかは別としてですね。(笑)

当ブログは個人とは切り分けて運営したいと考えているので、STINGERでのOGP設定に必須となる「fb:admins」を「fb:app_id」に変更することにしました。

スポンサーリンク

正しいコードを入力しないとどうなるの?

実は今まで一時しのぎに「FacebookページID」を入力していました。

STINGER側は、どんな数字を入力しても「fb:admins」として認識して、テーマ標準のOGP設定機能をONにしてくれますので、meta情報がきちんと反映されてFacebookへの投稿もTwitterカードも正常に表示されます。

しかし、OGP設定が正しく行われているかを確認するツール、Sharing Debugger -Facebook Developersで検証してみると、「そのコード間違ってるよ!APP IDも見つからないよ!」といった内容のエラーが出て怒られてしまいます。

kanamii-1986-3-2

機能上問題がなくてもFacebook推奨の設定方法が存在する以上、エラー表示を見て見ぬふりをするのはなんとなく気分の良いものじゃないですよね・・。

Facebookの「fb:app_id」(アプリID)の取得方法

「fb:app_id」(アプリID)は、Facebook用のアプリを作成する時に必要となるIDです。

といっても、応用した経験がありませんのでピンと理解できてはいないのですが、このコードを取得しておくと、今回のOGP設定だけでなくWordPressとFacebookの連携の際にも利用することができそうです。

連携に関しては追々挑戦してみることにして。。まずはアプリIDの取得方法をお伝えしていきますね。

  1. Facebookにログイン
  2. 画面左側の「アプリを管理」をクリック、もしくは、すべてのアプリ-開発者向けFacebookへアクセス(開発者登録をされていない方は登録を完了してください。)

    kanamii-1986-4
  3. 「+新しいアプリを追加」→「ウェブサイト」をクリック

    kanamii-1986-5
  4. 下記必須項目を入力後「アプリIDを作成」をクリック
    • アプリ名(サイト名)
    • 連絡先メールアドレス
    • カテゴリを選択(ページ用アプリを選択しました)
  5. 写真選択のセキュリティチェックを行って「送信」をクリック
  6. 右上の「Skip Quick Start」をクリック

    kanamii-1986-6
  7. 表示されるアプリIDをコピーします。

    kanamii-1986-7
  8. 次に、開発者モードから公開への切り替えを行います。
    左側の「アプリレビュー」をクリック→「はい」に切り替えます。

  9. 下記のように矢印部分の〇が緑色になればOKです。

2018年3月追記

現在ではアプリIDの取得方法に変更があったようです。
手順に沿ってアプリをID作成後、左側の「設定」→「ベーシック」→赤枠部分にサイトURL、カテゴリを選択(どれを選択してもよいです)

その後に左側の「アプリレビュー」をクリックして開発者モードから公開への切り替えを行ってください。

最上部の緑色のボタンが「オン」、ステータスが「ライブ」になっていることを必ず確認してくださいね。

---Facebookの「fb:app_id」(アプリID)の取得方法ここまで---

最後にWordPressダッシュボード→STINGER管理→SNS設定→OGP設定→「fb:admins」の入力欄にコピーしておいたアプリIDをペーストして完了です。

※アプリIDの追加や確認は、作成時と同じくFacebook画面左側の「アプリを管理」から行います。
この項目が表示されていない場合は、「もっと見る」をクリックしてみてください。

STINGERの「st-ogp.php」を編集

全てのテーマファイルの編集は、テーマのアップデートの影響を受けない「子テーマ」で行うことをおすすめします。
やむおえず親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて

WordPressダッシュボード→外観→テーマ→テーマの編集→「st-ogp.php」を開きます。

<!-- OGP -->の少し下にある下記赤枠部分を編集します。

kanamii-1986-8

コード内の「fb:admins」を「fb:app_id」に変更して完了です。

Facebookデバッガーで確認

Sharing Debugger -Facebook Developersにアクセス→適当なページURLをペースト→「デバッグ」をクリックして、OGP設定が正常に反映されているかを確認します。

エラーが表示される場合は、「Scrape Again」をクリックしてキャッシュをクリアしてみてくださいね。

kanamii-1986-9

エラー表示が消えて、プレビューが正常に表示されればバッチグーです。(笑)

以上、STINGER PLUS+ のOGP設定に必須となる「fb:admins」を「fb:app_id」に変更する方法のご紹介でした。

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

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

Twitter で

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

スポンサーリンク

-STINGER・AFFINGERカスタマイズ

Copyright© Kanamii , 2024 All Rights Reserved Powered by AFFINGER5.