先日公開したばかりのサイト「大英図書館Lovers」は、人気画像ランキングを見て楽しむサイトです。より楽しんでもらうため、画像一枚一枚を、ソーシャルに共有して楽しめるように、共有ボタンを設置しています。

Pinterest（ピンタレスト）のPinボタンを設置

サイトを遊んでもらった方からの希望で、画像の共有と相性が良いPinterest（ピンタレスト）のPinボタンも設置しました。

画像をPinできるボタンを設置しました

ボタンはオリジナルにしたい

純正のボタンを使うこともできますが（Pinterestのサイト「Widget builder | Pinterest for Business」から作成できます）デザイン的にも、他のボタンと揃えたいです。というわけで、オリジナルのボタンにしました。

以下のコードで、自分の好きなようにPinボタンを作りました。

コード

<a rel="nofollow" target="_blank" href="http://www.pinterest.com/pin/create/button/?url=ページのURL&media=画像URL&description=説明文">Pin it</a>

「Pin it」の文字はお好みです。「ページのURL」「画像URL」「説明文」に入る値は、URLをエンコードしたほうがいいです。あとは、CSSなどで見た目をかっこよくしたり、画像にしたり。カスタマイズは割と自由にできますね。

動作サンプル

例えば「http://britishlibrary.rank4u.net/133417」に設置しているPinボタンのコードは、以下のような感じです。

<span id="pinit"><a rel="nofollow" target="_blank" href="http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fbritishlibrary.rank4u.net%2F133417&media=http%3A%2F%2Fbritishlibrary.rank4u.net%2Fwp-content%2Fuploads%2F2014%2F03%2F11298944224_dc8b465d91.jpg&description=Histoire+de+la+Nation+suisse">Pin it</a></span>

ボタンを押すと、別ウィンドウで以下のように開きます。必要があればBoardとdescriptionを変更して「Pin it」ボタンで完了です。

まとめ

純正のボタンを利用するのもいいんですが、デザイン的にカスタマイズしたい場合ってあります。何かのご参考となりましたら幸いです。