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を入力して無事設定されていれば、完了です。

参考サイト

リストなど複数の要素をランダムにフェードで表示していくjQueryプラグイン「champagne.js」前のページ

URLを入れるだけでレスポンシブなWebデザインを色々なデバイスで表示確認できる「The Responsinator」次のページ

最近の記事

  1. 縦置きスタンド
  2. スマトラ
  3. さくらドーナツ
PAGE TOP