Printfriendly


Pinterest Pin It Button for Images on Blogger

We all know social media is an important if not crucial aspect of blogging and as Pinterest is on the rise as a popular source of social media what better way to enhance your blog than to add a Pin It button to your images. It works by hovering over the image where a Pin It button will appear and you can pin the image straight to your Pinterest account.

This makes it easier for you and your readers to pin your blog images to Pinterest which hopefully will direct more traffic to your blog. To see these buttons in action your can view them on my personal blog Allure by Maddison, as I have not implemented Pin It buttons for this design blog.

I'd like to thank the people at Bloggersentral as I found my code and realised it was originally from them. Now, lets get started.

Firstly you will need an icon to use as your Pin It button - you will find a range of different buttons by doing a few simple Google searches - if you need help locating some I'm happy to lend a hand. Or you can make your own.

Once you have your chosen icon saved to your computer you will need to upload it to a photo-sharing website - for this tutorial I have gone with Photobucket (free to use).

Now log into Blogger. Click Template on the left side and click the Edit HTML button.














Hold the Ctrl and buttons simultaneously to open the Search box. In the Search box type </body> and press Enter. This will locate the </body> text found near the end of your html code and highlight it as shown below.

















You will copy the code for your Pin It button and paste it directly above the highlighted </body> text as shown below. I have highlighted the code in blue so you can easily understand where I have pasted it.




The code you will need to copy is below:


<script>
//<![CDATA[
var bs_pinButtonURL = "DIRECT URL OF IMAGE";
var bs_pinButtonPos = "POSITION OF BUTTON";
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 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>


DIRECT URL OF IMAGE When you uploaded your Pin It button image to Photobucket click on the individual icon and you will be taken to a page that looks like this. Where it says Direct - click on that code and paste it where I have written DIRECT URL OF IMAGE.



POSITION OF BUTTON This is where you want the Pin It button to appear when your image is hovered over. There are five positions, so choose one of the following and paste it where I have written POSITION OF BUTTON.


center
topleft
topright
bottomleft
bottomright


The text in pink - var bs_pinPrefix = ""; var bs_pinSuffix = ""; allows you to add a prefix/suffix to the pin description by adding your desired text inside the "" marks. For example, I may write: var bs_pinPrefix = "Allure by Maddison";. This however is optional and I personally have not included to add this to my html code.

When you have completed the code you can click Preview template to see your Pin It button in action. Once you're happy click Save template. You will have now a Pinterest Pin It button for your images on your blog!

All the tricky html coding is over and now is just an extra bit of information. You can block the Pin It button from appearing on certain images if you wish. For example if you created a signature for your blog posts I presume you don't want your button appearing if the reader hovers over your signature. Thus, this is what you have to do.

When you create a new post on Blogger you will be taken to your usual Post page. Click on the HTML button in the top left.
















You will be taken to the html version of your blog post where you will find the code for images contained in that post. At the beginning of every image code will be <img as shown below.




After <img you will add class="nopin" to any image you want to block the Pin It button on, like shown below.


I hope you have found this tutorial easy to understand, if you have any questions just pop them below.

Happy blogging!
xox

0 comments:

Post a Comment

I love talking to you all and reading your comments. Don't forget you can tweet me (@MaddiSkotinis) if you have a particular question, I'll be able to reply much quicker. Thankyou so much for visiting, I hope you find the help you need to design your blog! xox

I reply to every comment directly to your email address. If by chance you have a no-reply email don't stress I'll also reply to your comment with a comment on this post, so if that's the case don't forget to check back.

 

Twitter

Connect

Follow on Bloglovin

visit allure by maddison