【WordPress】Facebook OGP 設定手順メモ


Facebook
/ Franco Bouly

え? OGPって何?

OGPとは、「外部サイトをまるでFacebookページのように見せかけれるhtml記述のルール」です。

via: <遂に公開>SEOの2倍のアクセスを稼ぐFacebook活用術。皆が知らない「いいね!」ボタンと「OGP」の設定方法、超解説:ガイアックスソーシャルメディア ラボ/Facebook・twitterの企業利用法についての研究機関

ここでは「外部サイト」というのは自分のブログだったり、会社のウェブサイトなどを指しています。
自分のブログや会社のウェブサイトをFacebookに「見せかける」と何がいいのか、というと、Facebook経由でのアクセス流入が増える、ということです。

 ▼OGPを設定したほうが良い3つの理由
 理由1.「いいね!」を押した情報が友達に飛ぶ(設定しないと飛ばない!)
 理由2.ニュースフィードでの表示内容を指定できる。
 理由3.「いいね!」を押してくれたユーザーにアップデート情報を送れる。

via: <遂に公開>SEOの2倍のアクセスを稼ぐFacebook活用術。皆が知らない「いいね!」ボタンと「OGP」の設定方法、超解説:ガイアックスソーシャルメディア ラボ/Facebook・twitterの企業利用法についての研究機関

理由2と3はオマケみたいなもんです。
理由1だけのためにOGPを設定しておく、と言っても過言ではありません。

ここでは、プラグインを使わずにテーマファイルにコードを書きこむ方法をシェアします。
というわけで、以下手順メモ。

手順(0)

下記のブログを参考に、「アプリID」を取得します。

★どや!?SEOの2倍のアクセスを稼ぐFacebook活用術!ワードプレス向け「」の設定方法 | デザインどや!?
http://www.doya-doya.com/word-press/2011/05/11/6323

★備忘録:WordPressにFacebookのOGPを設定する(プラグイン無し) | ryodesignblog
http://ryodesign.net/blog/7050

★SEOの2倍アクセスを稼ぐFacebook活用術 「いいね!」ボタンと「OGP」の設定方法を超解説 – ガジェット通信
http://getnews.jp/archives/123658

アプリIDを取得する際に、個人認証が必要な場合があります。
というか初めてアプリ登録する場合は必ず認証が必要になるはずです。

こんなメッセージが出ると思います。

この操作を実行するには、アカウントの認証を完了する必要があります。mobile phoneまたはcredit cardを追加してアカウント認証を行ってください。

ここで「mobile phone」をクリックすると携帯メアドを入力する欄が出るので、記入して送信すると、あなたの携帯にメールが届きます。
そのメールに従って認証しましょう。

手順(1)

header.phpのhtmlタグに以下の属性を追加

1
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

手順(2)

以下のコードを同じくheader.phpのheadタグ内に記述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!-- ↓Facebook OGP -->
<?php
    global $post;     // 記事情報を取得
    setup_postdata($post);

if ( is_single()) {   //single.phpのとき
    ?>
    <meta property="og:title" content="<?php the_title(); ?/>" />
    <meta property="
og:type" content="blog" />
    <meta property="
og:url" content="<?php the_permalink() ?/>" />
    <meta property="
og:description" content='<?php the_excerpt_rss(); ?/>' />
    <meta property="
og:site_name" content="<?php bloginfo('name'); ?/>" />
    <meta property="
og:image" content="<?php echo get_post_meta($post-/>ID, thumbnail_url, true); ?>" />
    <meta property="fb:app_id" content="[アプリID]" />
     
<?php }else{   //single.php以外
    ?>
    <meta property="og:title" content="<?php bloginfo('name'); ?/>" />
    <meta property="
og:type" content="blog" />
    <meta property="
og:url" content="[ブログのURL]" />
    <meta property="
og:site_name" content="[ブログの名前]" />
    <meta property="
og:description" content="[ブログの説明]" />
    <meta property="
og:image" content="<?php bloginfo('template_url'); ?/>/image/logo_fbogp.jpg" />
    <meta property="
fb:app_id" content="[アプリID]" />
<?php } ?>

<!-- ↑Facebook OGP -->

手順(3)

URLリンターを使ってみて、エラーが出ないかチェック

★URLリンター – Facebook開発者
http://developers.facebook.com/tools/lint

問題があれば「ご注意」だとか何らかのエラーっぽい表示が出るので、がんばって解決しましょう。
たいていは「○○という項目が見つかりません」的なメッセージ(英語)が出るので、それらをきちんと記入してやれば良いでしょう。

=====

と、普通にやれば普通に反映されるはずなのですが、何故かうまく反映されない、という事態に遭遇しました。
URLリンターでチェックして、問題ないのに、ブログではイイねボタンが機能しなかったり、逆にリンターでエラーが出ているのに、イイねボタンが機能したり。

いろいろと調べまくっても、まったく原因がわからず、他の用事をすませて、あらためて取り掛かると治っていたり・・・・。

これがFacebookの仕様か・・・・と思うほどでした。

これには各サーバ会社なども苦慮しているようですね・・・。

【一部サーバー】facebook「いいね!」ボタンが正常に動作しない | JUGEMお知らせブログ
http://info.jugem.jp/?eid=16799

でぃべろっぱーってへてむる: Facebookのいいねボタンで日本語URLが使えない罠
http://devml.blogspot.com/2011/03/facebookurl.html

Gantenna ≫ Blog Archive ≫ Facebookの「いいね」ボタンの不具合?【続報アリ】
http://ganzo.bloggle.jp/technology/facebook%E3%81%AE%E3%80%8C%E3%81%84%E3%81%84%E3%81%AD%E3%80%8D%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%B8%8D%E5%85%B7%E5%90%88%EF%BC%9F/

WordPressにFacebookの「いいね!」ボタンを設置する方法~さくらインターネット編
http://smilegroove.net/blog/2011/06/11/facebooktolike/

とりあえず、Facebookでもフォローしておいてください。
http://www.facebook.com/yuya.shibata
http://www.facebook.com/pages/glad-design-blog-20/186887791355787?sk=wall

と言いつつ、個人的にはFacebookから徐々にフェイドアウトしてGoogle+へ軸足が移りつつあります・・・・。
よろしければフォローください。
http://gplus.to/gladdesign


Facebookブランディング
Facebookブランディング

posted with amazlet at 11.07.14
株式会社ループス・コミュニケーションズ 深谷 歩
翔泳社
売り上げランキング: 1684
フェイスブック facebook 完全活用術 世界中で5億人が利用するSNS
佐々木和宏
アスキー・メディアワークス
売り上げランキング: 9023
facebookデザインブック
facebookデザインブック

posted with amazlet at 11.07.14
早乙女拓人 清水豊 杉浦哲也 吉岡豊
MdN
売り上げランキング: 861
Copy the code below to your web site.
x 

Powered by

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. […] を繰り返していますが、やはり上手くいきません・・・と、そんな時、「glad design blog – Crazy One -::【WordPress】Facebook OGP 設定手順メモ」という投稿記事を見つけました。それによれば、以下の通りです。 […]

%d人のブロガーが「いいね」をつけました。