MTのOGP対応とかやってみた

どうやらOGPとやらが流行っているらしいので乗っかってみることにしました( ´ ▽ ` )ノ

今すぐ確認した方が良い - FacebookのOGPがきちんと設定できているか調べる方法 | Last Day. jp
OGPがきちんと設定出来てないとせっかく友達があなたの記事に「いいね!」をしてくれても友達のウォールにあなたの記事が表示されません。今日はOGPがきちんと設定されているか確認する方法を紹介します。 …

↑ 参考にしたのはこちら。

 

Wordpressだとプラグインなどがあって便利そうなのと、Movable Typeだとどうせテンプレートとか弄るんだろうなぁ…
で、面倒くさがって今まで設置していませんでした(^_^;)

まずはテンプレート生成

Like Button - Facebook開発者ページから、Open Graph Tagsでテンプレートにするタグを取得します。

<meta property="og:title" content="$MTEntryTitle$" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.ksworks.org/MTEntryPermalink" />
<meta property="og:image" content="http://www.ksworks.org/img/neko.jpg" />
<meta property="og:site_name" content="ksworks.org" />
<meta property="fb:admins" content="0123456789abcdef" />

↑ この時点では結構適当w

ここから、ちょこちょこと弄って実際に使用するコードに変更していきます。

 

og:image辺りの処理は、記事にイメージありの場合と無しの場合とで適当に分けた方が良いので…

MovableTypeにFacebookのOpen Graph protocol(OGP)を対応させる方法 [C!]
今回一番工夫したのでこの項目です。 og:imageに画像URLが入っているとFacebookのウォールにサムネイルが表示されるので、友達が見たときにリンク先の記事が自分の興味のあるものかどうか簡単に …

↑ こちらを参考に色々と弄ってみることに。

この辺りを弄って、できたのがこちら( ´ ▽ ` )ノ

<meta property="og:title" content="<$MTEntryTitle remove_html="1"$>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<$MTEntryPermalink$>" />
<MTSetVarBlock name="og_image"><mt:entrybody regex_replace='/[\S\s]*src="(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)"[\S\s]*/i',"$1$2"></MTSetVarBlock><mt:If name="og_image" like="(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)"><meta property="og:image" content="<$MTGetVar name="og_image"$>" /><mt:Else><meta property="og:image" content="http://www.ksworks.org/img/neko.jpg" /></mt:If>
<meta property="og:description" content="<$MTEntryExcerpt convert_breaks="0" words="120" $>" />
<meta property="og:site_name" content="ksworks.org" />
<meta property="fb:admins" content="0123456789abcdef" />

fb:page_idとかも付けたかったのですが、どうもエラーになってしまう様なので割愛(^_^;)

 

その辺りは追々使い方とかわかったら修正しますので、誰か教えてくださいw