Tuesday, 18 December 2012

Static Facebook Pop Out Like Box Widget For Blogger

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&amp;width=200&amp;height=290&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;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/-->

2 comments:

  1. I was able to use your code to make an updates rollover for my site

    I'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

    ReplyDelete
  2. thanx alot brotha... ive donr to get it. awesome.
    visit my blog : embuncreativeborneo.blogspot.com

    ReplyDelete