HOW TO INSTALL FACEBOOK POPOUT LIKEBOX
Step 1: Adding Jquery JavaScript Plugin
First you need to have a jQuery Plugin in your Blog template.This Step is Required, If your Blog already have this plugin then Ignore this Step.If your Blog Don’t have this Plugin, Install the jQuery Plugin.Add the below line of code before </head> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Step 2: Adding Widget Code
It’s Simple Replace my facebook page URL below with the URL for your page.
<script type="text/javascript">/*<![CDATA[*/jQuery(document).ready(function() {jQuery(".w2bslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});/*]]>*/</script><style type="text/css">.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuxNd9zX5yg-4rwvkD9CNFx9TlpVse4jgUQnh5taZqU7s5LdZU5IIu2g6mZw6Uc1i_kPRZfVHkS87G-p_S1uc5dVqfRNLlLwpEuJs3iHA3K5eMSlMCNgpp7dMBwNSvCJDBnBYqCQ2IiUKA/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%;}.w2bslikebox div{border:none;position:relative;display:block;}.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}.w2bslikebox span a{color: gray;text-decoration:none;}.w2bslikebox span a:hover{text-decoration:underline;}</style><div class="w2bslikebox" style=""> <div> <iframe src=" http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FBlogotricks&width=292&height=590&colorscheme=light&show_faces=true&border_color&stream=true&header=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span><a href=" http://blogotricks.blogspot.com">Blogotricks</a></span> </div></div>
0 comments:
Post a Comment