【新潟スイーツ・ナカシマ】新潟県糸魚川市のおいしい和菓子、洋菓子、ケーキ、喫茶のお店

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

作り方的には昨日「いいね！」ボタンを作るときに使用した「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はわからないので自信がまったくないのですが上記修正をしてページのソースを見ると…

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

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

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

« Facebook導入奮闘記！「いいね！」ボタン編！ | 助手席から見る景色！ »