How to implement “Floating Facebook Sidebar”

Standard

These days adding Facebook like box in any website using Facebook Social Plugins is common to increase number of likes to your page. But, it also occupies a good amount of space when showing it with faces, streams etc and user might need to scroll through your page for this. If you want to stay there in your page but, you don’t want to occupy the area by it, here is a solution with jQuery based Floating Facebook Sidebar.

Facebook Floating Sidebar

Facebook Floating Sidebar (example)

In this proposed solution, I’m going to quickly show you how to place a Facebook Like box hidden at the right of the browser window with a visible image to hover. On hover (mouse over), the Facebook like box will reveal itself for the visitors of your site and hide itself when the mouse is moved out from the visible image. You can take this solution to create plugins, widgets anything that you like.

Required assets you need for this are as follows:

1. jQuery library – you can always pull latest jQuery library from Google CDN or use your local copy. I prefer to use Google CDN as it will save one HTTP call to my web server. I like to save as many HTTP calls to my server as it can cost heavily in the long run.

2. An image that will be visible to user – I used the big “facebook” image for the same. You can use your own image and with custom dimension. If you are going to use a custom image, make sure that the guided code is adjusted accordingly.

Now, let’s begin!

(A) Add the following style information within the <head></head> section (if you are using any CMS with template, add this in the header file or section). Yes, CSS should be placed in the <head> section. You can create an external file too and refer it in the <head> section.

.fb-float-likebox {
  background: url("//1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/
                s150/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;
  display: block;
  float: right;
  height: 270px;
  padding: 0 5px 0 46px;
  width: 245px;
  z-index: 99999;
  position:fixed;
  right:-250px;
  top:20%;
}
.fb-float-likebox div {
  border:none;
  position:relative;
  display:block;
}
.fb-float-likebox span {
  bottom: 12px;
  font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;
  position: absolute;
  right: 6px;
  text-align: right;
  z-index: 99999;
}
.fb-float-likebox span a {
  color: #808080;
  text-decoration:none;
}
.fb-float-likebox span a:hover {
  text-decoration:underline;
}

Note: You can also save “w2b_facebookbadge.png” in your local web server and refer to it from the path that you have stored it.

(B) Write the following HTML code in the <body> section, anywhere you like:

<div class="fb-float-likebox">
  <div>
    <iframe src="http://www.facebook.com/plugins/
     likebox.php?href=http%3A%2F%2Ffacebook.com%2F YOUR_FACEBOOK_FANPAGE_NAME&width=245&
     colorscheme=light&show_faces=true&
     %20connections=9&stream=false&header=false&height=270"
     style="background: #fff; border: medium none; height: 270px;
     overflow: hidden; width: 245px;" frameborder="0" scrolling="no"></iframe>
  </div>
</div>

Don’t forget to replace YOUR_FACEBOOK_FANPAGE_NAME with the actual Facebook page name that you have. :)

(C) As I mentioned earlier, load jQuery library from Google CDN before the line </body> (all JavaScripts should be loaded at the page bottom) as follows:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

As you may also work with other JavaScript libraries in the same project other than jQuery, there is a possibility to have a conflict between jQuery and other libraries. To avoid the conflict, write the following JavaScript just after you load the jQuery from Google CDN:

<script>jQuery.noConflict();</script>

Finally, write the following JavaScript snippet to activate the Facebook like area with slide-in and slide-out effect (you can also store in an external JavaScript file and refer it from there):

<script type="text/javascript">
jQuery(document).ready(function ($) {
    $(".fb-float-likebox").hover(function () {
        $(this).stop().animate({
            right: "0"
        }, "medium");
    }, function () {
        $(this).stop().animate({
            right: "-250"
        }, "medium");
    }, 500);
});
</script>

That’s all folks. Save the page, load it in your favorite browser and see this thing in action. You can use this concept to create any floating boxes with effects. Share your comments towards what you think on this. I love jQuery. Made my life simple. :)

Happy reading!

About these ads

11 thoughts on “How to implement “Floating Facebook Sidebar”

  1. Thank you very much for your tutorial. Now I want to get a bottom bar on my site and I do not know how. I want to put my trustwave certificate and godaddy ssl certificate at the bottom of the page and have it stay at the bottom right as the user scrolls around the page. It would even be nice to be able to display some credit card images too. Please let me know how to do it.

    • Hi James – Thank you for your time to go through the tutorial and I’m glad that it helps you in some way. Now, please let me know what exactly you want? A similar floating box from bottom of the page or something else? Thanks!

      • Well if you look at my site In the sidebar right now I have two html graphics plus credit card graphics in the side bar. I want to have these images at the bottom left of the page at all times. It would be very nice to be able to put them in a nice little column. Kind of like this image have them just floating down there somewhere.

        http://tinypic.com/r/rruv49/5

        I think it would look a lot nice then having on the sidebar.

I will be happy to answer your queries

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s