This post is also available in: 英語
Contents
Pinterest(ピンタレスト)ウィジェットをサイトに表示する方法
下記のPinterest(ピンタレスト)のリンクにアクセスしてください。
http://ja.business.pinterest.com/widget-builder/#do_embed_board
次に、[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>