Description: To add Pinterest Pin It button with counter and thumbnail to Blogger Blogs with Pinterest Bookmarklet feature.
Pinterest 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.
Related Topics:
Related Topics:
To Add Pinterest Pin it Button With Counter/thumbnail To Blogger/Blogspot
- Copy the below code,
<a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + 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('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>
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. - Now, sign in to Your Blogger Dashboard --> Click on your blog --> Template --> Edit HTML, 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. If you are using read more hack on your Blogger blog, you would see <data:post.body/> code two times in your blog, so try for each and look at your blog to find out which is suitable for you.
