This post is also available in: 英語

Pinterest(ピンタレスト)ウィジェットをサイトに表示する方法

web_pinterest_widget

次に、[Pinterest ボード URL(Pinterest Board URL:)]にサイトに表示させたいボードのURLをコピーして貼り付けてください。
そして画像の幅(Image Width:)、ボートの高さ(Board Height:)、ボードの幅(Board Width)などのウィジェットの設定をお好みで指定します。

その後[テストしてみる]をクリックすると、ウィジェットの表示プレビューの下の方にコードが生成されていると思いますので、そのコードをそのままサイトの表示したい場所に貼り付けてください。

ちなみに、ウィジェットを中央寄せするCSSは以下のようなコードです。

<div style="text-align:center;">
<!-- この部分の代わりにpinterestで生成されたウィジェットコードを挿入する。 -->
</div>

Pinterestウィジェットが表示されない場合の解決方法

僕の場合、wordpressの固定ページに貼り付けたのですが、画像が正常に表示されませんでした。
おそらく、高速化関連のプラグイン(WP-Minify)あたりが原因だと思われたので、コードを少しいじることで解決しました。

修正内容は[async src="//assets.pinterest.com/js/pinit.js"]のURL部分を、省略せずに[async src="https://assets.pinterest.com/js/pinit.js"]と書き直しています。

元のウィジェットコード

<a data-pin-do="embedBoard" href="http://jp.pinterest.com/pinterest/kuniyoshi/" data-pin-scale-width="80" data-pin-scale-height="320" data-pin-board-width="400"></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

書き直したウィジェットコード

<a data-pin-do="embedBoard" href="http://jp.pinterest.com/pinterest/kuniyoshi/" data-pin-scale-width="80" data-pin-scale-height="320" data-pin-board-width="400"></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="http://assets.pinterest.com/js/pinit.js"></script>