WordPress

WordPressでFacebookのOGP設定ができるプラグイン「Open Graph Pro」

Open Graph ProはWordPressでFacebookのOGPを設定できる便利なプラグインです。このOGP設定をしていないと、Facebookで「いいね」をクリックされた時にその人の友達に情報が流れないので、できることなら設定しておきたいですよね。設定に関してはプラグインを使えばそんなに難しくないので、やっておいて損はないかと思います。ということで簡単な手順をまとめてみました。

[ads_center]

Open Graph Proの使い方

まずは最初にOGP設定されているかどうか確認してみます。以下のサイトにアクセスして自分のサイトURLを入力して確認できます。

まだOGP設定していないので「解決する必要があるオープングラフの警告」に設定されていない項目が色々でてくるかと思います。それでは設定していきたいと思います。

1. Open Graph Proをインストール

まずはWordPress管理画面からプラグインの新規追加をしていきます。検索ボックスにOpen Graph Proを入力すると一番上に出てくるのでそれをインストールして有効化します。

Open Graph Proインストール

2. App IDを取得する

続いて、Facebook開発者のページにアクセスしてApp IDを取得します。

Facebook開発者ページからApp IDを取得する

3. アプリの基本設定をする

自分が入力したのは以下の2点です。

  1. App Domains
  2. Website with Facebook Login

App Domainsには自分のサイトURLから「http://」より後を入力します。Website with Facebook Loginにはチェックを入れるとサイトURLを入れるボックスが表示されるので、そこに今度は「http://」も含めたURLを入力します。

アプリの基本設定

4. WordPressのOpen Graph Proの設定をする

上記の画面はそのまま一旦置いておいて、今度はWordPressの管理画面に戻ります。設定からOpen Graph Proの画面に行きます。ここでは以下の3つを入力します。

  1. Header Image
  2. Admin User(s)
  3. Application ID

【Header Image】

Header Imageにはヘッダー画像のフルパスを入力します。こちらは記事に画像がない場合にのみ表示される画像です。ちなみに横幅が200px以上のものを指定する必要があるみたいです。

【Admin User(s)とApplication ID】

Admin User(s)は以下のURLの○○○を自分のユーザー名に変えてアクセスすると確認できます。

http://graph.facebook.com/○○○

一番上にある「id」に書かれている番号を覚えておき、Admin User(s)に入力します。

Application IDは先程のFacebook開発者ページで取得したApp IDを入力します。

Application IDを入力

こんな感じで3カ所を入力したら一番下にある「変更を保存」をクリックします。

Open Graph Proの設定

5. Facebook開発者ページに戻る

先程一旦置いておいたFacebook開発者ページに戻り、こちらも一番下にある「変更を保存」をクリックします。

Facebook開発者ページで変更を保存する

これでFacebookのOGP設定ができました。最後に一番最初にOGP設定されているか確認できるページに再度アクセスしてURLを入力して無事設定されていれば、完了です。

参考サイト

関連記事

  1. WordPress

    指定した親ページの子ページを取得してみる

    前回、「WordPressで指定した固定ページを読み込む方法」を書いた…

  2. Monsterrat

    WordPress

    ミニマルなポートフォリオに最適なWordPressテーマ「Monsterrat」

    ミニマルなデザインのポートフォリオを作りたい時に最適なWordPres…

  3. WordPress

    ローカル環境のMAMPでWordPressをマルチサイト化してみる

    素人なので半日も悩んじゃいました。ローカルでWordPressをマルチ…

  4. Daily Dish

    WordPress

    写真が映える2カラムのシンプルでスッキリしたWordPressテーマ「Daily Dish」

    Daily DishというWordPressテーマがとてもカッコよかっ…

  5. WordPressのログイン時のツールバー
  6. WordPressのログイン時のツールバー

    WordPress

    WordPressで最新記事の一覧をプラグインを使わないで表示させるやり方

    WordPressで最新記事の一覧をウィジェットやプラグインを使わない…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP