Saturday, April 28, 2012

Add Pinterest Pin It button For Blogger Post


Pinterest is another social photo and video sharing site like Facebook that allows it members to create and manage theme-based image collections such as events, interests, hobbies and many more. Pinterest's mission is to connect everybody in the world through the images and videos. Pinterest gives chance its users to share 'pins' on both Twitter and Facebook, which allows users to share and interact. You now can set pinterest pin it button on Blogger for your articles. The Pinned Images link to the Blogger Webpage. It will create huge upcoming new visitors for you. We know social power is massive. So Adding Pinterest Pin It button for Blogger Post is good thinking








  • Go to Blogger → Design → Edit HTML




  • Find the following code using F3




  • <data:post.body/> 

  • Now paste the following code Just after it




  • Note: If there is aread more option on your template, You might have two or three <data:post.body/> on template. You must choose last one




  • <!-- Pinterest Start -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
    <a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
    <a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
    </div>
    <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
    <script type='text/javascript'>
    function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
    }
    </script>
    </b:if>
    <!-- Pinterest button End -->

  • Save the template and done




  • You can change the code so that the widget suits well with your template



    Button type


    count-layout value


    margin-left (in line 5) value

    pinterest pin-it button vertical

    vertical


    -46px

    pinterest pin-it button horizontal

    horizontal


    -93px

    pinterest pin-it button no count

    none


    -46px




    You will find a nice pin it button after post

    Pinterest Button As Widget

  • Add a HTML/Javascript widget and Paste the following code in the widget




  • Now save and done




  • <a href='javascript:void(run_pinmarklet())'><img src="http://2.bp.blogspot.com/-lRae8bdMpuA/TzuLrnycXaI/AAAAAAAACQE/YVYUjfs7dm8/s1600/pinmask2.png" style='margin:0; padding:0; border:none;'/></a>
    <script type='text/javascript'>
    function run_pinmarklet() {
    var e=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);
    }
    </script>

  • This widget will work well for every single post in Blogger



  • Take only 10 seconds to share with your friends if you like. And thank you

    0 comments:

    Click Here To add Comment