How to Display Pinterest widget your Website, and Note If it does not Work

Published on:
Last updated:

Sponsored Links

This post is also available in: Japanese

How to Display Pinterest widget your Website

web_en_pinterest

web_en_pinterest



First, visit the Pinterest’s link below.
http://business.pinterest.com/widget-builder/#do_embed_board

Then, copy and paste to [Pinterest Board URL:] the URL of the board to be displayed on the site . Other, you can also customize the display in [Custom Sizes:].

If you click on the [Build It!], code is generated at the bottom of the preview display.Paste the code to where you want to display of the site .

By the way, CSS code for approach to center the widget is like the following.

<div style="text-align:center;">
Insert the code generated by pinterest.
</div>

Note if Pinterest widget does not work

In my case, I was inserted into the static page of wordpress, but the image was not displayed correctly.
That problem was resolved by modifying the code a bit. I think that problem occured from the speed-related plugin(WP-Minify).

I have to modify the URL part of [async src=”http://assets.pinterest.com/js/pinit.js”].

The original code

<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>

The modified code

<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>

About
Kuniyoshi Takemoto is the founder of Amelt.net LLC, and editor of this blog(www.amelt.net).Learn more and connect with me on Google+,LinkedIn(English).


Sponsored Links