Adding Floating Share Buttons with Pinterest ‘Pin it’ to Blogger Posts

Shortlink:

There were so many requests on this post asking me to update the floating share buttons with Pinterest Pin it button. But I wasn’t on Pinterest then and never gave gave it much consideration…I said to myself it’s just a new, obscure social network that’s going to fade away in no time. I was wrong! Pinterest has grown to be the third largest social network in the world after Facebook and Twitter and that got me thinking where the heck is Google +! Pinterest can be a real source of traffic if well used and this is a proven fact. Ignoring the potential of Pinterest in driving traffic to your site and exposing your content to a wider audience isn’t such a wise idea.
floating share button with pinterest

This new floating share buttons is quite similar to the one I posted last year but the tweet button is changed and Pinterest “Pin it” button is now included. Other buttons included are StumbleUpon, Digg, Google +1 and Facebook share.

Adding these floating share buttons to your blog is a sure way to drive more traffic to your posts as users visitors find it easier using the fixed buttons. It’s a clear message asking them they should share the post ;)

Adding the Floating Share Buttons to Blogger

- Log in to Blogger and go to Template > Edit HTML

- Check the box labelled Expand Widgets Template

- Search for <data:post.body/> or <div class='post-footer-line post-footer-line-1'/>

- In the line just below that, paste this code:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!--Start Floating Share Buttons with Pinterest doncaprio.com-->
<style type='text/css'>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title='Share with your friends'>
<div class='sbutton' id='rt'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='sbutton' id='gplusone'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/>
</div>
<div class='sbutton' id='gb'>
<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&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='http://assets.pinterest.com/js/pinit.js' 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;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>
</div>
<div class='sbutton' id='su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
<a class='DiggThisButton DiggMedium'/>
</div>
<br/>
<div style='clear: both;font-size: 8px;text-align:center;'><a href='http://geek.ng/2012/05/adding-floating-share-buttons-with-pinterest-pin-it-for-blogger.html' style='text-decoration: none;' target='_blank'><font color='#816D77' decoration='none'>Get widget</font></a></div><!-- Do not remove this link -->
</div>
<!--End Floating Share Buttons with Pinterest doncaprio.com-->
</b:if>

- Now save your template.

This widget will only be shown in post pages because I couldn’t find a way to make the Pinterest button work on all pages. If you want the floating share buttons to appear on the left side of your post, find and change #pageshare {position:fixed; bottom:15%; right:10px; to this: #pageshare {position:fixed; bottom:15%; left:10px;

If you’re on WordPress, Digg Digg plugin is a pretty nice alternative and you don’t need to do any hard coding. Like this Widget? Kindly share it!

Filed Under: Blogger





Author: Don Caprio

Don Caprio is a full time blogger / web designer living in Nigeria and apart from blogging, my other obsession is music. I'm a self-confessed Tupac fan, an iOS lover, an Android user, a Windows 8 power user, a writer with a 5-year old unfinished novel... and the list goes on and on. You can add me on Facebook, follow my updates on Twitter or add me to your circles on Google+! By the way, if your blog needs a custom design, you can contact me here...

