1.23.2012

Tutorial: Add a “Pin It” Button to the End of Your Blog Post

Anyone else out there in love with Pinterest? If you haven’t discovered it yet, let me shout praises of its awesomeness. I won’t go into specifics here, but it is essentially an online bulletin board. You can “pin” anything from anywhere on the web to save for later, and it totally rocks. Love, love, love it. Have I mentioned that I love it?

Since I’m so in love, I tried(!) to put pin-it buttons on my blog posts so that others could share my photos on their own boards. After the most frustrating morning ever, I have decided to write my very first tutorial. I spent HOURS trying to add a (seemingly) simple button to my blog posts.  I tried, it didn’t work. I tried again, still nothing. Got the button to appear, but the link wouldn’t work. Got the link to work, but it wouldn’t post an image.

Pain. In. The. Tush.

Turns out that the process is quite straightforward – if you do it the right way (which I obviously didn’t). In an effort to save you the torture that I went through, here’s a step by step guide to what I figured out. **Disclaimer: I am NONtechnical. While this worked for me, it might not work for you (although I hope it does). I post on blogger, so I cannot comment on any other platform.**

how to add pin button to blog copy

  • Write & publish a blog post: The post needs to be published before you can add a pin-it button. You will edit it later. Make sure you include a fantastic photo to pin!
  • In a separate window in your browser, open Pinterest’s Goodies page. Scroll down until you see “Pin It Button for Websites.”
  • Go back to your blog and click on the title of your published post. Copy the URL from your browser by highlighting and hitting “Control + C” but make sure you are copying the URL for the specific blog post. Don’t copy your blog’s home page. You want the pin to point to the page with the picture on it!
  • Go back to the Goodies page and paste (Control + V) the URL into the field that reads “URL of the webpage the pin is on.”
  • Next, go back to your published blog post and right-click on the image you want to pin. Select “View Image Info.” A new box will open with the URL already highlighted. Copy it (Control + C).
  • Go back to the Goodies page and paste (Control + V) the image’s URL into the field that reads “URL of the image to be pinned.” This is where my first attempts went wrong. I kept trying to grab the URL from the blog, not from the image properties. Oops! Next, Type a quick description of your image in the “Description” box. Then highlight all of the code in the blue box and copy it (Control + C).
  • Go back to your blog and enter the editor for the already published blog post. Click “Edit HTML.” Go to the very end of the text and paste your new code (Control + V). This will place your Pin It button at the bottom of your blog post. If you prefer to see it at the top, paste the new code before the text instead.
  • Publish your post and enjoy your new button! It will even keep track of the number of people who use it to pin your image to their boards. Fun times.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...