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>
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>
I was hoping you'd post a tutorial about adding a "pin it" button! Thanks!
ReplyDeleteYes 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).
ReplyDeleteThank 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!
ReplyDeleteThank you so much! I just added one to my blog since I rebranded! :)
ReplyDeletei 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!
ReplyDeleteshould have done this ages ago! thanks for walking us through it :)
ReplyDeleteOk, 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
ReplyDeletexx
Here&Now
love this! thank you for the tips :)
ReplyDeletexo, K
www.BKCsquared.com
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! :)
ReplyDeleteThank 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!
ReplyDeletehttp://www.melindadiorio.com
Just did it! Thank you!! :)
ReplyDeleteThank 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!
ReplyDeleteThank 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 :)
ReplyDeleteHello Every One Out Here
ReplyDeleteI'm from United States North Bergen(US). I read some testimony about Dr. Iyaryi on how he has helped people in bringing back there ex within 48 hours i was just thinking if that was real,And decided to call a lady who made a testimony and also dropped her number,So i called her and ask her about Dr. Iyaryi she said Dr. Iyaryi is a trustworthy man and he his ready to bring back my lover for me,i was just so happy and a little bit relief that my lover will be back to me soon,Then i decided in contacting Dr. Iyaryi which i did,And before i could share him my problem he has already told me what i came for,And he said everything will be okay within 48 hours that my lover will be back to my arms,So he said he would be casting the spell and that within 48 hours my lover would call me,So i hoped so truly before the 48 hours i got a call from a man who has left me for the past 6 years saying he is sorry and he wants me back,i was happy and i said i also want him back,Then i traveled to Canada to meet him up,And he apologized for what he has done to me now he proposed to marry me and we are both preparing for our wedding soon,All thanks to the great and World best spell caster, Dr. Iyaryi His private mail driayaryi2012@hotmail.com you can also add Dr. Iyaryi on whatsApp +2349057915709