Add Pinterest Working “Pin It” Button for Blog in 2 steps

Posted by Sri Ganesh.M in Codex

We have seen the growth of the Pinterest.com rapidly increasing each month than facebook, twitter and all other major social networking sites. but many have mentioned that these are not the social networking sites. for the facebook freaks and twiter lovers – yes the pinterrest is something different and interactive and at the same time,

Like facebook there is no chat app or anything else, but in the comment section you can write and tag like face book or twitter @mentions. which will be easy for other pinners to know what they are doing and you might called for asking them.

First understand what is Pinterest

Pinterest lets you organize and share all the beautiful things you find on the web. People use pinboards to plan their weddings, decorate their homes, and organize their favorite recipes. Best of all, you can browse pinboards created by other people. Browsing pinboards is a fun way to discover new things and get inspiration from people who share your interests.

Pinterest will let you tag and bookmark the images, videos and other crazy and interactive stuffes you want to share or want to have for yourself. You might well know that there is an issue of copyright law suit problem which is a problem and describing in many blogs. we let you any update on that.

Kindly read the pinterest copyright terms and conditions carefully.

Join and follow us

To get started,you should request an invite. you can ask us in the comment section with your email iD in the email”input field” and do not post in the comment description.

Code Tutorial

add this following code in your blog theme single.php or whatever it says, where you need to add this button.

1. Default “Pin it” Button code

As Shown in the pinterest page, more information click here. Usually you have to add the code before “body” tag closed.

Basic code

<a href="http://pinterest.com/pin/create/button/" class="pin-it-button" count-layout="horizontal">Pin It</a><br /> <script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

For advance user !

<!-- Include ONCE for ALL buttons in the page --><br /> <script type="text/javascript"> (function() { window.PinIt = window.PinIt || { loaded:false }; if (window.PinIt.loaded) return; window.PinIt.loaded = true; function async_load(){ var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; if (window.location.protocol == "https:") s.src = "https://assets.pinterest.com/js/pinit.js"; else s.src = "http://assets.pinterest.com/js/pinit.js"; var x = document.getElementsByTagName("script")[0]; x.parentNode.insertBefore(s, x); } if (window.attachEvent) window.attachEvent("onload", async_load); else window.addEventListener("load", async_load, false); })(); </script></p> <p><!-- Customize and include for EACH button in the page --><br /> <a href="http://pinterest.com/pin/create/button/" class="pin-it-button" count-layout="horizontal">Pin It</a>

Now save the file, and check whether it works, no it won’t work. It will show a button and “0″ count. when you try to “pin it” the pop-up window will load and so the same and there will be no thumbnail or images.

The Following below code will work for sure !

Better Add this Code for quick votes

This code will be recommend for Photography site, portfolio sites or Site with tons of Images which the blogger like to share in ” pinterest.com ”

<a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"><img src="[delete this text and ]Here add your Image source link" alt="Pin It" onclick="doPinIt();"/></a>

I can explain you what we made changes, but if you give a closer look – you can identified it, made some changes, You might noticed that this code will give you a simple pin button with no counts. But it will work. All you need is get Traffic from “Pinterest.com” and i think the developers from pin-team and digg-digg developer make some changes for showing the counts which works.
If you need to add only one thumbnail what the user added – go here, our friend wpbeginner made a wordpress tutorial.

But Remember that it wont give you the option of adding multiple images and not recommend for Photography sites or porfolios or a inspiration post with 100+ images.
(*You can try to pin this Post – button available next to the Author box – try it)

Hope you like my tutorial, Please share this post and let others know – so that they can install a working “pin it” button in the blog and Start Pinning.