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

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.

Advertisements
This entry was posted in primp my blog and tagged , . Bookmark the permalink.

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

  1. MaJo_BV says:

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

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

  3. Super helpful, thanks so much! ❤ Lauren

  4. 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.

  5. subtlekate says:

    Thank you very much.

Discuss!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s