どうやらOGPとやらが流行っているらしいので乗っかってみることにしました( ´ ▽ ` )ﾉ
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" />
↑ この時点では結構適当ｗ
ここから、ちょこちょこと弄って実際に使用するコードに変更していきます。
og:image辺りの処理は、記事にイメージありの場合と無しの場合とで適当に分けた方が良いので…
今回一番工夫したのでこの項目です。 og:imageに画像URLが入っているとFacebookのウォールにサムネイルが表示されるので、友達が見たときにリンク先の記事が自分の興味のあるものかどうか簡単に …
↑ こちらを参考に色々と弄ってみることに。
- MTEntryTitle, MTEntryPermalinkは元々弄るつもりの仮設定だったので変更
- og:image関連は上記の記事を参考に…画像が無い場合のイメージパス以外全部ぱｋ
- og:descriptionも同様に追加
この辺りを弄って、できたのがこちら( ´ ▽ ` )ﾉ
<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とかも付けたかったのですが、どうもエラーになってしまう様なので割愛(^_^;)
その辺りは追々使い方とかわかったら修正しますので、誰か教えてくださいｗ