現在メンテナンス中です。少々お待ちください。

Open Graph Proの設定方法とAdminID、AppIDの取得方法

Open Graph Pro、設定方法

サイトを運営するときには、
サイトとFacebookを連携させることにも注力していきたいですね。

日本ではFacebookやTwitterなどのソーシャルメディアを日常的に活用する方は多いですし、SNS上でコンタクトを取ったり、気になる人の投稿を読んでみたり、友達をつくったり、興味のある分野で人脈を広げることもできてしまいます。

あなたがサイトを運営する際にも、こういったSNS関連を大いに活用して、
できるだけ多くの個人とつながりビジネスを安定させるという考え方も非常に大切になってきます。

今回は、Facebookへあなたが記事を投稿する際にサムネイル画像や紹介文を最適化し、読者を増やすお手伝いをしてくれるプラグイン『Open Graph Pro』の設定方法を解説します。

Open Graph Proってなに?

Open Graph Proは正式には『Open Graph Protocol』といます。

あなたがサイトに記事を投稿し、その記事をSNSにシェアする際にタイムラインに表示される記事情報を最適化してくれるのが、このWordpressの『Open Graph Pro』というプラグインです。

表示の最適化”とは具体的に、
タイトル・概要・サムネイル画像などを適切なサイズ、適切な長さでタイムラインに表示してくれることです。

例えば、私が当プラグインを導入しFacebookで記事をシェアした場合、
タイムラインにはこのように表示されています。

Open Graph Pro、設定方法

四角のなかにサムネイル画像が表示され、大きな文字でタイトル、そしてその下には小さめの文字でイントロの部分が少し表示されているのが分かるかと思います。

また、記述欄にはその記事の説明や概要などを自由に記入することができます。

このように、投稿記事をFacebookやmixなどのSNSでシェアする際に、
見た人が思わずクリックしてしまうような表示に最適化してくれるのが
『Open Graph Pro』のお仕事、というわけなんですね。

これを使うのと使わないのでは大きくSNSからのアクセス流入に差がついてしまいますので、しっかりと導入&設定を施し、活用していくようにしましょう^^

Open Graph Proのインストールと有効化

それではまずは、Open Graph Proのインストールと有効化を行いましょう。

Open Graph Pro、設定方法

参考記事:WordPressにプラグインをインストールする方法

 

インストールが完了したら、
ダッシュボード設定Open Graph Pro』と進み、設定画面を開きます。

Open Graph Pro、設定方法

 

Open Graph Proの設定方法

こちらが、Open Graph Proの設定画面になります。
全て英語で複雑そうですが、設定すべき箇所は赤枠で囲った3つのみです^^

 

Open Graph Pro、設定方法

● Set Object Type to

ご自分の運営される媒体等によって選択していきます。
ここでは、Websiteを選べばOKです^^

 

その下にあります『Admin User(s)』及び『ApplicationID』は少し複雑なので、
個別で解説していきます。

 

Admin User(s)の取得方法

上の『Admin User(s)』の取得方法から解説していきたいと思います。

取得の仕方は色々とあるようですが、
ここでは一番簡単な方法のみご紹介しますね。

下記のリンク先へアクセスし、
あなたのFacebookプロフィールページのURLを貼り付けたら
<数値IDを検索>をクリックします。

FacebookのAdmin IDを確認する

Open Graph Pro、設定方法

 

すると、赤い文字で大きくあなたのFacebookのAdminIDが表示されます。

Open Graph Pro、設定方法

 

この数字をコピーしておいて、
Open Graph Pro設定画面の『Admin User(s)』の空欄に貼り付けておきましょう。

続いては、その下『ApplicationID』の取得方法を解説します。

ApplicationIDの取得方法

ApplicationIDを取得するには、Facebookアプリに登録しIDを作成する必要があります。
といってもやり方はさほど難しくありませんのでサクッとやってしまいましょう^^

まず、下のリンク先へアクセスしたら、<Register Now>をクリックします。

