Kanamii

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

kanamii-1986-1

スポンサーリンク

STINGERカスタマイズ

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

2016/09/04

無料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. 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」に変更する方法のご紹介でした。

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

▶STINGER PLUS+ カスタマイズ全記事一覧へ

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

Twitter で

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

-STINGERカスタマイズ