Skip to Content

[Solved] Getting The Pinterest Embed Board Or Embed Pin Feature To Work In WordPress

NOTE: If you are looking to find a solution for embedding individual pins, as well as full Pinterest boards, read on. While the original post was focused on embedding full pin boards, I also added a section at the bottom of the post focusing on embedding individual pins.

Sometimes stuff just doesn’t work like it should. For instance, I was wondering how to embed a Pinterest board in one of my WordPress blog post, and after reading through the guides from Pinterest, I though I should be able to do the following:

  1. Navigate to the Pinterest widget builder for sharing boards
  2. Enter the URL of the board I want to embed
  3. Choose the size of board I want to embed
  4. Copy and paste the embed code into my blog post
  5. Publish the post
  6. View the post with the Pinterest board properly embedded

Embedding A Pinterest Board In Your WordPress Blog Post Is Not As Easy As It Should Be
Embedding A Pinterest Board In Your WordPress Blog Post Is Not As Easy As It Should Be

Please note: Some of the links in my posts are affiliate links. I get commissions for purchases made through those links. As an Amazon Associate I earn from qualifying purchases when you buy something from those links.

It shouldn’t be rocket science figuring out how to add Pinterest to WordPress, but unfortunately, things seldom go the way you want them to.

While Pinterest has done a great job putting together the widget builder, the steps above just don’t work. Instead, when you switch from the Text view of the WordPress editor to the Visual view, the editor deletes the embed code.

Then, when you try to view the post, there is a big white space where the embedded Pinterest pin should be, making it clear that Pinterest is not loading like it should.

Unfortunately, contacting Pinterest support and asking them why it doesn’t work isn’t really an easy option, either.

So…I turned to Google to see if I could find a reason why my Pinterest Widget wasn’t working in WordPress.

  • Pinterest board widget broken in WordPress – Nope.
  • Embed Pinterest widget in WordPress – A few articles, but they just show the steps that Pinterest shows and doesn’t address the fact that the widget doesn’t show up.
  • Pinterest widget doesn’t display on my WordPress post – Again, no information about why the spot in my post where the widget is embedded is blank.
  • Why is the Pinterest widget a blank white space on my WordPress blog? – Nada!

So, I started dissecting the Pinterest embed code to see if I could figure out what was going on.

The problem is, when you save the post with the embed code in it, WordPress thinks you entered an empty <a> tag, so it tries to help you out and deletes the entire block of embed code that you just entered.

GRRRRRR!

There is a solution, however. And the good news is it takes just one additional step and your Pinterest embed codes will work every time. Here are the steps, note the new instructions in step 5.

  1. Navigate to the Pinterest widget builder for sharing boards
  2. Enter the URL of the board I want to embed
  3. Choose the size of board I want to embed
  4. Copy and paste the embed code into my blog post. Note that for my social media comics board, Pinterest gives me the following code to embed:
    Embed code provided by Pinterest for adding my social media comics pinboard to a WordPress post
  5. The problem with this code is that between the <a> and the </a> tags, WordPress doesn’t detect any information that is visible to the user, so it thinks it’s malformed code and simply deletes it. To avoid that, in the code view add a pipe symbol before the final </a> tag. The image below shows the exact same code, but with a | right before the </a> tag.Embed code provided by Pinterest for adding my social media comics pinboard to a WordPress post WITH a Pipe Character
    This extra little pipe character fools WordPress into thinking that there is something visible to show the user and keeps the text editor from deleting the embed code.
  6. Publish the post
  7. View the post with the Pinterest board properly embedded

If you performed the steps properly, you’ll see a Pinboard that looks just like the one below:

|

NOTE: If you followed all the steps above and you still don’t see your Pinboard, then you probably haven’t added the extra code snippet that Pinterest requires to add embeds to your posts. Take a look at the widget builder and add the necessary code to the head section of your blog.

There you have it! Quick steps to successfully embedding a Pinterest board in your WordPresss blog. I hope that saves you some time and hassle.

Have a tip or trick for making this process even easier? Be sure to share it in a comment.

Cheers!

–Sean


Update: Does this fix work for embedding individual Pinterest pins into WordPress, as well?

I was asked on Facebook to determine whether this same fix would also work for an individual pin, rather than a full Pinterest board. The question was this:

Thanks for the how-to on embedding a Pinterests board into a WordPress post, but how do you embed a single Pinterest pin? I don’t want to show the whole board but just one pin. Is there a way to do that?

To test this, I used the Pinterest widget builder to create the embed code for this individual pin:

https://www.pinterest.com/pin/216454325825513651/

The code that the widget builder spit out looks like this:

This is the code that the Pinterest widget builder created for my individual pin

With my fix above, the corrected code looks like this:

This is the code that the Pinterest widget builder created for my individual pin AND has my fix

So, let’s give it a try. If the individual pin shows up right below this line, then the fix works.

|

There you have it! The fix works for individual pins, as well 🙂

Cheers!

–Sean


Share This Post With A Pin!

Getting the Pinterest Widget Builder To Work In WordPress

Joerg

Sunday 10th of May 2020

Hi Sean, do you by the way know whether and how I can switch of the display of the Stats in the embedded PIN, e.g. by a code add-on to the code coming from Pinterest widget. I have seen embedded PINS without STats, but when inspecting those websites, they look very complicated and seem not to use today's PIN embed widget code. Regards, Joerg

Joerg

Sunday 10th of May 2020

Hi Sean, it also works if you surround the copied code with a and tag. Joerg

Patrick Reid

Saturday 18th of April 2020

This is just what I needed. Thank you for figuring this out for us!

Laura

Friday 11th of October 2019

Thank you so much for posting this! It was exactly what I needed to know in order to get my pins working on my site.

Saskia

Saturday 5th of October 2019

Wow, thank you Sean. You just saved me a lot of time and frustration!

Saskia

Saturday 5th of October 2019

Hm, it worked once, then it stopped to work again when I checked... I excluded the page from caching and, yes, I do have the pinit.js-snippet in my header.php... :-(