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.
{ 16 comments… read them below or add one }
this is awesome Kira! Do you know how to do this for blogger?
For Blogger, just copy and paste the code that Pinterest provides – no editing necessary!
Thanks Kira!
Hi, this was SO helpful…really appreciate it, Kira!
Super helpful, thanks so much! <3 Lauren
Failing. I’ll try again tomorrow….
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.
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.
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!
Thank you very much.
Hi Kira, I’m bookmarking this! Great info, but will you be showing how to do .org stuff too?
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
Wow, that was so so helpful! I’ve been trying to manage this for a while. Thanks!
I tried it but it shows a light border around the button
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 Avoid
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!!