mt.Vicuna Simple テンプレートに Pinterest の Pin it ボタンを設置してみます
はじめに
すでに使っている人向けで記述してますので、HTML構造については、本家サイト(vicuna.jp)など参照してください。
参考にしているのは、 Pinterest ブログ上に設置されているコードで、旧タイプのボタンをカスタマイズしたものです。
通常は、Pin It Button for Web Sites （http://pinterest.com/about/goodies/）のフォームにサイトのURL をいれて得たコードをもとに URLのパラメータを Movable Type 用のテンプレートタグに置き換えするなどしてカスタマイズします（このページではこの方法の説明はしません）。
表題のとおりに、mt.Vicuna テンプレートでの貼付け法で、ほぼ初期の状態で設置の動作を確認したものです。カスタマイズされたものについてはこのとおりに動作しない場合もあり得ます。
設置について
ボタンをつける箇所は、ブログ記事テンプレートの タイトル下の ul .info のリストに追加するということとして説明しています。
Pin itボタンパーツ
<li class="pint">
<a class="pinit" onclick="pinitbtn(this);return false;" href="http://pinterest.com/">
<img src="http://passets-ec.pinterest.com/images/pinit_preview_none.png" width="49" height="25" alt="pin it" />
</a>
</li>
<ul class="info"></ul> 内にいれます。
Pin it をおこなう部分
前掲のコードはすでに設置されているものとして、以下のコードを</body> より前に設置
以下は、テンプレートタグを利用して直接 JavaScript コードを埋め込む場合です。
<script type="text/javascript">
//<![CDATA[
var pinitbtn = function(elm){
var desc,url,media='', image='', section;
desc = '<$mt:EntryTitle remove_html="1" encode_js="1"$>';
url = '<$mt:EntryPermalink encode_js="1"$>';
section = elm.parentNode.parentNode.parentNode.getElementsByTagName('DIV')[0]; if (section) {
image = section.getElementsByTagName('IMG')[0];
if (section.getAttribute('class','textBody') && image && image.src) {
media = image.src;
} if (desc && url && media) {
window.open( 'http://pinterest.com/pin/create/button/?url='
+ encodeURIComponent(url)
+ '&media='
+ encodeURIComponent(media)
+ '&description='
+ encodeURIComponent(desc)
, 'signin'
, 'width=665,height=300,scrollbars=1,resizable=1');
}
}
};
//]>
</script>
詳細
外部ファイルにしたいとき
タイトルなどの情報を JavaScript から取得する形にしたいときはそれぞれ url は location.href とか、rel=canonical(指定してあるとき)など、 desc はPin itしたときテキストエリアに入るテキストで、タイトルでいいときは document.title などです。
section でエントリの部分を拾ってきます。要素がカスタマイズされているとノードの取得がうまくいかないかもしれませんので適宜調整がいるでしょう。
記事に画像があるときとないときがあるような場合、記事中の画像の有無でふり分けて出力といった方法が考えられます。
Pinterest ブログのほうでは、ボタン設置の a要素の内容は空として、背景画像にボタンの画像をあてているようです。