WNT-Technology-20130319
Technology

Pin Itボタンを設置&オリジナル画像にカスタマイズしよう!

thumbnail_b_markup_130319

facebookのいいね!ボタンやtwitterのツイートボタンなど、SNS関連のボタンの設置はすっかり当たり前になりました。
そこで今回は、人気上昇中のSNS、Pinterestの提供するPin Itボタンを設置し、ボタンをオリジナル画像に変更するカスタマイズを行ないました。

※この記事は2013年3月19日時点で執筆された記事です。現在では仕様が異なる可能性があります。


Pinterestとは

img_markup_130321_01

日本でも人気が高まってきたPinterestは、画像や動画をピンボードに貼り付け(「Pin」し)、自分のお気に入りのアイテムを管理したり他の人のピンボードを見て楽しんだりするSNSです。
ボードの共有機能を利用すれば、デザインのイメージをチームで共有するツールなどとしても使用できます。


Pin It ボタンを設置する

現在Pinterestからはボタンとウィジェットが2種類ずつ提供されていますが、今回は最も一般的なPin Itボタンを設置し、ボタンをオリジナル画像に変更するカスタマイズを行ないました。
Pin It ボタンを設置すると、ユーザーがページの中の画像や指定した画像を、ユーザー自身のピンボードに簡単に投稿することができます。
それでは、実際にボタンを設置してみましょう。
まず、Pinterestのサイトのボタン生成ページへ行きます。

http://business.pinterest.com/widget-builder/#do_pin_it_button

img_markup_130321_02

今回作成するPin Itボタンがデフォルトで選択されていますので、続けて以下の項目を入力していきましょう。

【Pin Count】 ピンされた数の表示方法と対象にする画像

  • Above:Pinされた数がボタンの上に表示されます。
  • Beside:Pinされた数がボタンの右に表示されます。
  • Don’t Show:Pinされた数は表示されません。
  • One Image:指定した一つの画像がPinの対象になります。
  • Any Image:設置したページにある画像がいずれもPinの対象となります。ただし、80×80px以下の小さい画像は無視されるようです。

【URL(One Imageを選んだ場合に選択可能)】

ボタンを設置するURLを指定します。

【Image(One Imageを選んだ場合に選択可能)】

ピンボードに表示される画像を指定します。
画像の大きさは最低80×80px以上となっています。

【Description(One Imageを選んだ場合に選択可能)】

ピンボードに並んだ際に画像の下に表示される文言を指定します。

プレビューでピンボードに並んだ際の表示を確認したら「Code to Copy and Paste」の下のフォームの中のaタグをコピーし、ボタンを表示させたい場所に貼り付けましょう。

次に、「Include this〜」の下のフォームの中のscriptタグをコピーし、こちらを</body>の直前に貼り付けます。

これでPin Itボタンがページに表示されるようになりましたので、早速ページで表示を確認してみましょう。
下はPin CountにAboveを設定した場合の表示例です。

metaタグの設定なども必要ないので、設置は比較的簡単ですね。


Pin It ボタンをカスタマイズする

しかしすでに他のSNSのシェアボタンの画像をカスタマイズして設置している場合など、デフォルトのPin Itボタンを並べたくない場面もあります。
そこでデフォルトのボタンをオリジナルの画像に変更してみたいと思います。

1.HTMLを修正する

今回のカスタマイズ方法は、見えない位置でまずボタンを通常通り生成し、オリジナルボタンの画像をJavaScriptで挿入するというものです。
まず、ボタンを生成するaタグを以下のようにdivタグで囲みます。

<div id="pinItWrap">
<div id="pinIt">
<a data-pin-config="above" href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fwebnaut.jp%2F&media=http%3A%2F%2Fwebnaut.jp%2Fmarkup%2Fimg%2Fimg_markup_130321_05.jpg&description=Welcome%20to%20WebNAUT%20!" data-pin-do="buttonPin" ><img class="pinIt__button" src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
</div>
</div>

2.CSSでボタンを見えない位置に配置する

以下のようにCSSを記述します。これでボタンは見えない位置で生成されます。

div#pinItWrap {
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 580px;
}
div#pinIt .pinIt__button {
    position: absolute;
    top: -9999px;
    visibility: hidden;
}

挿入する画像に合わせて先ほど追加した<div id=”pinItWrap”>タグには画像の高さと幅を指定しておきます。

3.JavaScriptでオリジナルボタンの画像を挿入し、表示位置を変更する

$(window).on('load',function(){
 
    function getBtn(){
        pinItBtn = $("#pinIt a");
        if(pinItBtn.length >0){//ボタンが生成完了したかどうかを確認する
        createBtn();
        }else{
            setTimeout(getBtn,50);//生成されていない場合再度取得する
        }
    }
    getBtn();
 
});
 
function createBtn(){
 
    $(function(){
    var imgObj = document.createElement("img");//挿入する<img>タグを作成する
    imgObj.id = "newImg";
    imgObj.src = imgUrl;
    imgObj.style.position = "absolute";
    pinItBtn.append(imgObj);//作成した<img>タグを挿入する
    pinIt.css("top","0");
    pinIt.css("visibility","visible");//ボタンの位置を変更し、表示する
    });
 
}
 
 
var pinIt = $("#pinIt");
var pinItBtn = $("#pinIt a");
var imgUrl = "http://webnaut.jp/markup/img/img_markup_130321_04.jpg"//差し替えたい画像のURL

ボタンを表示しているaタグの内側に画像を挿入し、ボタンを見える位置まで移動させます。
これで、以下のようにボタンを差し替えることができました。

※デモはiframeで表示しているためこのページ上では正しく挙動しません。

いかがでしたか。
最後に、SNSの提供するボタンやウィジェットの仕様は頻繁に変更されます。
ボタンを生成する際は毎回ボタン生成ページからコードを取得するようにしましょう。

thumbnail_b_markup_130319

記事が気に入ったらシェアしよう

この記事を書いたメンバー

成果につながるWeb制作を

成果につながるWeb制作を
ビーワークスのミッションは「デザインで世の中を動かすこと」。
出版物、販促ツール、WEBサイト、ゲームアプリなど、多用な領域でクライアントのビジネス拡大に貢献するデザインを提供する制作会社です。

記事の更新をお知らせします!

  • 採用情報

    採用情報

    記事を読んで興味を持った方、
    ビーワークスの考え方に共感した方、
    一緒に新しいデザイン、創りませんか?

  • 制作実績

    制作実績

    日々、制作実績を更新中!
    ビーワークスの多様な実績をぜひご覧ください。

  • 牡羊座
  • 牡牛座
  • 双子座