FacebookアプリIDを取得する

 

Open Graph Pro、設定方法

 

プライバシーポリシーに対し<はい>を選択し、<次へ>をクリック。

 

Open Graph Pro、設定方法

 

電話番号認証画面に切り替わります。

現在お使いの携帯番号を入力し<SMSで受け取る>をクリックすると、
携帯電話に確認コード番号が送信されます。

その番号を<確認コード>に打ち込んだら、<登録する>を選んでいきましょう。

Open Graph Pro、設定方法

 

これでFacebookアプリの登録が完了しましたので、<完了>をクリックします。

Open Graph Pro、設定方法

 

ここまでできたら、あと少しなので頑張りましょう!

下の空欄テキストボックスに、アプリ名を記入します。

こちらはあとで変更可能なので、
ひとまずサイト名か会社名を入力しておけば問題ないでしょう。

Open Graph Pro、設定方法

 

下のタブが出てきたら、
Facebookと連携したいサイトのカテゴリを選んで
<アプリIDを作成>ボタンをクリックしていきます。

Open Graph Pro、設定方法

 

続いて、新たに下のような画面表示になりますので
ここで一番下の<Tell us about your website>の部分に
あなたのサイトのURLをペーストし、<Next>をクリック。

 

Open Graph Pro、設定方法

 

画面下へスクロールしてみて『Finish!』と書かれていたら、無事完了です。

Open Graph Pro、設定方法

 

ここまでできたら、この画面のまま更新ボタンをクリックし
画面を最新の情報に切り替えてください。

そうしますと、
画面右上にご自分のFacebookアカウントが表示されるようになります。

このなかにある、先ほど設定したアプリ名のところをクリックします。

Open Graph Pro、設定方法

 

そうするとFacebookアプリのダッシュボード画面へ移りますので
このなかから、App IDと書かれた赤枠のなかのコードをコピーしておきます。

 

Open Graph Pro、設定方法

 

Open Graph Pro設定画面の『ApplicationID』の空欄に貼り付けます。

これで必要項目は全て埋まりましたので、
<変更を保存>を必ずクリックしておいてくださいね。

 

Open Graph Pro、設定方法

 

これで、『Open Graph Pro』の設定は全て完了になります。

一度登録した電話番号を削除する方法

気にならない方はこの章を読み飛ばしていただいて構わないですが、
先ほどAppIDを取得する際に登録された電話番号を削除する方法を一応、載せておきます。

といっても非常に簡単なのでご安心ください^^

下のリンクにアクセスし、
記載されている携帯番号の右側に<削除>というボタンがありますので
そこをクリック→<保存して続行>を選ぶだけでOKです。

Facebookに登録された電話暗号を削除する

Open Graph Pro、設定方法

 

画面を見ていただければ分かる通り、
メールアドレスなどの登録情報もこちらで管理されています。

今後、登録情報やセキュリティ面で変更を行う場合も
こちらのURLを使用してくださいね^^

 

実際にFacebookに投稿してみよう!

ここまで出来たら、
記事を投稿して実際にFacebookにシェアしてみましょう!

サイト記事をFacebookのタイムラインにシェアする方法は簡単で、
自由記述欄にシェアしたい記事のURLをペーストするだけ。

そうすると、自動でFacebookが記事情報を読み取って、
サムネイル画像、記事タイトル、本文一部を最適化して表示してくれます。

特にサムネイル画像を魅力的にしておくと
読んでくれるひとが増えていきますので心がけてみると良いですよ^^

SNSからのアクセスを増加させ、ビジネスを起動に乗せてくださいね。

まとめ

今回は、ウェブサイトとFacebookを連携させ、
タイムラインに綺麗に記事を表示してくれる『Open Graph Pro』をご紹介しました。

AdminIDやAppIDを調べるのが少し手間ではありますが、
解説通りにやっていただければ問題なくできると思いますので
ぜひ、挑戦してみてくださいね。

それでは、最後までご覧いただき、ありがとうございました^^

 

目次