帰ってきたNucleus

Facebook用のmetaタグ(OGPタグ)を動的に作る

<%aaa%>

ブログ記事がFacebookでシェアされるよう「いいね!ボタン」を設置している方が、NucleusCMSでブログを運営してる方の中にもおられると思います。
しかし、ただ「いいね!ボタン」を設置しただけでは、「いいね!」してもらっても、「いいね!」した人のウォール上に表示されるだけらしいのです。
つまり、自分の記事をたくさんのFacebookユーザーに見てもらいたいと思って「いいね!ボタン」を設置したのに、「いいね!」した人の友達まで伝わっていない状態です。

そういった問題を解決するためには、OGPというmetaタグをブログに埋め込む必要があります。


こんな感じのやつです。このOGPタグは、ブログの正しい情報を伝えるという役割もあります。
OGPタグを設定していないと「いいね!」したときに表示される情報は自動で取得されるため、思ったような写真や文章が表示されない場合もあります。

OGPタグは種類がたくさんあるのですが、よく使う基本的なものはこのくらいでしょうか。このページの場合ならこんな感じの内容になると思います。







NucleusCMSでOGPを設定するには、内容を動的に出力する必要があります。そういうプラグインがあればいいのですが、今のところないみたいなので、スキンとテンプレートと一部のプラグインを駆使して設定していきたいと思います。
ブログ単体で運営している事を前提としますので、複数ブログを使って一つのサイトを運営している場合や「NP_MultipleCategories」を使っている場合はもう少し手間がかかってきます。

site_name

サイト(ブログ)名を設定します。


type

ページの種類を設定します。いろいろな種類がありますが、通常は記事のときは「article」とその他は「website」と設定しておけば問題ないでしょう。


title

ページのタイトルを設定します。「アイテム」「カテゴリー」「ブログ」のタイトルを設定します。


url

ページのURLを設定します。「アイテム」と「ブログ」のURLはスキン変数で設定できますが、「カテゴリー」のURLはテンプレートで設定します。

テンプレート名(og/caturl)


<%categorylink%>

「アイテム」「カテゴリー」「ブログ」のURLを設定します。


description

ページのを説明(概要)を設定します。100文字以内くらいの文章にまとめるといいと思います。

「アイテム」の文章はテンプレートを使います。「<%syndicate_description()%>」変数で本文の抜粋を設定します。

テンプレート名(og/itemdesc)


<%syndicate_description(200)%>

「カテゴリー」と「ブログ」はスキン変数で設定できます。


image

ウォールに表示されるときのサムネイル画像を設定します。記事内に画像がある場合は、一枚目の写真を表示、無い場合と「アイテム」以外の時はサイトのロゴを表示させるよう設定します。

記事内の一枚目の写真を取得するためには、「NP_ImageExtractor」というプラグインを使って、テンプレートを作ります。

テンプレート名(og/image)


<%ImageExtractor(src,,,,,,common/logo.png,yes)%>

「アイテム」のときはテンプレートを表示、その他の場合はロゴ画像の絶対パスを表示させます。


これで一通りの設定が終わりました。

まとめ

まとめると、







と、なります。けっこうめんどくさいですね。