Facebook導入奮闘記!OGP編!

Facebookで「いいね!」ボタンが正常に表示されるようになって一安心と思いきや…
それを設置するまでに色々なサイトを見ていたら聞き慣れない言葉に遭遇しました^^;
それは「OGP」というもの@-@;
OGPはOpen Graph Protocolの単語の頭文字をとったもので、Webページに何のことが書いてあるのかをプログラム的に読めるように記述する一つの書き方のことだそうです!
このOGPはFacebookをはじめとするSNS等でよく使われる形式だそうで、これを記述することにより、例えば「いいね!」ボタンを押したとき相手のウォールなどによりわかりやすい情報を送ることができるのだとか…
これは早速導入しようといろいろと調べていくと…なかなか面倒くさいです^^;

Step 2 - Get Open Graph Tags

作り方的には昨日「いいね!」ボタンを作るときに使用した「Facebookコネクト」のページの「Step 2 - Get Open Graph Tags」を記入してタグを生成すればいいようなのですが、投稿毎にこの作業をするのは非常に大変と思い、WordPressから自動で生成できないかと考えました^^;
幸いにしてWordPressには非常に多くのプラグインがあり自動でOGPを書き出す「WP-OGP」なるものがあります^^
ですが画像が上手に指定できなかったり、あまりプラグインに頼るのも好きではないのでWordPressのテーマファイル(MTだとテンプレートに当たるかと思います)の中のオプションの関数ファイルを追加するfunctions.phpを修正して自動的にOGPがヘッダーに挿入されるようにカスタマイズしようと試みたのですが…これが大変の元でした^^;
ちなみに表示したOGPとはウェブページのhead内のmetaタグで

<meta property="og:site_name" content="サイト名" />
<meta property="og:url" content="ウェブページのURL" />(必須)
<meta property="og:title" content="ウェブページの名前(タイトル)" />(必須)
<meta property="og:image" content="ウェブページの画像(サムネイル)" />(必須)
<meta property="og:description" content="ウェブページの説明(概要?)" />
<meta property="og:type" content="ウェブページのタイプ" />(必須)

というものを記述するのですが、自動的に処理してくれるWordPressの関数を探していたら素敵なコードを書いてくださっているサイトを発見しました^^
Facebook の OGP (Open Graph Protocol)用のメタタグを出力する(DOGMAP.JP様)
こちらに書かれているコードを使用させていただきました^^
ただそのまま使おうとするとエラーが出てしまったの原因調査したところ、WordPress側のアイキャッチの画像を設定しておかなければダメなようで上記のコードと共にfunctions.phpにもう一行追加!

<?php add_theme_support('post-thumbnails'); ?>

また私のサイトの作り方が悪いのですが、アイキャッチ画像を設定していないページや関数が拾ってきた値が空の場合は何も表示されないのでその恐れのあるところに下記を追加(例はサムネイルの部分です。)

if (!empty($thumb)) {
    $out .= '<meta property="og:image" content="' . $thumb . '" />' . "n";
}else{
    $out .= '<meta property="og:image" content="空の値の時に出力する画像のパス" />' . "n";
}

正直PHPはわからないので自信がまったくないのですが上記修正をしてページのソースを見ると…

OGPのソース

head部分にちゃんと上記の記載が入っていました^^
OGPの記述の情報がちゃんと反映されているかはURLリンターで確認できます^^

URLリンター

上記では自社サイトの「GW前に富山に遊びに!後編!」を試してみたのですがちゃんと情報を受け取ってくれているようです^^

Facebookでの表示

また、試しにFacebookのリンクのところに上記ページのURLを挿入するとその情報が全て出てきました^^
結構面倒でしたがこれぐらいでOGPの設定もいいかと一安心^-^
ただ、Facebookについては全然不勉強なので突っ込みどころ満載と思いますので変なところがあったら教えてください(笑)
今回の投稿は結構長く、つまらなかった方がほとんどかと思いますが自分の備忘録としてもアップさせていただきましたことご容赦下さい^^;

Facebook導入奮闘記!OGP編!” に対して12件のコメントがあります。

  1. おはようございます

    スゴイですね(・・;)
    ほとんど分からなくて暗号のようです
    「いいね!」を押して、自分のFBウォールを確認してみました♪
    最後の画像と同じような表示になりました(^^)
    色々なことができるのですね

  2. こんにちは!

    ああ…ちんぷんかんぷんですみません…T皿T
    私は登録するところからつまづいています。苦笑

  3. 溶射屋 より:

    新潟スィーツ・ナカシマさん

    こんにちは!

    すみません、、、FBを操作するだけが精一杯でそれ以外が中々理解できません(^_^;)

    OGPと言う言葉は初めてしりました(^^ゞ

  4. たぬちゃん より:

    勉強家で~すごいです!感心な母です。

  5. Y's工房 より:

    Facebookのアカウントは持っているのですが、私とは見解が全然、違うみたいです。

  6. こんばんは。

    あまりわからなくて、笑っちゃいました。すみません。
    OGPですか、プロトコルだけなら知っています^^;
    ナカシマさん、こういうの大好きなのですね。

  7. 伯爵 より:

    おっと!
    いったなさすが!

  8. ヴィレッジ より:

    新潟スイーツ・ナカシマさん こんばんは〜♪

    シリーンバッチにもそのような機能あるのかな
    余裕ができたら挑戦してみますね♪

  9. おはようございます

    ナカシマさんは一人で対応してしまう素晴らしい技術の持ち主
    そして、多くの情報の発信
    いつも素晴らしい・素敵な対応を有難う御座います

  10. 木仙人 より:

    おはようございます ナカシマさん

    すごいなー
    探究心も素晴しいです

  11. TWINS より:

    こんばんは〜
    スゲ〜!!
    そのうちFBの講師出来るようになるんじゃあ?(^^;

  12. こんばんは。

    8割がた分りませんでした。(涙)
    勉強不足です。反省。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)