[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

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:

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

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

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!