Floating Google +1, Facebook, Twitter Buttons For Blogger

Floating buttonsUPDATE:- To add a floating widget to the left of all your posts like in this blog then please read: Floating Counters Next To Posts


Finally the Sliding Counters! Till now we learned and created many floating social share buttons but those button widgets in fact do not slide when the user scrolls the page up or down. The only thing I needed was a well constructed JavaScript code that could make the widget to float up and down synchronously with the webpage movement. Thanks to Jtricks' Floating Menu code, we finally managed to bloggerize the floating effect and this widget is all ready to be added to your beautiful blogger blogs.  Kindly view the demo first,



Live Demo


Adding Floating Social share Counters to Blogger

  1. Go To Blogger > Design
  2. Choose a HTML/JavaScript widget
  3. Paste the following code inside it,
<style>
/*-------MBT Floating Counters------------*/
#floatdiv {
    position:absolute;
    width:94px;
    height:229px;
    top:0;
    left:0;
        z-index:100
}

#mbtsidebar {
        border:1px solid #ddd;
        padding-left:5px;
    position:relative;
    height:220px;
    width:55px;
    margin:0 0 0 5px;
}
</style>


<div id="floatdiv">
<div id="mbtsidebar">
    <table cellpadding="1px" cellspacing="0">
    <tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>
    </td>
    </tr>
    <tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
    <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mybloggertricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    <tr>
    <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">
<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.MyBloggerTricks.com" target="_blank">Widgets</a></p>
    </td>
    </tr>
    </table>
</div>
</div>
<script type="text/javascript">
// JavaScript Document

   <!--
