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

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+! You can as well grab my feed and get updates through email...

  • http://creativefrappe.com/ Dave

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

  • Frank Schafer

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

  • http://www.emmybizblog.com emeka

    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

  • http://www.yourcyberguide.com Dave

    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

    • http://www.doncaprio.com Don Caprio

      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.

  • http://justmelpublishing.com Anna

    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!

  • http://fashionistable.com/ Fashionistable

    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




    • http://www.doncaprio.com Don Caprio

      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.

  • erfun

    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.

  • http://www.insertknowledge.com gul ahmed
  • http://www.databaseidea.com/ Sharifur Rahman

    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

  • http://bloggingfrommobile.com kingsley

    THaNKS DON

  • http://reksyong.blogspot.com/ reks

    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.

    • http://www.doncaprio.com Don Caprio

      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.

      • http://reksyong.blogspot.com/ reks

        Thanks..

  • http://www.sop.name.my/ sop

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

  • http://bio-medspartakakanjac.blogspot.com mymoonlog

    Very appreciate share this site
    I like it

  • http://www.techplusz.com mithun

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

  • http://www.inkjam.org Sandipan

    Thanks a million!

  • http://jenaissancedesign.blogspot.com Jen

    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! :)

    • http://www.doncaprio.com Don Caprio

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

  • http://www.clinicme.com John Methew

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

    • http://www.doncaprio.com Don Caprio

      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&quot; class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js&#039; 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&gt;
      <div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js&#039; 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&quot; target="blank"><font color="black">[Get This]<font></font></font></a></div></div>
      </b:if>
  • http://www.geekyparigyan.com Parigyan

    is found 3 times…Where to put link now ? My blog is http://www.geekyparigyan.com please check it out

    • http://techjay.com Derek Odum

      On The second one bro.

  • http://krishenkavintagetreasures.blogspot.fr/ Krishenka

    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

    • http://www.doncaprio.com Don Caprio

      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.

  • http://www.oscarmini.com Oscar Frank

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

  • http://www.maganihotellegian.com The Magani Hotel

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

  • JBR

    Hi, this seems great and is exactly what I was looking for…

    Will the code above work in WordPress?

    Thanks!

    • http://www.doncaprio.com Don Caprio

      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.

      • JBR

        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!

        • http://www.doncaprio.com Don Caprio

          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.

  • http://mulkymaurival.blogspot.com mulky

    thanks for tutorial

  • http://ReverseWineSnob.com Jon

    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!

    • http://www.doncaprio.com Don Caprio

      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?

      • http://ReverseWineSnob.com Jon

        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?

  • http://www.freebrowsinglink.com post utme 2013

    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!!!

  • http://www.techopera.com blackberry

    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.

    • http://www.doncaprio.com Don Caprio

      I’ll see if I can create a WordPress version of this. thanks for dropping by.

  • http://www.webnots.com WebNots

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

  • http://mybloggertopic.blogspot.com/ atiqur rahman

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

  • http://www.oscarmini.com Oscar

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

  • http://www.ekwholesale.co.uk wholesale children clothing

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

  • http://blogdangkal.com bede

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

  • http://factsnmyths.com facts

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

    • http://www.doncaprio.com Don Caprio

      Glad you like it :)

  • http://www.omoscowonder.com/ Omoscowonder

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

  • http://www.adjustabledumbbellsnet.com/ David Schulze

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

    • http://www.doncaprio.com Don Caprio

      You’ll add that just below <data:post.body/> or <div class='post-footer-line post-footer-line-1'/>