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.

pinterest

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.

<script type='text/javascript'>
function pinit() {
    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>

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 == &quot;item&quot;'>
<a class='goog-inline-block share-button pin_it_button' expr:onclick='&quot;pinit(); return false;&quot;' 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 Tweet This ! Share On Facebook ! Add To Del.icio.us ! Digg This Post ! Share On Reddit ! Share On StumbleUpon ! Share On MySpace ! Blog Feed !





Share your views...

17 Respones to "How To Add Pinterest Button to Blogger Blog"

Free Me said...

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


January 12, 2012 at 5:06 AM
Herbert said...

Its better that way, its more clean :D


January 12, 2012 at 5:13 AM
chrisair said...

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
crumpylicious blog said...

great code! this works well!


January 12, 2012 at 6:06 AM
Ivan Stewart Saldajeno said...

i neither have /*footer nor /*content on my blog's css. what should I do?


January 12, 2012 at 8:37 AM
Denise Levy said...

Thank you so much for this tutorial, it worked great!


January 12, 2012 at 9:42 AM
kiko :(|) said...

thank you for this tutorial!


January 12, 2012 at 11:52 AM
Aj Banda said...

well, I've never heard of Pinterest. Must check on this one first. Thanks for sharing. :)


January 12, 2012 at 5:33 PM
Manuel Garcia said...

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.


January 12, 2012 at 10:04 PM
Kebeni said...

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
Kebeni said...

sorry, me again. I just clicked on the button and nothing actually happens??
cheers again
kelli


January 13, 2012 at 3:35 AM
Herbert said...

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 == &quot;item&quot;'> </span>

<a class='goog-inline-block share-button pin_it_button' expr:onclick='&quot;pinit(); return false;&quot;' target='_blank'/>

<span style="color:orange"></b:if></span>


January 13, 2012 at 5:08 AM
Jen said...

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
Kebeni said...

Hi herbert,
I don't have that code anywhere?

thanks
Kelli


January 13, 2012 at 5:27 PM
Radu said...

I am using a blogger Blog. These tips should work great for me.


January 14, 2012 at 3:56 PM
Tom said...

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
balitangnews said...

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

 

Disclaimer | Filipino BlogKarya's HavenReggae MusicBXUNETFood DiaryDiamonds For Sale