Let's face it. We all know Pinterest is totally addicting. It's one of my biggest online addictions. I know it's yours too! I spend a lot of time going through pinning everything and anything that sparks my interest.
But you know what is totally frustrating? Not being able to have images to pin! Am I right? I know I am not alone here. I find a site that I am dying to do a craft project they are sharing, only to find, there is no pin button and Pinterest won't recognize it on their end through their server to pin manually. Super frustrating.
That's why it's nice to have a Pin It button somewhere in your post. And over the last year, I have seen a jump in pin buttons now on every image. This way it gives the pinner a chance to pin an image if one isn't working or if they just prefer one over another.
I jumped on the bandwagon of adding a Pin It button to my posts. And I'm going to show you just how easy it was to create an image that flows with your blog so you don't have to be stuck with the boring basic ones.
It's super easy. And if I can do it, anyone can do it. Let's get started....
I first went into Photoshop and created a document to the size I wanted my button. I knew I kind of wanted it big so that it would stand out and be noticed. However, you have the option to choose any size you would like. For this tutorial, I am going with an image that is 240x100
The next step is anything you would want as your button image. You can make it a circle, a square, just text, etc. I decided to choose more of a watercolor type brush stroke. So I grabbed that brush from my brush palette.
Next I just drew a line with my brush across my box. Easy peasy.
Then just apply the text you want. Some common ones are "Pin It" "Pin Me" "Pin This" .... or it can say anything you would like. You can even get creative and put something like "Ahh Pin It, Pin It Real Good!" :)
Now I want to just make sure I remove the white background. I usually have this on a separate layer and then just hide that. But I accidently put my brush stroke on the white background layer so for this tutorial, I just went into that layer, selected the white and deleted it out so that the background now is transparent.
Now save your image as a .PNG file so that the transparency keeps and doesn't turn back to white when uploaded to your blog.
Next, open up a photo hosting website. I personally use Photobucket because it's easy for me and I've been using it since as long as I can remember. It's free to use or you can use any other website for this type of thing as well if you prefer something else.
Once you have uploaded that image, keep the window open and go back to your blogger dashboard.
Once you have opened up your blogger Dashboard, go ahead and click on Template.
Click on Edit HTML *note- it's a good idea to back up your blog layout as a precaution in case something messes up in the coding by accident*
Once your HTML is open, click anywhere in the code and then press ctrl+F
This will bring up your "find" box. In that box, type in </body> and hit enter. It should take you to the bottom and have </body> highlighted.
Once you have located the </body> tag, you will want to copy and paste this code exactly as is right above the closing tag.
<script> //<![CDATA[ var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png"; var bs_pinButtonPos = "center"; var bs_pinPrefix = ""; var bs_pinSuffix = ""; //]]> </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script> <script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'> // This Pinterest Hover Button is brought to you by bloggersentral.com. // Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details. // Feel free to use and share, but please keep this notice intact. </script>
Tip:
The code highlighted in blue is for jQuery library. Remove this line if you’ve already loaded it somewhere else in your blog. If your "Pin It" doesn’t work, the first thing you want to do is remove this line to see if that resolves the issue.
The code highlighted in yellow is where you will be making changes to change the Pinterest button to your own button you created in the first steps of this tutorial. To do this, go back to your open page where you uploaded your image.
If you are using Photobucket, click on the image. On the right side you will see a few options. Click to copy the Direct link as shown below.
Use this copied link and go back to your HTML code we plugged in from above, and add replace the yellow highlighted image link with your new one from Photobucket. Easy right?
Now if you want to change the position of your pin button to something other than "center", you can do this in your code. I tried to highlight this for you all but for some reason, it is not showing up so I just have to show you here with a screenshot:
If you want to keep it centered, you don't need to do anything else. However, if you would like to change the position to something else, just replace the pink highlighted text with any of the following:
topleft
topright
bottomleft
bottomright
Once you have done that, you are ready to go. Click on Save Template and Violia! You should be able to open up your blog and see it live in action. It should look something like this:
So there you have it. I new custom Pin It button for your blog images. If you are interested in this, but do not want to do it yourself, I can help with the coding for a small fee. Just contact me at: rebecca.hope@xoxorebecca.com
I hope this tutorial was helpful. Let me know if you have any questions. I will gladly try to answer them as best as possible. Thanks guys!