/* Script by: www.jtricks.com
* Version: 20071017
* Latest version:
* www.jtricks.com/javascript/navigation/floating.html
*/
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
    targetX: 0,
    targetY: 300,
    hasInner: typeof(window.innerWidth) == 'number',
    hasElement: typeof(document.documentElement) == 'object'
        && typeof(document.documentElement.clientWidth) == 'number',
    menu:
        document.getElementById
        ? document.getElementById(floatingMenuId)
        : document.all
          ? document.all[floatingMenuId]
          : document.layers[floatingMenuId]
};
floatingMenu.move = function ()
{
    floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
}
floatingMenu.computeShifts = function ()
{
    var de = document.documentElement;
    floatingMenu.shiftX = 
        floatingMenu.hasInner 
        ? pageXOffset 
        : floatingMenu.hasElement 
          ? de.scrollLeft 
          : document.body.scrollLeft; 
    if (floatingMenu.targetX < 0)
    {
        floatingMenu.shiftX +=
            floatingMenu.hasElement
            ? de.clientWidth
            : document.body.clientWidth;
    }
    floatingMenu.shiftY =
        floatingMenu.hasInner
        ? pageYOffset
        : floatingMenu.hasElement
          ? de.scrollTop
          : document.body.scrollTop;
    if (floatingMenu.targetY < 0)
    {
        if (floatingMenu.hasElement && floatingMenu.hasInner)
        {
            // Handle Opera 8 problems
            floatingMenu.shiftY +=
                de.clientHeight > window.innerHeight
                ? window.innerHeight
                : de.clientHeight
        }
        else
        {
            floatingMenu.shiftY +=
                floatingMenu.hasElement
                ? de.clientHeight
                : document.body.clientHeight;
        }
    }
}
floatingMenu.calculateCornerX = function()
{
    if (floatingMenu.targetX != 'center')
        return floatingMenu.shiftX + floatingMenu.targetX;
    var width = parseInt(floatingMenu.menu.offsetWidth);
    var cornerX =
        floatingMenu.hasElement
        ? (floatingMenu.hasInner
           ? pageXOffset
           : document.documentElement.scrollLeft) +
          (document.documentElement.clientWidth - width)/2
        : document.body.scrollLeft +
          (document.body.clientWidth - width)/2;
    return cornerX;
};
floatingMenu.calculateCornerY = function()
{
    if (floatingMenu.targetY != 'center')
        return floatingMenu.shiftY + floatingMenu.targetY;
    var height = parseInt(floatingMenu.menu.offsetHeight);
    // Handle Opera 8 problems
    var clientHeight =
        floatingMenu.hasElement && floatingMenu.hasInner
        && document.documentElement.clientHeight
            > window.innerHeight
        ? window.innerHeight
        : document.documentElement.clientHeight
    var cornerY =
        floatingMenu.hasElement
        ? (floatingMenu.hasInner 
           ? pageYOffset
           : document.documentElement.scrollTop) +
          (clientHeight - height)/2
        : document.body.scrollTop +
          (document.body.clientHeight - height)/2;
    return cornerY;
};
floatingMenu.doFloat = function()
{
    // Check if reference to menu was lost due
    // to ajax manipuations
    if (!floatingMenu.menu)
    {
        menu = document.getElementById
            ? document.getElementById(floatingMenuId)
            : document.all
              ? document.all[floatingMenuId]
              : document.layers[floatingMenuId];
        initSecondary();
    }
    var stepX, stepY;
    floatingMenu.computeShifts();
    var cornerX = floatingMenu.calculateCornerX();
    var stepX = (cornerX - floatingMenu.nextX) * .07;
    if (Math.abs(stepX) < .5)
    {
        stepX = cornerX - floatingMenu.nextX;
    }
    var cornerY = floatingMenu.calculateCornerY();
    var stepY = (cornerY - floatingMenu.nextY) * .07;
    if (Math.abs(stepY) < .5)
    {
        stepY = cornerY - floatingMenu.nextY;
    }
    if (Math.abs(stepX) > 0 ||
        Math.abs(stepY) > 0)
    {
        floatingMenu.nextX += stepX;
        floatingMenu.nextY += stepY;
        floatingMenu.move();
    }
    setTimeout('floatingMenu.doFloat()', 20);
};
// addEvent designed by Aaron Moore
floatingMenu.addEvent = function(element, listener, handler)
{
    if(typeof element[listener] != 'function' ||
       typeof element[listener + '_num'] == 'undefined')
    {
        element[listener + '_num'] = 0;
        if (typeof element[listener] == 'function')
        {
            element[listener + 0] = element[listener];
            element[listener + '_num']++;
        }
        element[listener] = function(e)
        {
            var r = true;
            e = (e) ? e : window.event;
            for(var i = element[listener + '_num'] -1; i >= 0; i--)
            {
                if(element[listener + i](e) == false)
                    r = false;
            }
            return r;
        }
    }
    //if handler is not already stored, assign it
    for(var i = 0; i < element[listener + '_num']; i++)
        if(element[listener + i] == handler)
            return;
    element[listener + element[listener + '_num']] = handler;
    element[listener + '_num']++;
};
floatingMenu.init = function()
{
    floatingMenu.initSecondary();
    floatingMenu.doFloat();
};
// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSecondary = function()
{
    floatingMenu.computeShifts();
    floatingMenu.nextX = floatingMenu.calculateCornerX();
    floatingMenu.nextY = floatingMenu.calculateCornerY();
    floatingMenu.move();
}
if (document.layers)
    floatingMenu.addEvent(window, 'onload', floatingMenu.init);
else
{
    floatingMenu.init();
    floatingMenu.addEvent(window, 'onload',
        floatingMenu.initSecondary);
}
//-->
</script>
Make these changes:
  • Replace mybloggertricks with your Twitter username
     4.  Save your widget and you are almost done!
PS: If you have already added the Google +1 Button somewhere in your blog then you may skip step5.
    5.  Now Go To Blogger > Design > Edit HTML   and search for this,
</head>
Just above it paste the following code,
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
     6.  Save your template and say Bingo!
Visit your blog to find it hanging to the left. I hope you liked it as much as MBT had fun creating it. Peace and blessings! :)

Credits:

Web designers, developers and Blog owners are requested to attach attribution to MBT blog if they wish to share this tutorial with their readers. Any copyright violation will be reported straight to DMCA. Kindly respect the efforts.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

70 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. nice widget mohd_
    Sorry for disturbing on this post,but plz help me.
    i have successfully moved my domain www.krackoworld.blogspot.com to www.krackoworld.com and now plz tell me what to do with my webmaster account,i want to redirect all old pages to new one. and also tell me about htaccess and 301 redirect.

    karan chauhan
    www.krackoworld.com

    ReplyDelete
  2. @ Mohmd, once I implement the above code, will my initial like, tweet and +1 data disappear? I mean if I had like several 100s of likes, after I implement your trick will it roll to zero? Also pl do check your previous counter that I implemented. The +1 section slow load compared to others (tweeter, like) is a not normal. Pl do check my code and suggest a remedy. thanks

    ReplyDelete
  3. @karan
    I will write a detailed post on it brother within two days. Please keep in touch. That will be more helpful.


    @Felix
    Your all social share buttons are connected to servers. they are programmed so that even if you replace them with another type, the counts will still remain there as they are continuously saved on servers. You may keep a backup of old buttons though.

    The +1 button is loading slow on all templates. Google will solve this issue soon. You can happily make the changes.

    ReplyDelete
  4. The facebook icon does not load on my blog. Please look at it http://www.cecacat.com

    ReplyDelete
  5. Could you help me understand why this happens?

    http://img836.imageshack.us/img836/1772/20110630134539.jpg

    I installed the widget in 2 blogs, in 1 happened the same but I changed the page element location and now its fine, on this other blog I tried change to many places but is not working :S

    ReplyDelete
  6. @Paul

    Copy paste the code again or take it from this page-> Counter buttons

    @pakcompany
    My pleasure brother.

    @dav7
    Are you using it one the new blogger template designer templates? If yes then it wont work.

    ReplyDelete
  7. hi,
    mine didn't work.why is it happened?
    http://pyejal.blogspot.com/

    ReplyDelete
  8. @pyejal

    At present the widget is not compatible with Blogger template Designer templates and works with custom templates only.

    ReplyDelete
  9. I'm sad. Your nice trick is not working in my blog. http://mobimas.blogspot.com

    ReplyDelete
  10. Hi Mohammad, how can i add this plugin only on the post pages?

    I also really apreciate to have it on the right of the main column :)

    Thanx

    ReplyDelete
  11. any way to add this on the right hand side? tried switching left under #floatdiv to right and other places where it says left to right, but it ends up with the lines in between the buttons too far to the right and not in the middle. Help please...

    ReplyDelete
  12. its going so fast
    thats the problem

    ReplyDelete
  13. hi,mine is working
    but how to edit the position of the widget??
    check out
    http://dhimasadjiep.blogspot.com/
    its work but why the position is right there??
    please help

    ReplyDelete
  14. pisition is not good
    guys plzzzz help me

    ReplyDelete
  15. @Do Lam

    Yes pal this sliding one does not works with new blogger designer templates though you can try the fixed ones.

    @zombie

    You may kindly read this post:
    http://www.mybloggertricks.com/2011/01/how-to-show-and-hide-widgets-in-blogger.html

    @Scipio
    For doing that kindly do this:

    Search for targetX:

    Set its value to 900 and see if it fits to right perfectly. You can increase or decrease the value 900.

    @pursuite
    YOu are using the new blogger template and this widget does not work with it. Kindly use this widget:
    http://www.mybloggertricks.com/2011/04/add-floating-facebook-like-and-retweet.html

    @dadjie @pursuite

    For doing that kindly do this:

    Search for targetX:

    Set its value to 900 and see if it fits to right perfectly. You can increase or decrease the value 900.

    ReplyDelete
  16. Hi Mohammad, thanx for your reply !!!

    Do you know how ca i fix the position of the floating bar on chrome and ie? unfortunately is not align in the same way of firefox :(

    thank you

    ReplyDelete
  17. how to change the box color to white?

    ReplyDelete
  18. floating bar working with my page kundanlohar.blogspot.com
    but it is going downwards always and tweet option is not able to show becoz of it is rolling out downwards and when page ends it is still going downwards
    not working perfectly please help

    ReplyDelete
  19. Hi, can you share the code to add the social media buttons you have placed at the top of your posts? Thanks!

    ReplyDelete
  20. nevermind, I found your other post. Thanks!

    ReplyDelete
  21. sir how can i put it on the left center.. cause it show on the left but but it is not in the middle.. this blocks the two lower buttons the [0] and [tweet button]. help.. thanks

    ReplyDelete
  22. sir follow up question.. can i put on it to the left most part of my blog cause the floating icons pass over some of the content of my blogpost.. thanks

    ReplyDelete
  23. how to make blockquote like yours?

    ReplyDelete
  24. Request: OK, it works...so now how do I block/hide it on other sites?

    Reasoning: The floatie covers content if you don't have the browser window at least an extra couple hundred pixels wider than the main document body.
    Some people might not have the screen real estate to do that, and while I do technically have the space, I don't keep my browser window maximized (don't like having huge blank borders).

    ReplyDelete
  25. just want to ask, looks like this code error on 3 colums blog, could you please check it http://isengdude.blogspot.com

    ReplyDelete
  26. @isengdude
    if i scroll down, it always go down and nver go up

    ReplyDelete
  27. HI,

    Like it. But I want to see the faces of the person who liked my blog in facebook . Is it possible ?

    ReplyDelete
  28. This is just outstanding!
    I found your blog just awesome so the post is.
    One question. Can I set the starting and the ending point of Slide like wordpress plug-in?

    ReplyDelete
  29. Thanks man .... Thanks a lot

    www.tamilsms.net

    ReplyDelete
  30. How can I pot it down within the message on the left side fixed Can you help me please

    ReplyDelete
  31. now am more interested in how you put those 5 share buttons below every post?

    ReplyDelete
  32. floating bar working in my blog vtrickz.blogspot.com
    but it is going downwards always and tweet and +1 option is not able to see coz it is rolling out downwards
    plz help me. .

    ReplyDelete
  33. It works perfectly well, thanks. The only problem is that in the post pages i have the sidebar hidden, so the buttons don't appear (at least i guess that's the reason) Do you know if there is a way to include them anyway?

    Thank you!!!

    ReplyDelete
  34. Well done. Thanks!

    I had to do some modification so that it matches to my blogger layout (size, scrolling speed, backgound), but now it works just perfect ;-)

    You can find it at my car tuning blog, just take a look to see it working:

    http://miatastyle.blogspot.com/

    ReplyDelete
  35. thanks for toritorial, visit me back at http://alizzahfirtibatilummah.blogspot.com/

    ReplyDelete
  36. the widget came to right side please help

    ReplyDelete
  37. Thanks for Sharing i wanna put that on my blog www.ksalue.blogspot.com

    i dont have a twitter account i just want people to share on twitter and FB and G+ so i dont know what to put on the twitter thing since i dont have a twitter account

    and i cant find the html for widgets ? >.<"

    when i press on the widget hing tells to put url only

    ReplyDelete
  38. hi

    how to move it to the right position
    my blog is in arabic !!!!

    ReplyDelete
  39. hi mohamed .. i m riyaz

    i just did this process .. the floating bar is below the page its not locating at the current side of the post pls help me wit this

    ReplyDelete
  40. Hi, i have a problem with this html code, like you can see on my website : http://www.e-s-calope.com/ the count of like is not show, do you know why ?
    Thank you (sorry for my bad english!)
    ps : You have a great website !

    ReplyDelete
  41. hi,
    thx for the widget.
    Could you tell me how to make the widget floating like in you blog... I mean at the same position whatever the screen resolution and width.

    ReplyDelete
  42. AWSUM POST BUT MY SLIDE BAR IS APPEARING ON THE RIGHT HAND SIDE OF ALL POST WHAT TO DO I WANT IT TO APPEAR ON LEFT HAND SIDE PLZ SUGGEST HELP:)

    ReplyDelete
  43. Hi Mohammad, how do I add this floating share button on each of my post separately?

    ReplyDelete
  44. hi admin..hope this counter is not working properly!!
    FB like is only working correctly..remaining 2 will take the url of home page itself!!

    ReplyDelete
  45. IN MY BLOG ITS NOT SHOW ITS DOWNTO THE SCREEN!!

    ReplyDelete
  46. Thanks for posting this. I see the widget but it is not on the far left and is covering the writing in my blog. Also, it is moving at the bottom too quickly to be seen floating. Any suggestions to fix are appreciated. thanks

    http://newhampshirerestaurantreviews.blogspot.com/

    ReplyDelete
  47. This is very good social bookmark widget. I think this widget will make users interest to share a post.

    ReplyDelete
  48. hello

    how change widget's position?

    ReplyDelete
  49. nice but tell me that is not coming slide with the page help me plze

    ReplyDelete
  50. Hi Mohammad,

    Got it to work nicely.
    Pity the images are outside links so they cannot be resized uniformly, they differ just enough to be noticed. But hey, who's complaining.

    When I'm done tweaking my theme I probably won't be back as often but I look forward to all your tips and tricks in the mail.

    Thanks and good luck,

    Pieter

    ReplyDelete
  51. It's Really Great Web site thanks Sir.
    I Found Great Information by your site which was outbox in my mind..

    ReplyDelete
  52. sir.in my blog this widget is shown on right side i want to show it left side.....Pls help me.....
    www.pintu1313.blogspot.in

    ReplyDelete
  53. hi
    have a look at the blog
    as u can see i just have facebook share button,but i just want like and share both buttons or just one i.e like button
    so wt should i do
    regards
    http://desktophqwallpapers.blogspot.com/

    ReplyDelete
  54. Hi,

    Nice post and thanks a lot! :-)
    But maybe it's a good idea to ad a example of how it will look for people who's English isn't very good. Like mine for example.

    please have a look at my blog,

    Mel

    photography-do.blogspot.nl

    ReplyDelete
  55. mine is up there but you can't get to it when I scroll down it keeps scrolling and i can't see it.

    ReplyDelete
  56. Opps I forgot to add my site its:
    theliteraryhoarders.blogspot.com

    ReplyDelete
  57. Salam! please i want to ask from you all expert people that please tell me how i have to publish my website that people may visit my blog and i get good response in advertise account in chitika. please tell me urgent about how to marketing???

    ReplyDelete
  58. @Anonymousi want to know how did you convert yout domain from .blogspot to .com

    ReplyDelete
  59. I have sucesssfully added the Floating Social share Counters to Blogger but the problem is that the bar keeps on moving when the page is scrolled. I want to fix this. Please help me

    ReplyDelete
  60. Hi Mohamed,
    I'm facing a serious problem with this, i applied all the steps as you mentioned before
    but!
    http://s10.postimg.org/paj4iedex/problem.jpg
    the gadget box still appearing empty! "i named it hide1" and the other on the left hide2"
    i tried to hide it from the template but when i did it the floating box just disappeared!
    What should i do ? :(

    ReplyDelete
  61. Hello I put this widget on my blog and had some questions.

    First i see where you can change the targetX: and targetY: values to move the location, however you can only change the position further to the right or down. When I enter a negative value it doesn't go left or up. Is there anyway to make it go up?

    Second question is on my site I added this as a widget to my layout but in order to get it correctly placed on my page I need the widget to be placed at the top of my Sidebar on the left side. In doing this there is left a small black box as somewhat of a "placeholder". Is there anyway to Hide only that black box in my sidebar without hiding the widget itself?

    My blog is geekfitnessnetwork.blogspot.com

    ReplyDelete
  62. Thanks for this great tricks. I wonder to to make the floating sharing button more close to the edge of my body post. It is awkward to place it far from the edge. help..

    ReplyDelete
  63. how can i fixed it in bottom in horizantal style..???

    ReplyDelete