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+! By the way, if your blog needs a custom design, you can contact me here...

Comments

  1. 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.

  2. emeka 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

  3. Dave 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

    • 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.

  4. Anna says

    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!

  5. 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.

  6. erfun says

    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.

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

  8. reks says

    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.

  9. Jen says

    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

    • 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>
  10. Krishenka says

    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

    • Don Caprio says

      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.

      • JBR says

        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!

        • Don Caprio says

          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.

  11. Jon 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!

    • Don Caprio says

      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?

      • Jon 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?

  12. blackberry 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.

  13. 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…

  14. wholesale children clothing says

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

  15. facts says

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

  16. 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.

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 day month ye@r *