How to Embed a Pinterest Board on Your Website [Quick Tip]

Last week, I ran into a problem. I was putting together a blog post about the best non-marketing Pinterest boards to follow... but I couldn't actually get the Pinterest boards to embed in a post after I followed Pinterest's instructions. That was annoying, especially since I had completely written the text part of the post and all I needed was the embedded boards to finish it up.

In my frustration, I began to hack away with my very limited HTML knowledge to hope to find a solution that would work ... and somehow, it did! I was pumped. I gleefully wrote up instructions in an email on how to embed a Pinterest board on the blog and then sent it to my fellow bloggers.

Free Resource: 12 Pinterest Templates for Business

Their response? Take that email and turn it into a blog post -- that's what we tell our lovely blog subscribers to do when they're first getting started!

So here's me practicing what we preach, repurposing those instructional emails into blog content. And honestly, this post was a breeze to write after I already explained everything to my coworkers via email. Without any further ado, let's get to my email/blog post about embedding Pinterest boards. It's a cinch!

1) Go to Pinterest's Widget Builder and select 'Board Widget.' 

2) Paste the URL of the board you'd like to embed. Customize the size of the board as you wish under 'Advanced Options.' Then, click 'Build It!'

 

3) Two snippets of code will appear. Scroll to the bottom snippet of code, and click 'Advanced' under 'Load the JavaScript.'

4) Copy the code from this section wherever you like in your blog post or website.

Do not paste this snippet more than once! This is the code that allows all of the embeds to load on the page. 

5) Scroll up, then copy and paste the code from 'Insert the Link.'

This is the code for the specific board you want to embed.

6) Repeat step 5 for each board you want to embed. Do not repeat step 4. 

7) Center the embedded board by adding <center> and </center> around the whole HTML snippet.

Here's what the final link from step 5 should look like:

<center> <a data-pin-do="embedBoard" href="http://pinterest.com/pinterest/pin-pets/"> Follow Pinterest Pin pets on Pinterest </a> </center>

9) And that's it!

Here's what the final code of one embedded board on a page will look like:

<script type="text/javascript">(function(d){  var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');  p.type = 'text/javascript';  p.async = true;  p.src = '//assets.pinterest.com/js/pinit.js';  f.parentNode.insertBefore(p, f);}(document));</script>

1) Here's our first board example!

<center> <a data-pin-do="embedBoard" href="http://pinterest.com/pinterest/pin-pets/"> Follow Pinterest Pin pets on Pinterest </a> </center>

Here's what the final code of multiple embedded boards on a page will look like:

<script type="text/javascript">(function(d){  var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');  p.type = 'text/javascript';  p.async = true;  p.src = '//assets.pinterest.com/js/pinit.js';  f.parentNode.insertBefore(p, f);}(document));</script>

1) Here's our first board example!

<center> <a data-pin-do="embedBoard" href="http://pinterest.com/pinterest/pin-pets/"> Follow Pinterest Pin pets on Pinterest </a> </center>

2) Here's our second board example!

<center> <a data-pin-do="embedBoard" href="http://pinterest.com/pinterest/pin-pets2/"> Follow Pinterest Pin pets 2 on Pinterest </a> </center>

And here's what an embedded board look like on your website or blog:

Pretty easy, right? How will you use embedded Pinterest boards in your marketing?

Image credit: Public Domain Photos