Primp My Blog: How to Add a Pin It Button to a WordPress.com Blog

by Kira @ Her New Leaf on February 22, 2012

Edit: Thanks to Pinterest for editing their Pin It button code widget! The code no longer utilizes Javascript, so it is now possible for WordPress.com users to simply copy and paste the code directly into the HTML tab section when editing a post. Feel free to leave any questions you may have in the comments section below!

Heya, primpers! Let me start off by saying that this tutorial is a bit long-winded and slightly complicated. I’m going to try to clarify things as much as possible, feel free to comment if you have questions. Just be aware that this should be considered a moderate- to advanced-difficulty tutorial before we jump in! Please note that this tutorial applies to WordPress.com blogs only, not for self-hosted WordPress.org blogs.

If you read my post last week on the pros and cons of blogging on WordPress.com, you learned that one of the major drawbacks of blogging on WordPress.com is that the platform does not allow the use of Javascript. If you’re like me, you have no idea what that even is! I have learned that Javascript is a coding language that allows bloggers and developers to use certain tools, often known as “widgets.” There are a lot of other uses for Javascript as well, but like I said, that is WAY over my head into the land of coding.

One popular use of Javascript in blogging lately has been the addition of the “Pin It” button for Pinterest. Pinterest has a cute little built-in way to generate a button for your blog or website, but if you’ve ever tried to add it to your WordPress.com blog, you figured out pretty quickly that it wouldn’t work, because it functions by using Javascript.

It took some finagling and experimentation, but I finally figured out a way to add a “Pin It” button to individual blog posts, and I’m going to share with you how to do it. Unfortunately, there is no way to automatically add a button to all of your posts at this time. But this manual work-around will get the job done.

1. Save this button image to your hard drive and upload it to your Media Library. (It will not have that black border around it when you use it, I just added that to make it easier to grab.) I did not create, nor do I own this button image. It is from Pinterest.com, I converted it from a Javascript object to an image.

2. Go to the Pinterest Goodies page and scroll to “‘Pin It’ Button for Websites.” Fill out the form to include the URL of your post, the URL of your most “pinnable” image, and a suggested caption (your users will have the opportunity to change this).

3. Make sure the radio button next to “Basic” is selected and copy the code that has been generated in the box.

4. From your WordPress dashboard, go to the post where you want to place your button. Click on the HTML tab.

5. Paste your code where you want to place your button. Click “Save Draft” (do not yet click “Publish” or “Schedule”).

6. After your page refreshes, you will notice your code has changed slightly because WordPress has removed the Javascript. Find the words “Pin It,” and replace them with the image tag for your button (you should remember this from my post How to Add Social Media Buttons to Your Sidebar!).

<img src="IMAGE URL">

7. Save your draft again, and publish or schedule it because you are done!

For tips on how to get started on Pinterest, check out my Pinterest 101 post.

{ 17 comments… read them below or add one }

MaJo_BV February 23, 2012 at 5:46 am

this is awesome Kira! Do you know how to do this for blogger?

Reply

Kira @ hernewleaf February 23, 2012 at 8:44 am

For Blogger, just copy and paste the code that Pinterest provides – no editing necessary!

Reply

MaJo_BV February 23, 2012 at 9:16 am

Thanks Kira!

Reply

Khushboo Thadani March 16, 2012 at 5:37 am

Hi, this was SO helpful…really appreciate it, Kira!

Reply

eyeblinkfashion March 29, 2012 at 1:33 pm

Super helpful, thanks so much! <3 Lauren

Reply

Barrysentials, The He Said She Said Wine blog April 20, 2012 at 7:12 pm

Failing. I’ll try again tomorrow….

Reply

aspiringimagesbyrachel April 24, 2012 at 12:34 pm

This was awesome. I don’t know if it is because I am using chrome – but the steps were even easier. I didn’t have to do the “refresh” and remove “Pin It” and replace with image src = image url . I was able to just copy/paste straight from Pinterest goodies and voila. I am so happy you shared this though – I had NO CLUE otherwise.

Reply

Kira @ Her New Leaf April 24, 2012 at 5:06 pm

Thanks for reminding me I need to update this, Rachel – I wrote this post a few months ago but Pinterest has since adjusted their code so that it no longer includes Javascript, so you’re right, it will work straight from Pinterest. Good news for us Wordpress.com users! Bad news for Kira and her outdated tutorial, lol.

Reply

aspiringimagesbyrachel April 25, 2012 at 5:42 am

It’s good news no matter what! Your tutorials was still very very much appreciated. Also, I really enjoyed your Primp My Blog series. Thanks for that too!

Reply

subtlekate April 25, 2012 at 1:57 am

Thank you very much.

Reply

Doreen June 28, 2012 at 2:20 pm

Hi Kira, I’m bookmarking this! Great info, but will you be showing how to do .org stuff too?

Reply

Ana July 26, 2012 at 9:00 pm

Hello!! I´m having a couple of troubles installing my pin it button, I already put it in my last post but when I click it it displays error, please help you are the only one that answers this easy

Reply

Lauren February 16, 2013 at 10:35 pm

Wow, that was so so helpful! I’ve been trying to manage this for a while. Thanks!

Reply

Amna April 12, 2013 at 11:05 am

I tried it but it shows a light border around the button :(

Reply

Guy Cook May 2, 2013 at 5:11 am

That works, I was expecting to see it right away, so when I didn’t I pushed the button again, as in maybe I didn’t push hard enough :) Works as promised, but the appearance on the Pinterest board isn’t instant. Thanks for taking the time. On blogroll day, Monday, I’m planning to add your blog as a resource.
Guy Cook recently posted..Infographic Submission Sites – The Good, Mediocre and Ones To AvoidMy Profile

Reply

Gianna May 10, 2013 at 9:19 am

I would like to ask about blogger and the code that pinterest give us but i have no idea where to paste the code…If you know and you can help me i ll be apreciate!!

Reply

Daisy Jordan June 13, 2013 at 7:40 pm

This was so helpful!! I got it to work right away. Thank you so much!!!
Daisy Jordan recently posted..the crazy thing about postcardsMy Profile

Reply

Leave a Comment

CommentLuv badge

Previous post:

Next post: