Make your blog look better by embedding Pinterest content directly on your site. This Pinterest for WordPress tutorial shows you how to add buttons, pins, boards and profiles to your website. Plus you’ll learn some potential pitfalls of putting Pinterest in your post or page.
You can embed Pinterest content virtually anywhere on a WordPress site, either in a widget area of your theme or on a page or post. This works with any WordPress theme, and you don’t need any plugin. That in itself is a blessing because an overabundance of plugins frequently causes speed issues.
Let’s get started with something easy so you can incorporate this tactic into your Pinterest marketing plan.
How to Embed a Pinterest Follow Button
Unlike typical social media button that sends a visitor to your respective social media profile, this follow button encourages website visitors to follow you Pinterest account.
Follow these steps to create a button to embed in your WordPress Blog:
- Get the URL of your Pinterest account and copy it to the clipboard.
- Go to https://developers.pinterest.com/tools/widget-builder/ where you will build your button.
- Select the button you want to make. In this case the Follow button.
- Paste in your Pinterest user URL in the corresponding field.
- Enter the name you want to appear on the button. You will see the preview window change every time you make modifications.
- Copy both lines of code to the clipboard.
- In the WordPress dashboard, modify the appearance of your theme by selecting a text widget and dragging it to the sidebar.
- Paste in the two lines of code that you previously copied to the clipboard. Save and you’re done!
How to Embed a Pinterest Board
Now that you know how to embed a Pinterest follow button, you can use those same skills to integrate a Pinterest board on your WordPress blog.
Here are the steps you need to take:
- Copy the URL of the Pinterest board you want to the clipboard.
- Go to https://developers.pinterest.com/tools/widget-builder/ where you will build your widget.
- Select the “Board” widget.
- Paste in your Pinterest board URL in the corresponding field.
- Select the size of your widget from the drop down menu. There are three presets: square, sidebar, header, plus you have the option of creating your own size. Pinterest boards are most often embedded in the sidebar, so try that option first because it’s narrow and skinny. Check the preview window to verify that the width and height are appropriate.
- Copy both lines of code to the clipboard. (If you’ve already embedded a Pinterest follow button from the previous section, only copy the first line of code)
- In the WordPress dashboard, modify the appearance of your theme by selecting a text widget and dragging it to the sidebar.
- Paste in the two lines of code that you previously copied to the clipboard. Now save it!
If you’re not happy with the size, then change those values in the code. If you prefer to have the board centered in the column, use HTML center tags like this:
How to Embed a Pinterest Profile
The procedure for embedding a Pinterest profile into your WordPress blog is nearly identical to that of embedding a board. The only differences are that you need to select the “profile option” in Pinterest widget builder, and you need to supply the URL of a profile. The code that gets generated is slightly different from that of a Pinterest board widget.
How to Embed a Pin in WordPress
Before learning to embed a pin in a WordPress page or post, there’s a problem of which you should be aware. Read this carefully to avoid the hours of frustration that I went through while writing a post that uses embedded Pinterest objects. Understand that what I’ve observed also applies to any Pinterest object, not just pins, that you embed in a WordPress page or post.
So let’s run through the problem step by step.
Here’s the Pinterest embed code that I’ve pasted into my post.
Let’s preview this to make sure it works.
Look at that thing of beauty. It’s perfect! Or is it really? Let me switch to visual mode to continue writing this post.
Hey! What happened to my code? Well, let’s not panic. Maybe it just doesn’t display in visual mode. Let’s flip back to text mode again and have a look.
What? It’s gone!
Yes, that’s right. I’ve tested this every which way. No matter what you do, you will lose your embed code the minute you switch from text mode to visual mode.
So here’s the key takeaway.
“If you embed a Pinterest object in a WordPress post or page, never switch back to visual editing mode, or the embed code will be lost.”
It’s also a good idea to keep a record of the embed data somewhere else, just in case the unthinkable happens.
If you insist on embedding Pinterest objects in your WordPress post, instead of taking a screenshot, then this is what you need to do.
Find your favorite pin and click on the three dots and select embed pin from the drop-down menu.
A new tab opens in your browser with the Pinterest Widget Builder already filled in with the appropriate information. You can change the size and hide the description if you wish.
Copy the generated code to the clipboard and paste it into your post while in text mode. Never again will you be able to edit this post in visual mode.
One last thing to note. If you’ve placed a Pinterest widget (built with Pinterest’s Widget Builder) in a sidebar or header, then you don’t need to include the second line of code when embedding a pin in your post.
Also, if you insert multiple pins in a post, that second line of code only needs to appear once.
Because your Pinterest widget is in a sidebar, that javascript code (common to all widget built with the Pinterest Widget Builder) gets loaded once with every post and page that is visited.
In the end, I found it easy to use Pinterest’s Widget Builder. The disappointment came from the issues I’ve had with WordPress.
Have you ever embedded Pinterest objects in your posts? What was the experience like?