How to add Floating Facebook Like Box to your wordpress blog

codefap floating facebook like box

As you can see in the image as well as on my blog, there is a floating facebook like box. If you would like to have this on your blog then follow these instructions :

  • Copy the code below, And just replace ‘codefap‘ on line 17 with your Facebook page username.

[html]
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".codefapfacebooklikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.codefapfacebooklikebox{background: url("http://codefap.com/wp-content/uploads/2012/08/fb-codefap-right-omkar-bhagat.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:19%;}
.codefapfacebooklikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;}
.codefapfacebooklikebox span{bottom: 4px;font: 10px "arial",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.codefapfacebooklikebox span a{color: gray;text-decoration:none;}
.codefapfacebooklikebox span a:hover{text-decoration:underline;}
}
</style>
<div class="codefapfacebooklikebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fcodefap&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=260" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span><a href="http://codefap.com/2012/08/how-to-add-floating-facebook-like-box-to-your-wordpress-blog"> Get this Widget</a></span>

</div>
</div>
[/html]

  • Go to your WordPress Admin Dashboard > Theme Settings > Open Header.php
  • Find (using CTRL+F) this keyword:

[code] </head> [/code]

  • Just above that paste the code which you have copied.
  • Save the file.
  • Check your blog and Bingo !! Its done !!

Its not Displaying?

  • If its not working, try adding this code above </head>>

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

  • If its still not working, feel free to comment below.

Leave a Reply