To install pop out Facebook Like Box
See DEMO http://newitechworlds.blogspot.com/
1. Go to your blogger Layout page
2. Add new Gadget
3. Select HTML/JavaScript
Copy Past Below code and save.
Note: Change Red Colored text with your facebook fan page iframe.
How to get iframe code?
1. Open http://developers.facebook.com/docs/plugins/
2. Chose like box.
3. Insert facebook page url.
4. Set width="200" height="290"
5. Remove Mark from Show Stream and Show Header.
6. Click on Get code.
7. You find four option HTML5,XFBML,IFRAME and URL.
8. Choose IFRAME.
9. Copy code and past at the Red Marked Text.
Now You find pop out like box on your page.
<!-- Static Facebook Pop Out Like Box Widget For Blogger @ http://newitechworlds.blogspot.com/-->
<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); }); });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4l4RwRhsFzelGuwLHcM29hYvlq5rRCoh9LahrKJNFi4oPuQ6Nlgp4X8zLJ_pt2Fnzr907HEFmxPxURHn-_ATAqV-R0oo4-MJ3SNoDaLGZ7eQ_xulCbZZnckPm_pyK50wTHFNF-79cOEA/s1600/facebook-icon.png" alt="" /><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnewitechworlds&width=200&height=290&show_faces=true&colorscheme=light&stream=false&border_color&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:290px;" allowtransparency="true"></iframe>
<br><a href="http://widgetsites.blogspot.com/2012/12/static-facebook-pop-out-like-box-widget.html/">Get This</a></div></div></div>
<!-- Static Facebook Pop Out Like Box Widget For Blogger @ http://http://widgetsites.blogspot.com/-->
See DEMO http://newitechworlds.blogspot.com/
1. Go to your blogger Layout page
2. Add new Gadget
3. Select HTML/JavaScript
Copy Past Below code and save.
Note: Change Red Colored text with your facebook fan page iframe.
How to get iframe code?
1. Open http://developers.facebook.com/docs/plugins/
2. Chose like box.
3. Insert facebook page url.
4. Set width="200" height="290"
5. Remove Mark from Show Stream and Show Header.
6. Click on Get code.
7. You find four option HTML5,XFBML,IFRAME and URL.
8. Choose IFRAME.
9. Copy code and past at the Red Marked Text.
Now You find pop out like box on your page.
<!-- Static Facebook Pop Out Like Box Widget For Blogger @ http://newitechworlds.blogspot.com/-->
<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); }); });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4l4RwRhsFzelGuwLHcM29hYvlq5rRCoh9LahrKJNFi4oPuQ6Nlgp4X8zLJ_pt2Fnzr907HEFmxPxURHn-_ATAqV-R0oo4-MJ3SNoDaLGZ7eQ_xulCbZZnckPm_pyK50wTHFNF-79cOEA/s1600/facebook-icon.png" alt="" /><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnewitechworlds&width=200&height=290&show_faces=true&colorscheme=light&stream=false&border_color&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:290px;" allowtransparency="true"></iframe>
<br><a href="http://widgetsites.blogspot.com/2012/12/static-facebook-pop-out-like-box-widget.html/">Get This</a></div></div></div>
<!-- Static Facebook Pop Out Like Box Widget For Blogger @ http://http://widgetsites.blogspot.com/-->
I was able to use your code to make an updates rollover for my site
ReplyDeleteI'm still making it look pretty, but I have the basic functionality thanks to you
I just wanted to mention it, so you knew what you did was helpful
unlocktheworkshop.com if you want to see it in action
thanx alot brotha... ive donr to get it. awesome.
ReplyDeletevisit my blog : embuncreativeborneo.blogspot.com