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.
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 == "item"'>
<!--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='"http://pinterest.com/pin/create/button/?url=" + 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('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>
</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://www.doncaprio.com/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!
Thank you so much Don, i have been searching on how to put a pinterest button.
Dave recently posted..Penguin Owns Panda
A lot of blogs are now using floating share buttons which makes it more convenient for both the user and the webmaster.
Twitter: donemitex1
says:
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
emeka recently posted..HOW TO MAKE OVER N50,000 DAILY FROM SCAFFOLD RENTING
Twitter: divyanshojha
says:
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
Hi Dave,
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.
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!
Anna recently posted..Auto Pinterest Marketer UPDATE
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
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.
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.
finally got it
http://www.insertknowledge.com
gul ahmed recently posted..Get More Traffic on Your Blog By Putting Social Sharing Buttons
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
Sharifur Rahman recently posted..How to create facebook share button using Javascript
Twitter: healthabeHQ
says:
THaNKS DON
kingsley recently posted..How I Post To Blogger On Nokia 2700c Operamini
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.
Well, to write this, you must really know about CSS and it’s not what can be easily taught. You may check w3schools.com for online CSS tutorials anyway.
All the best.
Thanks..
thank you..
even must find the right data.post.body (4 for my template), finally its work!
Very appreciate share this site
I like it
mymoonlog recently posted..Links for 2012-06-16 [del.icio.us]
Nice Post…Thank you so much for posting this article.
mithun recently posted..Facebook Music: Listen to music from your facebook account
Thanks a million!
Sandipan recently posted..GPS Technology Making Golf a Simpler Game
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!
It wasn’t working well when I tried using it as a widget. Had some problems with the pinterest button
Is there any way to add social button on the homepage, where article are listed ??
John Methew recently posted..5 Essential Core Workout
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
<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>
Twitter: parigyan
says:
is found 3 times…Where to put link now ? My blog is http://www.geekyparigyan.com please check it out
On The second one bro.
Derek Odum recently posted..Top 10 Must Have Android Apps
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.
Twitter: oscarfranky
says:
Thanks for this post, i have such a post at how to add facebook share and like buttons to blogger
thanks don, will tray the script, hope it work and no trouble.
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.
thanks for tutorial
mulky recently posted..Google Hari Ini Rayakan Ulang Tahun Yang ke 14
Twitter: ReverseWineSnob
says:
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!
Jon recently posted..Top 10 Red Wines Under $20 – The Reverse Wine Snob November/December 2012 Holiday Edition
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?
Twitter: ReverseWineSnob
says:
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?
Jon recently posted..douRosa Douro White Wine 2011 – The Douro Delivers Much More Than Port
Twitter: nigeriaschools
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!!!
post utme 2013 recently posted..University Of Abuja, Uniabuja Shuts Down Indefinitely!!
Twitter: techopera
says:
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.
blackberry recently posted..Working Free Video Editor For Symbian Mobile Phones!For s60v3 and s60v5 Edition!
I’ll see if I can create a WordPress version of this. thanks for dropping by.
Twitter: WebNots
says:
Thanks for this nice post Don. It is really simple & useful for the new webmasters like me.
Twitter: atikcse1992
says:
Awesome post with nice explanation. Hey brother, this post is really nice. You’re all the tips are helpful thanks for sharing…
atiqur rahman recently posted..Add Blogger Notification or Sticky Bar or Fixed Bar with “Close Button”
Twitter: oscarfranky
says:
Wow, this is quite an Awesome and lovely article mate. Good Job.
Great post. its really interesting post. there are many benefits. Thanks for sharing information.
Twitter: adetruna
says:
thank for this complete explaination, i will go to the dashboard and put it in my blog LOVE IT!
bede recently posted..Tips Alami Cropping Helai Rambut di Photoshop
Thanks Don you have solved my problem. I have spend my 2 days for the solution and find at your desk. Thanks Again
Glad you like it