As you are unfamiliar to Printrest,It is a pinboard-styled social photo sharing website. The service allows users to create and manage theme-based image collections.The pinned image is linked to the original webpage or blog post location, giving users the chance to visit the source directly.A pin it button is same as facebook like and twitter tweet it button.As it allows users to share your posts without leaving your blog.It also displays how many times a post has been shared.Now let's see how to add this Printerest Pin It button to blogger.
Choosing Pinterest Button
Here I am giving all types of Pin It button first choose any one of them and proceed to installation.
1. Pin it Horizontal Button
<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>
<!-- Pinterest button Start -->
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
</div>
<!-- Pinterest button End -->2. Pin it Vertical Button
<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>
<!-- Pinterest button Start -->
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
</div>
<!-- Pinterest button End -->3. Pin it Button Without Count
<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>
<!-- Pinterest button Start -->
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='pin-it-button' count-layout='none' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
</div>
<!-- Pinterest button End -->Installing The Button On Blogger
Adding Buttons At The End Of Post
If you want to add these buttons below the complete post(after the jump break, if any) then paste any one of the button code after the below code
<div class='post-footer'>If you want to add any of the above buttons below the post title then paste below code after it.
<div class='post-header-line-1'/>OR
Adding Buttons Below Post Titles
<div class='post-header'>Now save your template and you are done....
If you found this post helpful then kindly Pin It....
Pin It
%20To%20Blogger%20Posts){kind=link}
How to make it appear floating button Rahul? thanks in advance
ReplyDeleteHOW TO COUNT OF THE PIN IT TO STORE IN VARIABLE?
ReplyDeleteHi, for some reason, the button shows up ok with the counter, but I'm unable to pin anything i.e. an image to be pinned does not show up at all when the "pin it" button is clicked.
ReplyDeletePlease help?
i got it loaded and it open when clicked how do i make it grab an image? it just shows a blank image now :(
ReplyDeleteNow not even the counter shows up! help please!
ReplyDeleteHi,
ReplyDeleteI have the same problem as Chrissy. I've added the button in the right place....because it shows up. But when I attempt to pin something the gray Pinterest box shows up and no image...just a yellow box. Any suggestions?
I pasted the code, but there's no button. Is there a workaround?
ReplyDeleteweb counter Enormous website along with attractive and exclusive materials whatever you need.
ReplyDeletePinwords is a really basic tool, but it’s great if you want to quickly make an image from a quote and add it to your Pinterest account. Pinstamatic actually lets you
ReplyDeletecreate a whole bunch of items to add to your Pinterest boards including website snapshots, pins of Twitter profiles and Spotify tracks that you can pin.