Blogger Tutorial - Add a Pin It Button to Posts

You'd have to be living under a rock recently to not have heard about Pinterest. It really is the hottest new Social Media outlet out there. It is a great resource for bloggers too as things can go viral quite easily which in turn can provide you with a good traffic stream. More and more sites have pin it buttons now and they are a great way for your readers to easily share your content on Pinterest. Wordpress has tonnes of plugins for adding the button but as usual Blogger is lacking this function. So I'm going to show you how to add one to the bottom of your posts (just above your twitter/Facebook share buttons).

 



 

Navigate to Dashboard>Template>Edit HTML>Proceed.

Tick the 'Expand Widget Template' at the top.

Locate the following line of code - <data:post.body/>

Just below this line of code, paste the following:

<!-- Include ONCE for ALL buttons in the page -->
<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>

<!-- Customize and include for EACH button in the page -->
<a href="http://pinterest.com/pin/create/button/" count-layout="horizontal">Pin It</a>

Hit Save!

That is all there is to it people can now pin your posts to boards on Pinterest!