サイトにPinterestにPin itするボタンを設置する事も多いと思います。こんな感じに↓
ボタンそのものはWidget Builder | for Business のページで作ることが出来ます。
で、貼り付けよ！と出てくるコードがこんな感じ。
<a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fblog-imgs-66-origin.fc2.com%2Fs%2Fh%2Fe%2Fsheepnine%2Fup5879.gif&media=http%3A%2F%2Fblog-imgs-66-origin.fc2.com%2Fs%2Fh%2Fe%2Fsheepnine%2Fup5879.gif&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a> <!-- Please call pinit.js only once per page --> <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
Pin itボタンをアクティブ化しているのが、<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script> このスクリプト。
コメントに**Please call pinit.js only once per page**と書かれている通り、
bodyのとじタグ前になどに1回記述すればいいだけです。
async 属性がついてるので、ボタンのアクティブ化が非同期で実行されるようになってるっぽいです。
しかしアクティブ化が実行された後にAjaxでPinボタンがあるhtmlなどを読み込んだ時問題が！
たとえばこんなHTMLをAjaxで読み込みます
<p class="pinterestBtnArea"> <a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fblog-imgs-66-origin.fc2.com%2Fs%2Fh%2Fe%2Fsheepnine%2Fup5879.gif&media=http%3A%2F%2Fblog-imgs-66-origin.fc2.com%2Fs%2Fh%2Fe%2Fsheepnine%2Fup5879.gif&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="beside">] <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /> </a> </p>
はい。Pin itボタンがアクティブ化されません。。。
読み込むHTMLに<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>を追加してもダメでした。
1回しか読み込むなって書いてあるしね...
調べていた結果、、、
Pin itボタンをアクティブ化する関数をつかえるっぽい！
参考: Ajax Pinterest Buttons | Optical Cortex
まずスクリプトにdata-pin-build属性を追加します。
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js" data-pin-build="parsePins"></script>
data-pin-buildを使うと、この属性で追加した名前がwindowに関数として追加されます。
この関数の引数にアクティブ化したいボタンを渡すことで、いつでもPin itボタンをアクティブ化することが出来るっぽい！
例えば、次のhtmlをAjaxで追加する場合
<p class="pinterestBtnArea"> <a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fblog-imgs-66-origin.fc2.com%2Fs%2Fh%2Fe%2Fsheepnine%2Fup5879.gif&media=http%3A%2F%2Fblog-imgs-66-origin.fc2.com%2Fs%2Fh%2Fe%2Fsheepnine%2Fup5879.gif&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="beside">] <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /> </a> </p>
Ajaxでhtmlを追加した後にこんな感じのスクリプトを実行すればOK
// AjaxでHTMLを追加した後に var $pinBtnParent = $(".pinterestBtnArea"); window.parsePins( $pinBtnParent[0] )
参考にしたサイトに
The function is looking for a DOM node and not a jQuery object which is an array like object; so selecting the DOM node the jQuery object wraps is needed.
とあるようにボタンそのものではなく、ボタンをラップしているDOMを渡してあげる事がポイントっぽい！
async属性について参考にしました。
・scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
