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

pinterest-boardLast 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. 

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

step_1

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

 step_2

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

step_3

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. 

step_4

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.

step_5

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

7) If you aren't on the HubSpot COS, you can skip this step. (That includes HubSpot Customers on the CMS.) This code from this step will be highlighted in orange through the rest of the post for your reference. After you paste the code from step 5 in the COS, insert '<!--pinterest-->' (without the quotation marks) between the beginning <a> tag and the closing </a>.

This is what the code should look like:

<a data-pin-do="embedBoard" href="http://pinterest.com/pinterest/pin-pets/"> <!--pinterest--> </a>

8) 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/"> <!--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/"> <!--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/"> <!--pinterest--> </a> </center>

2) Here's our second board example!

<center> <a data-pin-do="embedBoard" href="http://pinterest.com/pinterest/pin-pets2/"> <!--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

get your free guide to pinterest business accounts

subscribe to the hubspot marketing blog
This entry was posted in Communications. Bookmark the permalink.

Comments are closed.