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. WordPressのログイン時のツールバー

    WordPress

    WordPressで投稿スラッグを指定して特定の記事だけを表示させる関数を作ってみた

    意外と使う機会があるのでメモがてらご紹介します。WordPressで特…

  2. WordPress

    WordPressで人用のサイトマップを作ってくれるプラグイン「PS Auto Sitemap」の使…

    WordPressで人に見せるための人用サイトマップを簡単に作成してく…

  3. WordPressでパンくずリストを設置

    WordPress

    WordPressの自動バックグラウンド更新(アップグレード)の設定について

    先日、WordPressのアップグレードがあったので後でやろう思ってい…

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

    WordPress

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

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

  5. WordPress

    WordPressの公式ロゴマークは公式サイトでダウンロードすることができる

    何気なくWordPress公式サイトを見ていたら、WordPressの…

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

    WordPress

    WordPressでアイキャッチ画像のサイズによって出力を振り分ける条件分岐のやり方

    WordPressでアイキャッチ画像をサイズ別で出力を振り分ける条件分…

コメント

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

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

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP