2012/06/16

これからPinterestが伸びていくと考えて個人的に始めたのをきっかけに、当サイトにもPin Itボタンを設置しました。

通常の方法

設置方法は簡単で、PinterestのGoodiesページからPin It Button for Web Sitesコーナーに行き、設置したいページのURLと画像のURLを指定してボタンのタイプを選べばコードが生成されるので、それをHTMLに埋め込むだけです。

ちなみに以下のようなコードが生成されます。

HTML

<a href="http://pinterest.com/pin/create/button/?url=<ページのURL>&media=<画像のURL>" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>

JavaScript

<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

複数画像のあるページへの設置方法

前述の方法は画像一つ一つに対してPin Itボタンを設置するパターンでしたが、ページに一つだけボタンを設置してそのページ内の画像を選択できるようにしたい場合もあると思います。

この場合はさらに簡単で、Pinterestが提供しているPin It用ブックマークレットのコードをそのままaタグで指定するだけです。しかもどのページも同じコードでOKです。

<a href="javascript:void((function(){var e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());">
<img src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>

目的に応じて好きな方法を選べばPinterestが有効に活用できると思います。

ちなみに当サイトは後者のタイプを選んだのでページ上部のTwitterやFacebookのボタンの横にPin Itボタンを設置しました。