Comments

  1. Thank you so much Don, i have been searching on how to put a pinterest button.

  2. Frank Schafer says:

    A lot of blogs are now using floating share buttons which makes it more convenient for both the user and the webmaster.

  3. i have been thinking about pintrest. i heard it was making waves and i was thinking on integrating it on my site but didnt have any idea on how to go about it so i just ignored it. but this post has really solved a problem for me. thanks don

  4. Now again you knew what i wanted…Don’t laugh but you really are god. Yesterday i was thinking that digg is not earning me any traffic so be using pinterest with stumbleupon. But didn’t knew how to put it in. And today you posted it. May be my needs match your time of posting. It happened five times in a week that google directed me to your site for my search on the very day you post those things…Thanks! I have got a magic lamp ( laptop ) From which a geiniee ( Don ) appears and fulfills my needs

    • Don Caprio says:

      Hi Dave, :D You got me laughing again. Thanks for dropping by. I just found out a little problem with the widget, it’s not hidden from the homepage but it’s been fixed.

  5. Awesome code update! Pinterest is an excellent way to keep customers engaged as well as drive massive amounts of target traffic. One of my sites had a 600% increase in traffic from February to April, & the only thing I did differently was set up a Pinterest account & start pinning. It’s just so dang time consuming – partially because it’s so addicting! LOL Luckily I found a kick-butt software to automate a lot of it for me; just wish I had it months ago… http://streetmarketing.com/autopin – maybe you or your readers could get some use out of it too… Great article!

  6. Fashionistable says:

    Hi Don, I have looked and looked on my HTML and cant find this or this I can only find the below as the only reference to the footer. Please advise. Thank you Dvora

    • Don Caprio says:

      Sorry Dvora, I should’ve included it in the steps but you need to first check the box labelled EXPAND WIDGET TEMPLATE before finding the code.

  7. Hi Don Thanks for this but I don’t know why it floats to the right and if I change the margins then it won’t show in non-wide screens.

  8. gul ahmed says:

    finally got it http://www.insertknowledge.com

  9. Sharifur Rahman says:

    I have a tutorial that helps you to add Facebook share button without having any programming knowledge. The link is here http://www.databaseidea.com/2012/06/how-to-create-facebook-share-button.html

  10. kingsley says:

    THaNKS DON

  11. Hey, Don. Can you teach me how to write this script? Please, I don’t take IT in my subject but always wanted to learn how to write script like this.

  12. thank you.. even must find the right data.post.body (4 for my template), finally its work!

  13. mymoonlog says:

    Very appreciate share this site I like it

  14. Nice Post…Thank you so much for posting this article.

  15. Sandipan says:

    Thanks a million!

  16. Hi Don, I’m currently using your widget code for my floating bar, but want to use this new one with Pinterest. Have you got this code as a widget instead? Thanks bunches! :)

    • Don Caprio says:

      It wasn’t working well when I tried using it as a widget. Had some problems with the pinterest button

  17. John Methew says:

    Is there any way to add social button on the homepage, where article are listed ??

    • Don Caprio says:

      Yes, you can use the other version of this button I made that has no pinterest button. you only display it on the homepage only with conditional statements. Paste this under data:post.body

      <b:if cond='data:blog.url == data:blog.homepageUrl'> <style> #pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Share This With Your Friends"> <div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div> <div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div> <br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.doncaprio.com/2011/09/sidebar-floting-share-buttons-large.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div> </b:if>
  18. is found 3 times…Where to put link now ? My blog is www.geekyparigyan.com please check it out

  19. Hi I have just followed all the instructions and added the code but I can’t see anything on my blog as yet. Now I am not sure what I should do next any tips you can think off. Coding scares the pants of me

    • Hello Krishenka, This widget only appears on post pages. I checked your blog just now and I can see the share buttons on you post pages.

  20. Thanks for this post, i have such a post at how to add facebook share and like buttons to blogger

  21. The Magani Hotel says:

    thanks don, will tray the script, hope it work and no trouble.

  22. Hi, this seems great and is exactly what I was looking for… Will the code above work in WordPress? Thanks!

    • There’s another set of button that works on WordPress but without Pinterest button – Adding Floating Share Buttons To WordPress Without a Plugin Alternatively, you can install Digg Digg plugin, it’s what I presently use here.

      • Thanks Don. I looked into Digg Digg but it seems now that the plugin has problems and the support has gone downhill since the author got bought out: http://wordpress.org/support/plugin/digg-digg So not sure what to do now. Could I easily add the Pinterest button above to the code from your other (WP) post, so that it will work with all major services? Thanks again!

        • Of course you can do that. But last time I checked, the pinterest button needs a URL in the code to properly work. Unlike Facebook share button that automatically shares the current page you are, you need to generate the URL somehow for pinterest button. Maybe that has changed now, I can’t tell.

  23. thanks for tutorial

  24. Hi Don, I’ve been using this for a while now…yours was the only version I could find where the Pinterest button actually works and lets you choose which photo you want to pin…thanks! However, just yesterday it stopped working! It looks like maybe Pinterest changed something? The size of the icon or something must have changed as well b/c the spacing in the share bar is off now too. When I click the Pin it button now it doesn’t let me choose photos anymore and actually comes up as a basically empty dialogue box… Any ideas? Thanks!

    • Hi Jon, I’m using this particular widget on a blogger blog and it looks alright. I checked just now. Are you still experiencing the issue?

      • Hi Don, sorry for the delay in getting back…yes, it is still not working. I’ve lost the the Pin it counter now as well. Tried it in Chrome, FF and IE with same result. Any ideas?

  25. post utme 2013 says:

    this super great!!! am going to use it on my blogger blog which is on image and all, but for now am a little busy with post utme 2013, thanks for this!!!

  26. Sometimes Don, i think when writing on blogger blog widgets, you should add the same tutorial for wordpress users below the article. anyway, thanks alot, this will be useful for blogger blog users.

  27. Thanks for this nice post Don. It is really simple & useful for the new webmasters like me.

  28. atiqur rahman says:

    Awesome post with nice explanation. Hey brother, this post is really nice. You’re all the tips are helpful thanks for sharing…

  29. Wow, this is quite an Awesome and lovely article mate. Good Job.

  30. wholesale children clothing says:

    Great post. its really interesting post. there are many benefits. Thanks for sharing information.

  31. thank for this complete explaination, i will go to the dashboard and put it in my blog LOVE IT!

  32. Thanks Don you have solved my problem. I have spend my 2 days for the solution and find at your desk. Thanks Again

  33. Omoscowonder says:

    This is awesome, i really appreciate the big help doncaprio, adding Pinterest to blogger movie websites, among others is really great. Thanks a lot.

  34. David Schulze says:

    this s wonderful DC, please, at the second step, i got stuck, please where i add the second stage code?

Share Your Comments & Feedback:

Please do NOT use keywords in the name field because they won't be linked to anything anyway...just use your real name. Let's try to have a personal and meaningful conversation.

Commenting Note(s):
To insert code into comments, use: [php]code in here...[/php]
Some HTML tags allowed: <strong>, <em>, <del>, etc. (Just don't overdo it, please!)

Current ye@r *