Have you ever wondered how to add a Pinterest board to your blog post? Like this:
This is called a Widget. It’s a live version of your Pinterest board. I like to embed a board widget at the end of all my posts as a call to action. It’s a handy way to entice your readers to check out a board that may be closely related to the post they’ve just finished reading. Always keep them wanting more, right? 😉
Your readers can scroll through the board right on your site! They can instantly follow it or even click directly on a pin within the board that intrigues them.
To do this, I use the Pinterest Developers Widget Builder. Read on if you’d like to know step by step, how to insert a clickable Pinterest Board widget directly into your blog posts.
This post may contain affiliate links. This means if you make a purchase through one of these links, I may receive a small commission, at no extra cost to you. All opinions are my own. Read my full disclosure here.
Let me start off by saying, I have a WordPress blog. I haven’t tried this method on any other platforms but I assume the steps would be the same.
Step 1:
- Start by opening the page to the Pinterest board you’re wanting to embed into your post.
Step 2:
- Copy the URL for that Pinterest Board.
Step 3:
- In another browser tab, go to the Pinterest Developers Widget Builder and Select “Board”.
Step 4:
- Under “Pinterest Board URL”, paste the URL of the board you previously copied in Step 2. You should see something like this:
I always use the square option, but you can play around with other styles using the drop-down menus under “Size”.
Step 5:
Next, you are going to have to insert a tiny bit of code into your site. This is where most people get stuck. But stay with me! It’s really not that tricky.
- Under the preview of your board, you’ll see the provided code you need to insert into your post.
Start by going to your post and placing your cursor exactly where you’d like the board widget to appear.
Step 6:
- Toggle over to “Text” or “HTML” view on your blog.
Step 7:
- Now go back to the Pinterest Developers Page. It should look something like this:
Step 8:
- Copy the FIRST piece of code and paste it into the Text or HTML section of your blog post.
Step 9:
- Then go back and copy the SECOND piece of code and paste it right before the closing </BODY> tag. See image below if this isn’t clear (don’t stress, it wasn’t clear to me the first time I did it).
Step 10:
- Place the second piece of code EXACTLY where I’ve indicated with the arrow in the image above.
So for my board, the final code that will create the Widget should look like this:
<a data-pin-do=”embedBoard” data-pin-board-width=”400″ data-pin-scale-height=”240″ data-pin-scale-width=”80″ href=”https://www.pinterest.ca/onlinebusinesshelp/the-best-of-online-blog-business-help/”><script async defer src=”//assets.pinterest.com/js/pinit.js”>
That’s it!
Once you switch back from Text view to Visual View, your Pinterest Board Widget should be embedded into your post! NOTE: The widget will appear as a little grey box (see below), NOT a clickable Pinterest board. Don’t worry. Save and preview your post. It should appear correctly in the preview and once published.
*Bonus Tip*
I personally like my board widget to be centered. The above code will left align it. To center your widget you’ll need to add more code.
Copy this: <center> and paste it at the very beginning of the widget code.
Next, copy this: </center> and paste it at the end, between the </script> and the </a> code
Now, my code should look like this:
<center><a data-pin-do=”embedBoard” data-pin-board-width=”400″ data-pin-scale-height=”240″ data-pin-scale-width=”80″ href=”https://www.pinterest.ca/onlinebusinesshelp/the-best-of-online-blog-business-help/”><script async defer src=”//assets.pinterest.com/js/pinit.js”>
And my widget should be centered!
IF YOUR WIDGETS DON’T APPEAR:
*Sigh* I had no trouble getting my widgets to appear on desktop view using this method. But, my widgets would not show up on mobile view. Annoying! You may not have any issues. It will depend on what theme you are using.
BUT, I have a fix for you. It worked beautifully for my mobile view issues.
-Go to the dashboard of your site.
-Select Settings>Insert Headers and Footers (see below)
-In the “Scripts in Footer” section, paste this code:
<script async defer src=”//assets.pinterest.com/js/pinit.js”>
Click “Save”. This should fix any visibility issues you’re having. Please let me know if it doesn’t and I’ll do my best to help you solve the problem.
Inserting a board right into your post is a great way to intrigue your readers and hopefully, entice them to follow that board. Give it a try, like I’m about to do below 😉
For more Blogging Tips, check out my Pinterest Board below:
(P.S. This board is currently open to new contributors!)
Like This Post? Share It!
Blogging Resources I love and recommend:
SiteGround – I use SiteGround as my web hosting platform and I love it. They are trusted by the owners of over 1,900,000 domains! It’s secure, fast, reliable, and the customer service is AMAZING! I’ve had to contact them for help for a few reasons and the support I received was outstanding. Learn more about SiteGround HERE.
Tailwind – Is the Pin Scheduler of choice amongst most bloggers. I don’t know where I’d be in this business without it. In my mind, it is a NECESSITY! It’s like your blog/Pinterest assistant. And it’s a real game changer. If you haven’t already, sign up for a FREE month of Tailwind HERE.
Sendowl – Is my favourite source of affiliate income. Earn money through Sendowl 3 different ways. Refer people to their services, promote products for other bloggers, or use it to sell/run your own affiliate program and products (such as e-books). Learn more about Sendowl HERE.
ShareASale – If you are interested in monetizing your blog through affiliate marketing, ShareASale has got to be one of the easiest ways to do it! They’ve got merchants for every niche looking for affiliates to promote their products. Learn more about ShareASale HERE.
Grammarly – I saw a huge improvement in my writing after installing Grammarly. It’s the World’s leading checker of spelling, grammar, punctuation, and plagiarism. The better your writing, the more credible you will seem to you readers. Did I mention they have a FREE version? Check it out HERE.