Tuesday, March 13, 2012

Tutorial: Adding the Pin It Button to Blog Post Pictures

My bestie has been committed to my linky party on Friday's where we choose something we have pinned, actually do it, and then share it on our blog [Pin it and Do it Friday].  Please feel free to add your link and share what you have done to the post this coming Friday.

Well, the other day she was asking me how to add the pin it button to pictures she posts on her blog and it was kind of hard explaining it so I decided to just write a tutorial on how to do it.

Here is an example of the pin it button underneath a picture from the post Housewarming Party Ideas.

When you click the Pin it button, this small window shows up and whoever is visiting your site can automatically pin the picture right to their board.  Pretty convenient right?!  I thought so to.

So here is the how to.  When you have finished writing and publishing a post, go to pinterest, hover over the About, and click the Pin it Button.  Scroll down until you reach the section titled Pin it Button for Websites.

1. Copy and paste the URL of the blog post.
2. Copy and paste the URL of the picture that is in the post [to be explained in the next step].
3. Add the description of the picture.
4.  Select how you want the count to be shown.
5. Select the advanced option.

Don't know how to get the URL of the picture?  Go to the post, right click on the picture you want to use, and select the copy link location.  Go back to the pinterest page and paste the URL [Step 2 above].

Still with me?  Okay almost done.  Now Pinterest generates the code for you so copy the entire thing and you will paste it to the HTML section of the post.

Don't know what I am talking about?  Let me show you.  Lets say I want the Pin it Button right above this picture.  I make a mental note of the last word before the picture which is HERE.  Click the HTML button that shows you those crazy HTML codes and I find that word HERE [I highlighted it].  I will then paste the pinterest code I copied right after the <br>.

Update or publish the post again and the pin it button will appear right where you put it!  In my case, right above the picture.

I know it sounds really complicated, especially if you aren't computer savvy like myself.  It took some trial and error for me to figure this out.  This is part of why I wrote out the step by step to help.  Just follow it and before you know it, it will be second nature.  It really doesn't take that long to do.

3 comments:

  1. HA too complicated for me...Auntie Marlaine

    ReplyDelete
  2. thanks a lot.. I was having some trouble until I saw this tutorial and now I've accomplished my mission...BUT, my question is.. do you have to go to all this drama for every post? isn't there a code I can leave there forever and will automatically apply to my blog posts.. like the "like" button from facebook?.. do you know about this?

    ReplyDelete
  3. i agree with little moon lover, do you know how to make it automatic? in any case, the tutorial is great! thanks!

    ReplyDelete

Please leave your email so I can repsond to your comment.