Add Pinterest/Pin It Button With Thumbnail To Blogger

Wapdev Admin
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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.

Suggested Post :- Add Pinterest Pin Tab / Show Board Pins in Facebook Business Pages

How to Add Pinterest Pin it Button With Counter/thumbnail To Blogger

Step 1 - Copy the below code

<a class='pin-it-button' count-layout='vertical' expr:href='&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='' 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;src&#39;,&#39;; + Math.random()*99999999);

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.

Step 2 - Paste The Above Code

Now, sign in to Your Blogger Dashboard --> Click on your blog --> Theme --> 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.

Don't forget to pin this post into your pinboard. ☺

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.