Tech Thursday: How to Add a Floating Facebook Tab to your Blog!

Today I am linking with the fabulous Teaching Trio for their Technology Thursday linky!

I have just added a floating Facebook tab to my blog and thought some of you may want to know how to do this :)

1. Log into your blogger account

2. Go to Layout --> Add a Gadget (ensure you add a gadget to your right sidebar)

3. Select HTML/Javascript

4. Copy the following code, replacing the facebook address highlighted in pink with your own:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">

</script> <script type="text/javascript"> //<!-- $(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .floatinglikebox{background: url("http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjizeK9c6R1Dt7JjAvoUipjzUPBMZVfiLhtbmc8VRNxSQdXTDDGiTFzR-QIsK2GpgHRymfE1UDYAme4TgS5kDxS9afWZUQkFQO8mq_cZUNLGTX9j1VFcj8PnoOjOjBjhojA1LIRTdnd-1o/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:10%;} .floatinglikebox div{border:none;position:relative;display:block;} .floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .floatinglikebox span a{color: #808080;text-decoration:none;} .floatinglikebox span a:hover{text-decoration:underline;} </style><div class="floatinglikebox" style=""> <div> <iframe src="//www.facebook.com/plugins/likebox.php? href=https://www.facebook.com/mmegauthiersfrenchclass&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"> </iframe></div></div>

The standard tab comes with a blue background. However, you can create your own tab (41x136px), save your image on photobucket or similar and replace the above image link highlighted in blue with your own image link :)

Enjoy your floating facebook tab and don't forget to check out other bloggers' tech tips by clicking on the button below: