We all know how images can be a huge crowd puller for your blog, so when Pinterest took the plunge it went a step ahead with its initiative. Now, the bloggers will be able to pin a photo of their choice and when their visitors like the image, they can simply hit the red button to pin it to their account. So, all those people who have pinned the image can now view the particular photo in the dashboard of theirs. It is not restricted to this only, instead they will also be able to share the photo with the followers as well as the friends they have. If the viewer has tagged the image or if they have added keywords to it then also it will be visible to them. The best part has not been revealed yet and that is the photo link that heads to your site will carry a small description about your blog or a particular post of yours. So, now you can figure out very well that if you are using this, then attracting new visitors will be just a matter of time before they flocked your site through this channel.

Add a Pinterest Pin It Mouseover Button on blogger Images

Displaying the Pinterest button

Now that you know that a small Pinterest button can be so helpful, would you like to stay away from it? The answer will be big No, but how do you make it happen? You have to start by editing some codes of the existing template and in order to make this happen, you will have to land up in the template through your dashboard > Template > click on the button which says Edit HTML. When you get into the editor page, Click anywhere inside the HTML editor to enable search box then press CTRL + F to search for </body> tag.

Also see : Pinterest – Things You Should Avoid

Taking the necessary steps to nail the process

You will now have to make use of the script which is provided below and paste it before/above </body> tag.

var custom_pinit_button = "http://4.bp.blogspot.com/-3CPCJ031n9M/U_vWZXUV1SI/AAAAAAAAKPA/8Q3N34ieaBw/s1600/pinit-button.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' src='http://makingdifferent.github.io/blogger-widgets/pinterest-button1.js' type='text/javascript'>
// Visit makingdifferent.com for more widgets and tricks.

Another interesting feature about the whole thing is that it provides enough flexibility in the placement of the button. Therefore, if you want the button to be at the center, then the script will be –

var pinit_button_position = "center"

But, in case you want to place it anywhere else, then replace center with the position you want the button to be in.


Now, if you want to change the pin it button to appear upon the Mouseover, then you can change “Pin it” button image URL instead of the one that appears in the second line of the script –

var custom_pinit_button = "http://4.bp.blogspot.com/-3CPCJ031n9M/U_vWZXUV1SI/AAAAAAAAKPA/8Q3N34ieaBw/s1600/pinit-button.png"

Before saving the changes made, you need to go through it to see whether everything has been updated correctly or not. Now save the changes and you can land up in the page where you made the changes, you will witness the red Mouseover button appear in there! You can now check your traffic flowing from Pinterest with the help of analytics tools present on the web.