Facebook Pop out floating Like Box with smooth Jquery Hover Effect

With the advent of Jquery, the level of interaction by webpage using events has been tremendously increased and web pages had become very pleasing to read. Thanks to the Jquery Events.

With the use of Jquery Event, I had developed Facebook pop out like box with smooth Jquery Hover Effect.
The facebook like box will opt out when an user just hover on floating floating Facebook icon. It will look like the following picture. 

  

Add Facebook like Widget on Blogger

 Just follow the steps:
1. Log in to your Blogger Dashboard, go to Design >> Edit HTML
2. Check the “Expand Widget Templates” box
3. Search (CTRL + F) for this tag:

 </head>

4. Add the following code just before/above </head> tag:

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

Important Note : If you have previous versions of jquery already in your HTML code, The widget will not work. 

So to avoid this, Search (CTRL + F) for “jquery.min”, you can find already installed jquery versions like the following

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

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

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

These all are previous versions that you can find, If you find any of these blindly remove the code or comment it.


5. Save the Template.
6. Now go to Design >> Page Elements >> Add a new Gadget >> Choose HTML/JavaScript and in the HTML box, paste the code below:

<div id="fbplikebox" style="display: none;">

<div class="fbplbadge"></div>

<iframe width="320" height="240" style="border: none; overflow: hidden; width: 250px; height: 250px; background: #FFFFFF;" src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Flivepositiveway&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

<a style="font-family: arial, sans-serif; font-size: 9px; color: #999;" title="get this facebook pop out flaoting like box" href="http://www.theprogrammersguide.com/facebook-pop-out-floating-like-box-jquery-hover-effect" target="_blank">

Get this Facebook Widget for Blogger</a>

</div>

7. You should replace your Facebook Fan Page URL 

The above code will get my facebook fan page, You have to replace it with your page.

So Find the following in the above code

https%3A%2F%2Fwww.facebook.com%2Flivepositiveway

and Replace it with your facebook fan page username. You are now done.

Enjoy your Blog with Facebook like pop up box.!
If you have any problems in this Do let me know!!
Please leave your valuable comments for me to improve more.... :))))))))