How To Add Pinterest Button to Blogger Blog
Pinterest is virtual pinboard and allows you to store your favorite stuff online into a single organized page.
It's just recently that I find it more interesting to pin some interesting stuff online. On my Wordpress blog, the Pinterest button is already embedded to a sharing plugin already and when I searched for installations tips for blogger blogs, there are only a few who had made a post out of it. Well, I manage to find one tutorial and I admit that it works. Thanks to Kelsey of Kelsey Creates for having this working tutorial.
Here is the simplified version of Kelsey's tutorial. Be sure to back up everything.
First, go to Design and select on Edit HTML, make sure to tick Expand Widget Templates and look for this code and place the code below right before it.
function pinit() {
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>
Next is the button placement where you want the Pinterest button to be placed,
if you want to add the button below the post title and above the content, you can place the code below right after the post-header code.
Tip: Hit Ctrl+F then search for post-header
<b:if cond='data:blog.pageType == "item"'>
<a class='goog-inline-block share-button pin_it_button' expr:onclick='"pinit(); return false;"' target='_blank'/>
</b:if>
if you want the button to be place right after your post, you can add the above code right after the code data:post.body
Tip: Hit Ctrl+F then search for data:post.body
or if you want the button to be in the footer of your post, you can simple search for this code, post-footer-line and place the above code right after the code.
Lastly, to make everything looks great, add it to blog's CSS. Simply search for these terms /* Footer or /* Content and after that add the code below.
.pin_it_button {
overflow: visible; width: 51px;
height: 26px;
margin-right: 1px;
font: normal normal normal 11px/normal Arial, sans-serif;
background-color: transparent !important;
background-image: url("http://assets.pinterest.com/images/pinitbutton_sprite.png") !important;
color: #CD1F1F !important;
background-position: 0px 0px !important;
background-repeat: no-repeat no-repeat !important;
cursor: pointer;
}
It will now look like this;
/* Footer
----------------------------------------------- */
----------------------------------------------- */
.pin_it_button {
overflow: visible;
width: 51px;
height: 26px;
margin-right: 1px;
font: normal normal normal 11px/normal Arial, sans-serif;
background-color: transparent !important;
background-image: url("http://assets.pinterest.com/images/pinitbutton_sprite.png") !important;
color: #CD1F1F !important;
background-position: 0px 0px !important;
background-repeat: no-repeat no-repeat !important;
cursor: pointer;
}
Save everything and your Pinterest button is now ready to use. If you have further questions and inquiry, feel free to leave them at the comment section.
Good luck and Enjoy
LIKE THIS POST? SHARE THIS TO
Tags: Blogging, BLOGGING TIPS, Pinterest, pinterest button
Previous Article
Subscribe to:
Post Comments (Atom)
Share your views...
17 Respones to "How To Add Pinterest Button to Blogger Blog"
why dont you use a syntax highlighter like what i used on my post http://www.pixgateway.com/2012/01/pics-float-left-width-580px-height-42px.html
Its better that way, its more clean :D
January 12, 2012 at 5:13 AM
hmmn this is useful if your visitors doesn't have a bookmarked drag of pin it on their browser, will try this one
January 12, 2012 at 5:56 AM
great code! this works well!
January 12, 2012 at 6:06 AM
i neither have /*footer nor /*content on my blog's css. what should I do?
January 12, 2012 at 8:37 AM
Thank you so much for this tutorial, it worked great!
January 12, 2012 at 9:42 AM
thank you for this tutorial!
January 12, 2012 at 11:52 AM
well, I've never heard of Pinterest. Must check on this one first. Thanks for sharing. :)
January 12, 2012 at 5:33 PM
This is the first time I heard about Pinterest. I do not exactly know what will be the role of it in the success of my blog. But anyway, thanks for giving me idea about this. I may give it a try.
great tutorial thanks but the pin it button only appears on a post if the reader has clicked that post specifically. If they go to general blog address the pin in button doesn't show up on each post. How can I make this happen.
IE if they go to http://picnpaste.blogspot.com it doesn't show.
If they go to http://picnpaste.blogspot.com/2011/12/patchwork-colours.html it does show.
I would like it to show in the former example as well,
cheers
January 13, 2012 at 3:33 AM
sorry, me again. I just clicked on the button and nothing actually happens??
cheers again
kelli
January 13, 2012 at 3:35 AM
Hi Kebeni, to make the button appear on the homepage on each post, just remove the bold codes as show below
<span style="color:orange"><b:if cond='data:blog.pageType == "item"'> </span>
<a class='goog-inline-block share-button pin_it_button' expr:onclick='"pinit(); return false;"' target='_blank'/>
<span style="color:orange"></b:if></span>
January 13, 2012 at 5:08 AM
Okay, forgive me if I'm just being dumb...but I've tried pretty much ALL of the blogger tutes for this, and none have worked for me...so I'm trying yours. But for the first part of the code, when you say, "look for this code and place the code below right before it." - look for WHAT code, exactly? I found something that looked similar to that piece of code, and placed it before that...and followed the rest of the instructions, but all I've succeeded in getting is an email-looking button, which is thus far un-clickable - on each individual post page. Sigh. I'm so frustrated.
January 13, 2012 at 4:00 PM
Hi herbert,
I don't have that code anywhere?
thanks
Kelli
January 13, 2012 at 5:27 PM
I am using a blogger Blog. These tips should work great for me.
January 14, 2012 at 3:56 PM
pinterest is awesome website but i don't understand why would someone want to put pinterest button on this blog? yes, the site would get listed on the pinterest , but isn't pinterest only for commerce?
January 25, 2012 at 11:11 PM
WoW! Sir thank you for sharing the pinterest button ^_^ malaking tulong po ito sa mga blogger platforms.. salamt sa code :D
January 27, 2012 at 9:37 PM
Post a Comment
This is a do-follow blog and is updated regularly.
■ Avoid posting non related contents.
■ Please use a name instead of blog name or SEO stuff, otherwise it will be deleted right away