Saifudheen is a young Entrepreneur from Kerala, India who founded MakTal™. This blog aims at helping individuals and businesses with the knowledge he gained throughout his career. Like his facebook page to stay updated.

How to Add Floating Like Box on Your Website

Everyone wants to make their website stand better than others! This tutorial will help you add a floating like box on your website. Basically it is a Floating HTML DIV. You can include like box, subscription form or even ads in the floating DIV.

Floating Like Box DEMO

Before you get into the coding part, lets see the final result!
SEE DEMO

CODING Part

Now, lets do the coding! There is nothing complicated, its simple and easily customize to your needs.

HTML

You have to include the following scripts

  • jQuery – If you are using WordPress, you will not need to add it
  • FontAwesome – To implement close button

Place the following in the HEAD section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Now the content for floating box to be added to the BODY section. In the below code, I have added the code for facebook like box.


<span id="last"></span>
<div id="slidebox">
<a class="close"><i class="fa fa-times"></i></a>
<h6>Like us on facebook to stay updated</h6>
<!--code for like box-->
<div class="fb-page" data-href="https://www.facebook.com/SaifudheenMak" data-width="320" data-height="250" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/SaifudheenMak"><a href="https://www.facebook.com/SaifudheenMak">Mak</a></blockquote></div></div>
<!--end of code for like box-->
</div>

CSS

Now lets style the floating box

<style type="text/css">
body
{
	height:1000px;
	background:url('bg.png');
	margin:0; padding:0;
	font-family: 'Open Sans', sans-serif;
}
a
{
text-decoration:none;
}
#slidebox{
    width:320px;
    background-color:#fff;
    border-top:5px solid #E14D43;
   border-left:1px solid #E14D43;
   border-right:1px solid #E14D43;
   border-bottom:1px solid #E14D43;
    position:fixed;
    bottom:20px;
    right:-430px;
	/*-webkit-box-shadow: -3px -1px 7px -4px rgba(0,0,0,0.75);
-moz-box-shadow: -3px -1px 7px -4px rgba(0,0,0,0.75);
box-shadow: -3px -1px 7px -4px rgba(0,0,0,0.75);*/
	z-index:99999;

}
#slidebox p, a.more{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#555;
    margin:0;
}
a.more{
    cursor:pointer;
    color:#53A6A6;
}
a.more:hover{
    text-decoration:underline;
}
#slidebox h6 {
	font-size:15px;	
	
	margin-bottom:0;
	padding:8px 12px 8px 12px;
	margin-top:0;
	color:#37bc9f;
}
a.close{
    
    width:13px;
    height:13px;
    position:absolute;
    cursor:pointer;
    top:10px;
    right:10px;
	color:#3B3B3B;
}
a.close:hover{
    color:#202120;
}
.nav
{
position:fixed;
width:100%;
background:url('navbg.png');
padding:10px 0px;
border-bottom:1px solid #ccc;
}
.colhalf, .collast
{
width:50%; float:left;
}
.collast
{
vertical-align:middle;
}
.nav .collast a
{
padding:10px 20px;
background:#E14D43;
color:#fff;
position:absolute;
bottom:0;
right:0;
}
.container
{
width:80%;
margin:0px auto;
padding:100px 0px;
}
@media (max-width: 479px) {
	#slidebox {
		display:none;
	}
}
</style>

jQuery

Now lets do the magic to create the floating box with a small block of jQuery Code. You can place it before the closing tag of HEAD section.

<script type="text/javascript">
jQuery.noConflict();
(function($) {

$(function() {
	$(window).scroll(function(){

		var distanceTop = $('#last').offset().top - $(window).height();
		
		if  ($(window).scrollTop() > distanceTop)
			$('#slidebox').animate({'right':'20px'},300);
		else 
			$('#slidebox').stop(true).animate({'right':'-430px'},100);	
	});
	
	
	$('#slidebox .close').bind('click',function(){
		$(this).parent().remove();
	});
});

})(jQuery);
</script>

All set! You can insert forms, like box, call to action box or anything inside the floating HTML DIV. Play with HTML and CSS to change it to your needs.

Saifudheen is a young entrepreneur from the great India who founded MakTal™. He is a passionate designer, color lover, coder and knowledge giver ;)