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

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

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

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. The problem is that 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 easer? Be sure to share it in a comment.

Cheers!

–Sean

Speak Your Mind

*