[Solved] Getting The Pinterest Embed 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, if I want to embed a Pinterest board in one of my WordPress blog post, 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

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.

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 individual pins, too?

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

To test this, I used the Pinterest widget builder to create the embed code for this 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

Content So Good You Can Almost Taste It!

Subscribe to my email list and get updates in your inbox

Join my mailing list and get all of my social media tips, tricks, and comics in your inbox. Spam-free, guaranteed!






Speak Your Mind, Share A Comment, Ask A Question

*