WordPress&facebook連携設定① OGP設定方法

  • button only@2x Wordpress&facebook連携設定① OGP設定方法

wpAndFb1 Wordpress&facebook連携設定① OGP設定方法

「ブログのアクセスアップにはSNSとの連携が大事です!」
「特にfacebook重点!シェアされてバイラルでアクセス倍増!」

…と、ブログのアクセスアップについて調べていると
こんなこと書いてある記事をよく見かけるかと思います。

でも、具体的に一体どうすればいいのか?
いいねボタン付けてるだけじゃダメなのか?(←不十分です)

WordPressfacebookの連携設定について色々調べてみても、
情報が散逸してたり、情報が古かったり、
公式でも英語のドキュメントしか用意されておらず、
正直かなり複雑で分かりづらいです。私も実際だいぶ苦戦しました。

と、いうことで、このブログで、
WordPressfacebook連携するための、
個人ブログ向け必須設定の方法
なるべく初心者にも分かりやすいようにまとめておきます。

まずは第一弾、OGPの設定方法からどうぞ。

OGP とは?

OGP(Open Graph Protocol)とは、
記事をFacebookで「シェア」「いいね」したときに、
記事の要約やサムネイルを、Facebookのタイムライン上で
どのように表示するのかを記述しておくためのコードです。

OGPを正しく記述しておくと、
Facebookタイムライン上での見栄えが良くなり
Facebookからの流入率向上が期待できます。

ogpOK Wordpress&facebook連携設定① OGP設定方法

OGPを正しく設定しておくと、
Facebookタイムライン上でシェアした時に、
上記画像のように表示されます。

サムネイル画像説明文も、
記事で設定したものが正しく反映されるようになります。

しかし、OGPを設定していないと、
サムネイル画像説明文が、予期しないものになってしまうので、
Facebookシェアされても、パッと見どんなサイトなのか分かりづらく
クリックされずらくなってしまいます。

OGP設定の確認方法

OGPが正常に記述されているかどうかは、
FacebookOpen Graph Debbugerで確認できます。

デバッガの入力欄に、
ブログの任意の記事URLを入力して「デバッグ」ボタンをクリック

facebook debugger Wordpress&facebook連携設定① OGP設定方法

OGPの設定にミスがあると、
以下の画像のようなエラー警告が出ます。

ogp error  Wordpress&facebook連携設定① OGP設定方法

ogp error Wordpress&facebook連携設定① OGP設定方法

エラーは絶対に出さないように。
警告もなるべく出ないように設定しておきましょう。

警告が出ている状態でも、一応記事内容の表示はされますが、
予想通りの表示がされなかったりするので、あんまりよろしくないです。

ちなみに、WordPress初期状態ではOGPの設定はされていません。

もし警告が出ていたら、
この記事を読んで、設定を見なおしてみましょう!

個人用Facebookアカウントを作成してログイン

OGPなど、Facebook関連の設定を行うためには、
まず個人用のFacebookアカウントが必要となります。

アカウント持ってない人は、この機会に作成しておきましょう。

Facebookは実名登録や顔写真のアイコン化が推奨されていますが、
仮名でも、アイコンの設定はしなくても大丈夫です。

Facebookアカウントの詳しい取得方法は、
こちらの記事をご覧ください↓
PCからFacebookに登録する方法 – Facebook navi[フェイスブックナビ]

adminIDを取得

adminIDを取得するために、以下のURLにアクセスします。

http://graph.facebook.com/******

******の部分は、自分のユーザーネームを入力します。
ユーザーネームは、マイページURLの最後の文字列です。

