how to add a pin it button.

A few months ago, I decided it was finally time to install a "pin it" button on my blog. I searched and searched for tutorials until I found one which wasn't crazy programmer jargon. I know a bit more about HTML from my days as a 16-year-old computer geek than the average person, but I promise this isn't a difficult tutorial. BloggerSentral made it as simple as possible--click here to see more! {Note: BloggerSentral gives instructions for Blogger and Wordpress--my post just centers around Blogger!}


A few words for the wise:
-Make sure you've BACKED up your blog before you make any changes. You can do that easily in the "Template" tab {the same place you'll be making the changes in your HTML}. It is in the upper right corner of your screen, below the Google + icon.

-When you're ready to add the <script>, click within the HTML window and then press control F {or command F} to find the </body> tag in the HTML. The placement of the <script> is most important!

-If you want to prevent something on your blog from being pinned after you install this button, you'll need to click over to the HTML tab in your blog post. Don't get scared by the HTML! Scroll down until you find the <img> tag which you want to "hide" from this widget. {For those new to HTML, you can just look for text which you know is around the picture to identify it. Simply add this text before the start of the <img> tag: <div class="nopin"> and then add this after the <img> tag is complete: </div>. It will look a little something like this: <div class="nopin"><img src="long random url"></div>

CLICK HERE FOR THE FULL CODE--these partial snippets won't do you any good! If for some reason you input the code from this source and it doesn't work, try copying and pasting from here, here or here. I'm not sure of the rhyme or reason behind it, but sometimes, one site works over another. I wish I was a big enough coder to tell you why!

If you wanted to add the pin it button I have on my blog, you're more than welcome :) All I'd ask is for you to give a quick shout-out to this post once it's installed! Simply click here to copy and paste the image URL into the quotes within HTML here: bs_pinButtonURL = "PLACE URL HERE".

Was this helpful? What other little tutorials would you want me to tackle?
This is pretty high on the geek scale, but I hope it's helpful. I know many of you have the button installed, but for those of you who don't, this tutorial was the easiest one I found. I can tell you that I've had many more pins off of my blog since I installed my pin it button. It works, people! I'm not the queen of coding, but I can certainly try to answer your questions! If you have any other questions, you can email me one off. xoxo {av}

P to the S: After completing this post, I noticed my pin it button wasn't working. {Fancy that!} I had to re-install it, which was a great test in preparation for this blog post. My learning?! Having the "pin it" button readily available is absolutely essential to getting traffic from Pinterest. The number of pins had dropped drastically since the pin it button disappeared! If all else fails, simply copy and paste this code before your </body> tag for a simple and reliable "pin it" button: <script type="text/javascript" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

13 comments:

  1. I was hoping you'd post a tutorial about adding a "pin it" button! Thanks!

    ReplyDelete
  2. Yes I am so glad you posted this! I love when blogs have the pin-it button on their images. Makes it so much easier to share. I get sad when I read a blog with great pinnable content and can't share it without having to take ten steps to do it (aka I don't do it).

    ReplyDelete
  3. Thank you thank you thank you girl! I just added it to my blog (with yours for now, totes going to give you a shout out girl!), and I agree, it makes it so much easier for me to Pin things from blogs!

    ReplyDelete
  4. Thank you so much! I just added one to my blog since I rebranded! :)

    ReplyDelete
  5. i love your 16 year old computer geek past- that was SO me! it's still one of the things i'd like to learn about even more!

    ReplyDelete
  6. should have done this ages ago! thanks for walking us through it :)

    ReplyDelete
  7. Ok, here's the think about the "pin it" button... I like it, the convenience is awesome, but I hate when it pops up and blocks the picture... ain't nobody got time for that

    xx
    Here&Now

    ReplyDelete
  8. I totally bookmarked this post of yours & finally sat down to add my own "pin it" button to my blog. It was much easier than I thought it would be - thanks so much for sharing this, AV! :)

    ReplyDelete
  9. Thank you! Very easy tutorial! I was going to substitute your image, but I think I'll design my own! Would love to know how you added the transparent bar to it though!

    http://www.melindadiorio.com

    ReplyDelete
  10. Thank you so much for this great post! I tried adding a pin it button before and ended up extremely frustrated and no pin it button! This was super easy! Thank you!

    ReplyDelete
  11. Thank you so much for posting this! I have been searching for an easy way to do this! So excited I finally got it to work :)

    ReplyDelete