• Add Pinterest/Pin It(Counter) Button With Thumbnail To Blogger | BST

    Advertisements


    Pinterest Pin It counter button to bloggerPinterest is one of the fastest growing networks on the web. If you don't know about Pinterest, then read what is Pinterest? If we compare Pinterest users to other social media sites one to two years after the launch, Facebook had 6 million users, while Twitter had 3 million users and Pinterest has 10.4 million users. The daily visit to Pinterest site has gone up 145 percent since the beginning of 2012. If you have blogs/websites or you want to promote your small business on the web, then Pinterest may help you to gain the traffic of your blogs/websites. When I joined Pinterest, I have added some article to the pinboard in Pinterest and look at our traffic stat after a day that shows me the referral traffic are coming from Pinterest. Get to more engage with Pinterest, allow your visitors to "pin it" your articles to their pinboard by adding Pinterest "Pin It" button. If you want to add Pinterest "Pin It" button with counter and thumbnail to your blogger, you may know that official Pinterest site has no "Pin It" button with counter for blogs hosted on Blogger. If you want to show the Pinterest counter Pin It button with thumbnail into your blogger, then below is the code in which we have used bookmarklet to choose your post thumbnail and used the negative margin on the Pinterest counter for click to open Pinterest bookmarklet. Here is how to add Pinterest "Pin It" counter button with thumbnail to blogger.

    If you are on other websites then check back the original source of this article --> Pinterest "Pin It" Counter Button To Blogger by Blogger & SEO Technology.

    To Add Pinterest Pin it Button With Counter/thumbnail To Blogger/Blogspot

    1. Copy the below code,
      <a class='pin-it-button' count-layout='vertical' 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:-46px; width:43px; height:20px; display:inline-block;'/>
      <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>


      The above code is for vertical Pinterest counter pin it button, as shown on this blog in the left share box. If you want the horizontal Pinterest counter pin it button, then change count-layout='vertical' from the above code to count-layout='horizontal' and find margin-left:-46px from the above code and change -46px to -93px.
    2. Now, sign in to Your Blogger Dashboard --> Template(Under more options) --> Edit HTML(and Proceed) ( Expand Widget Templates ) find the code (using ctrl+F) <data:post.body/> and paste the above code just before the <data:post.body/> code. It will show your Pinterest pin it counter button to the upside of the content area, and if you want to show your Pinterest pin it counter button below to your post content, paste your code to below <data:post.body/> and finally click on Save.
    Don't forget to pin it into your pinboard via left share box. :) Follow me on Pinterest.
    You done!




    Share the Love!

    Did You Like This Post? Get the Latest Blogger & SEO Technology Directly From Your Inbox Just Enter Your Email and Verify it!



0 comments:

Leave a Reply