私の場合、マイページURLは ( https://www.facebook.com/yasu.ceya )なので、
ユーザーネームは yasu.ceya となります。

なので、http://graph.facebook.com/yasu.ceya にアクセスすると、
私のadminIDが取得できます。

http://graph.facebook.com/****** にアクセスすると、
このようなページが表示されます↓

 adminID01 Wordpress&facebook連携設定① OGP設定方法

このページの2行目の    “id”: “***************”
という15文字の数字列が adminIDです。
この数字列をメモしておきましょう。後で使用します。

この画像(私の場合)では、
adminIDは「100005233145996」となります。

※私のadminIDも見れますが、これ使っても何のメリットもないのでやめた方がいいです。
ちゃんと自分のを使いましょう!

※facebook友達申請も歓迎してます!

アプリを作成してappIDを取得

https://developers.facebook.com/ にアクセスして、
appIDを取得するために、新しいアプリを作成します。

さらに、新しいアプリを作成する前に、
開発者登録を完了しないといけません。

「なぜアプリ作成が必要なの?」と思うかもしれませんが、
OGPの記述や、「いいね」「シェア」ボタンを正しく動作させるために、
appID (アプリケーションID) というものが必要となるからです。

「開発者登録」とか「アプリ作成」とか聞くと、
何やら難しそうなイメージを感じるかもしれないですが、
ブログと連携するだけならば、それほど難しいことはありません。

この記事の解説通りにやっていけば大丈夫!信じて!

開発者登録 ( Register as a Developer )

 app01 Wordpress&facebook連携設定① OGP設定方法

https://developers.facebook.com/ から、
上部メニューの アプリ → Register as a Developer

 

app02 Wordpress&facebook連携設定① OGP設定方法

プライバシーポリシーを承諾して 「次へ」

 

app03 Wordpress&facebook連携設定① OGP設定方法

携帯電話のメールアドレスを入力して、
Send as Textをクリックすると、
入力したメールアドレスに、確認コードが送られてきます。

それを入力して、「登録」

app03a Wordpress&facebook連携設定① OGP設定方法

You have successfuly registered as a Facebook Developer!
これで開発者登録完了です。

アプリの作成

 app04 Wordpress&facebook連携設定① OGP設定方法

(開発者登録を済ませた状態で)
上部メニューの アプリ → 新しいアプリの作成

 

app05 Wordpress&facebook連携設定① OGP設定方法

Display Name (表示名), Namespace (名前空間), カテゴリを設定します。

ここではブログの名前を入力しておくと良いでしょう。
Namespace は、他のアプリと被らないように、
アルファベットのみで指定する必要があります。

カテゴリは色々ありますが、
ここでは「ページ用アプリ」で良いでしょう。

 

app06 Wordpress&facebook連携設定① OGP設定方法

画像認証を通します。

これを完了すると、アプリの管理ページに移動します。

アプリを development mode から public mode に

作成したばかりのアプリは
development mode (開発者用モード)となっており、
このままの状態で使用すると、若干の不具合があるようです。
いいねボタン等を作ろうとするときにも注意が出ます。

なので、これを public mode (公開用モード)に変更しておきます。

app07 Wordpress&facebook連携設定① OGP設定方法

アプリ管理画面のダッシュボードです。
アプリ名の右の緑の丸にカーソルを合わせると、

Not avilable to all users because your app is not live” 
(有効化されてないから、このアプリは全てのユーザーには使えないよ)

っていう表示が出ます。

 

これを有効化するために、
まず、左側メニューの「設定」へ移動します。

app08a Wordpress&facebook連携設定① OGP設定方法

 

「設定」ページで、
「連絡先メールアドレス」を入力して、
「変更を保存」します。

これはアプリを public mode にするために必要な設定です。

ここは携帯のメールアドレスではなく、
gmailなどのフリーメールでも大丈夫です。

 

次に、左側メニューの「Status & Review」へ移動します。

app09a Wordpress&facebook連携設定① OGP設定方法

右側のスイッチをクリックして、
「いいえ」から「はい」にします。

app10 Wordpress&facebook連携設定① OGP設定方法

確認画面が出るので、「承認」

 

app09 Wordpress&facebook連携設定① OGP設定方法

これで、アプリがpublic mode になりました。
アプリ名前の右側の緑の丸が塗りつぶされているのが目印です。

 

appIDを取得

アプリ管理画面のURLの数字がappIDとなります。
これをコピーして、メモしておきましょう。

 appID Wordpress&facebook連携設定① OGP設定方法

ブログにogp記述

以下のコードをheader.phpに挿入します。
4箇所ほど、各自修正する部分がありますので注意です。

ソースコードは、以下の記事より拝借したものを少々改変しております。
 [ WP ] OGPとは? WordPressにプラグイン無しで設定する方法 | yossense

◆【1】adminIDを入力◆◆【2】appIDを入力◆
の部分には、先程取得したadminID,appIDを入力しておきます。

◆【3】画像がない記事ページ用の「デフォルト画像のURL」◆
◆【4】ホームやカテゴリページで出したい画像のURL◆
の部分には、ブログのテーマ的な画像
WordPressにアップロードして、そのURLを記述しておくと良いでしょう。

ちなみに当ブログでは、
この画像を使っています↓
  722f3f583d10cb5b435b9cc1cc38c4fa 150x150 Wordpress&facebook連携設定① OGP設定方法

コードの挿入場所は
外観テーマ編集 から、
header.php を開いて、
</head> タグを見つけたら、
その上の部分です。

挿入場所の参考画像↓

header dsc Wordpress&facebook連携設定① OGP設定方法

賢威テンプレートの場合(6.1)

keni Wordpress&facebook連携設定① OGP設定方法

賢威テンプレートを使用している場合、だいぶ楽に設定できます。
賢威いいよ賢威。まじオススメです。

WordPress編集画面の、賢威の設定 → facebook から、
appID,管理者ID(adminID),デフォルト画像など
指定するだけでOKです。

ただ、この設定だけだと少々問題があり
解決する必要があるオープングラフの警告」が出てしまうので、
外観 → テーマ編集 → facebook.php を開き、

172行目の以下のコードを無効化します。

この行の一番左に 「//」(スラッシュ2つ)を記述して、
コメントアウトして以下のようにして、
この行を無効化すると警告は出なくなります。

※この解説は賢威6.1(2014年5月時点)のものです。
最新版では異なる場合がありますのでご注意ください。

プラグインを使用する場合

WP-OGP」「Open Graph Pro」といった
OGP設定が簡単にできるプラグインもありますが、

デフォルトの状態で、デバッガ(後述)で確認すると、
解決する必要があるオープングラフの警告」が出るので、
個人的にはオススメしません。

警告が出ない「Facebook」という名称の公式プラグインもありますが、
少々面倒な設定な設定があるので、ここでは推奨はしません。

もしプラグインで設定したいのであれば、
公式の「Facebook」プラグインを使いましょう。

デバッガーでOGP設定を確認

OGPの設定がすべて完了したら、
再度、デバッガーで確認しておきましょう。

警告が出たら、この記事と設定をもう一度見なおしておきましょう。
見なおしてもダメだったら、コメントください…

 まとめ

  • OGPちゃんと記述するとFacebookからのアクセスアップが望めるよ!
  • デバッガでちゃんと確認して、警告出ないようにしよう!
  • 警告出てたら、この記事見ながら設定見なおしてみよう!

というお話でした。

ボタン設置Likebox設置なども書いたら
ものすごく長くなりそうなので、
4記事くらいに分割したいと思います。

WordPress&facebook連携設定2 いいね&シェアボタン設置方法
に続きます…

「いいね!」「フォロー」「RSS購読」で最新情報をチェック!
応援していただけるとブログ更新の励みになります。


follow us in feedly
このボタンについて
にほんブログ村 ライフスタイルブログ 自由人へ
  ↑応援ポチもよろしくです↑

“WordPress&facebook連携設定① OGP設定方法” への13件のフィードバック

  1. クロちゃん より:

    Word Press賢威6.0コーポレートでサイトを作っているものです。

    大変詳しい説明をありがとうございますm(_ _)m

    PC初心者で、恐縮な質問なのですが
    「解決する必要があるオープングラフの警告」を無効化するための//の記述なのですが
    echoの前に //echo のように記述すればよいのでしょうか?

    お忙しいとは思いますが、宜しくお願い致します。

    • せーや より:

      コメントありがとうございます。
      仰る通り「//echo ~~~」 という記述にすればOKです。
      記事の方も少し修正しておきました。

  2. クロちゃん より:

    さっそくのご回答、ありがとうございます。

    頑張ってチャレンジしてみます!

    ありがとうございます。

  3. クロちゃん より:

    せーや様
    PC初心者私でも何とか出来ました。ありがとうございましたm(_ _)m
    再度の質問なのですが・・・
    ①「//」はまだ、記述してないのですが、Open Graph Debbugerで確認しても
    エラーも警告も出ていないのですが、出ていなくても記述をした方がいいのでしょうか?

    ②賢威6.0テンプレートWord Press導入マニュアルのfacebookの設定を読みますと
    管理者IDは、匿名で運営される場合は、入力しないで下さいと書かれていますが、どうゆう意味でしょうか?私は、入力しました。

    宜しくお願いします。

  4. クロちゃん より:

    質問がしつこくて、申し訳ございません。

    1時間くらい経過後、再びオープングラフデバッガーで確認したところ
    『Errors That Must Be Fixed』が出ていたので、
    賢威のfecebook.phpに『//』を記述して再度オープングラフデバッガーで確認したところ、やはりエラーが出てしまいました。

    どこを、直せばよいのでしょうか?

    どうぞ宜しくお願い致します。

    • せーや より:

      >>エラーも警告も出ていないのですが、出ていなくても記述をした方がいいのでしょうか?

      特にエラーが出ていない場合は、コードを変更する必要はありません。
      もしかすると、賢威の最新版では修正されているかもしれません。

      >>管理者IDは、匿名で運営される場合は、入力しないで下さいと書かれています

      同じ管理者IDを複数のサイトに使っていると、その管理者IDから管理人だと分かってしまう ということです。

      たとえば、ID「12345」を 、名前を出しているサイト「aaa.com」と、匿名で運営している「bbb.net」の両方で使っていた場合、bbb.net を詳しく調べると、「bbb.netの管理人はaaa.comも管理している!」ということが分かってしまうということです。

      >> 賢威のfecebook.phpに『//』を記述して再度オープングラフデバッガーで確認したところ、やはりエラーが出てしまいました。

      おそらく、他の部分で何かしらエラーが起きているのだと思います。

      お使いの賢威のバージョンはいくつでしょうか?
      また、Errors That Must Be Fixed の下には、どのようなこ内容が書かれていましたか?

      ”Errors That Must Be Fixed” というのは 「このような修正すべきエラーがありましたよ↓」(意訳) って意味なので、エラー内容自体が分からないと修正箇所が分かりません^^;

      P.S
      コメント欄の改行が反映されていなかったので修正しました。

      • Adele より:

        O problema não é o facto de existirem decisões colectivas.Na sociedade civil (nas empresas, associações e condomínios) existe democracia respeitando os direitos naturais (e aqui parece-me que o PA tende a subestimar que sem direitos naturais não existe sequer noçao de Direito).O problema é a democracia politica, a qual não se baseia em relações civis (de propriedade como nos condominios, etc).O voto confere o direito de cada um dispor de todos os direitos dos teroriecs.´E isso é que o Liberalismo tem de combater.

      • http://www./ より:

        "The devil is God's devil". Meaning Satan is on a leash and is only allowed to commit evil and mayhem when allowed to by God. As one of His children this thought always gives me comfort- when you see evil all around you.

  5. クロちゃん より:

    せーや様
    丁寧な回答ありがとうございます。

    賢威のバージョンは6.0です。

    >> 賢威のfecebook.phpに『//』を記述して再度オープングラフデバッガーで確認したところ、やはりエラーが出てしまいました。
    の件は、賢威のfacebookの設定をよーーく見てみると、管理者IDに数字の入力ミスを発見したので訂正しました。

    再度Open Graph Debbugerで確認したところエラーと警告は、出ていませんでした。

    お手数を掛けまして、申し訳ございません。

    何か月も、分からなかったことが、解決してとても嬉しいです(^^)

    本当本当ににありがとうございました!m(_ _)m

    • Lenna より:

      Thanks, Jeff, for jumping in, both here and in class. Glad the experiment turned out to be useful for you – at least we all got to celebrate Qu;8#&nn217is birth with you that weekend! – and glad to be following you on Twitter going forward. :)

  6. maicoro より:

    こんにちは、はじめましてです。
    2日にわたりFBの画像が出ないのと戦いここにたどり着きました。あらゆる方法を試してみたと思うのですが今だサムネイル画像が直りません。”コメントください”と書かれていたのでぜひ助けていただきたいと思いコメントさせていただきました。ただ私の場合、画像
    がグレーのバックに白い人の影の画像です。半月前までは普通にキャッチアイ画像がFBに反映されていたんですが…プラグインのせいだと思い20個くらいプラグインも停止してみました。
    今はAkismet、All In One SEO Pack、Google XML Sitemaps、Press This Extended、WordPress インポートツールの5つだけです。くろちゃんの”WordPress&facebook連携設定① OGP設定方法”も最後に試してみましたが何も変わらずでした。なにか方法はありますでしょうか(T_T)?

  7. […] OGP設定について、一番わかりやすい記事; WordPress&facebook連携設定① OGP設定方法 を参考に、自分でも設定してみました。 ※殆ど上記記事をなぞっているだけで、すみません。ただし、 […]

Adele にコメントする

このページの先頭へ