Pinterestの埋め込みをJavascriptで動的に生成する

はじめに

通常の埋め込みであればこの記事に書くことは全く必要ではありません。一度ページをロードした後にPiterestのwidgetを表示しようとする場合何も表示されなかったのでその対応策です。
あまりぶつからない事案のような気はしますが、対応策を見つけるのに少々時間がかかったのでメモしておきます。
(twitterやinstagramはこのような対応はいらなかったのですが、Pinterestは必要でした。）

対応策

通常、Pinterstを埋め込むためには以下のようにします。

html

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

haml

= javascript_include_tag '//assets.pinterest.com/js/pinit.js', charset: 'utf-8'

これに以下のように　data-pin-build 属性を付与します。値が使用できるメソッド名になります。このメソッドを呼び出すことでwidgetを表示出来るようになります。メソッド名は任意のようです。

html

<script
    type="text/javascript"
    async defer
    src="//assets.pinterest.com/js/pinit.js"
    data-pin-build="parsePins"
></script>

haml

= javascript_include_tag '//assets.pinterest.com/js/pinit.js', charset: 'utf-8', 'data-pin-build': 'parsePins'

以下のように ParsePins メソッドを使えるようになりました。生成のタイミングでこのメソッドを呼び出します。idで指定した範囲で生成します。

var target = document.getElementById("#target")
window.parsePins(target);

Dynamic embedding に解決策として載っていました。

以下も同様の方法を利用しています。(これの Method one)
Dynamically Rendering AJAX Pinterest Buttons