Facebook jquery pop up for facebook like box widget for bloggers (or) website. Advantages this widget is to free space on the page. Because Facebook can prevent website normal as the box. Static Pop Out Facebook as soft box with jQuery effect of activation for the blogger, this is another cool control. Here I have added as the box with simple jQuery hover effect. See Facebook static plate to the right of the page and move the mouse over the plate with the frame, as is visible by sliding to the left.
Features:
1.) J-Query POP OUT On Mouse Hover.
2.) Facebook Awesome Big Fans Widget.
3.) Quick To Load And Easy To Install.
4.) Awesome, Simple, Stylish And Beautiful Designed Latest Widget.
5) You Can Also Add This On Website. (Feel Free To Ask How To Do This?)
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Edit HTMlL
4.) Now Press {CTRL+F} And Find </head>.
5.) Now Copy The Below Code And Paste It Before </head> .
6.) Click Save, Now Proceed To The Next Step.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<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: -249}, 500); });
});
</script>
8.) Click “Add A Gadget” Where You Want To Add It.
9.) Now Scroll To “HTML-JAVASCRIPT”
10.) Click “+” Icon To Add It.
11.) Now Copy The Below Code And Paste It To There.
12.) Leave The Title Empty.
13.) Click Save, Now You Are Done.
<style>img, a { border: 0; }#on {visibility:visible;}#off {visibility:hidden;}#facebook_div {width:245px;height: 260px;overflow: hidden;}#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:245px;height: 260px;position: fixed;right: -249px;}#facebook_right img {position: absolute;top: 70px;left: -35px;}#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}</style><div id="on"><div id="facebook_right" style="top: 30%;"><div id="facebook_div"><img src="https://1.bp.blogspot.com/-yUI3Og8Esko/TyywzMTqmsI/AAAAAAAABMs/z-tTK2uUS-0/s1600/Facebook.png" /><iframe src="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FEXEIdeas2010&locale=en_GB&width=245&connections=9&stream=&header=false&show_faces=0&height=260" scrolling="no"></iframe></div></div></div>
1.) Replace EXEIdeas2010 With Your Facebook FanPage UserName.
2.)Save And Enjoy…
3.) If You Want More Customization, Feel Free To Ask.
Thanks,,,Subscribe Our Newsletter To Get New Article Direct Into Your Inbox…
How do i add this thing for wordpress ?
Bro, This Site Only Covers Blogspot And Websites Not WordPress…
works for website Hassan?
Yeh, It Works For Websites Also…
Not working for web pages
please help
Use The Script In head Tag And The HTML In Body Tag…
Thanks for the tutorial is easy to understand and very useful
You Are Welcome…
Hi Muhammad Hassan i have added this widget but, this widget effects (stops sliding slider) on my existed Jquery slider. please tell me the solution for that.
http://www.idleindia.com this is my blog address.
Use The CSS One, It’s Best For Your Blog…
I’ve tested on website but it seems not working.
FYI, I put first part in Head and second part in Body. It can’t animate.
Can you please help? Thanks
Please Leave Your Page URL…
Here’s the url (blank site) http://www.kimlu.com/tes.htm
Please explain in more detail as I’m new to this. Thanks for the help
The Code Is Fine But The Official Hosted JQuery In No More Working. Use Your Own JQuery. Send Us E-Mail So We Will Send Your The JQuery File.
I can’t find your email address so here’s email wanrenda@yahoo.com
Thank you very much.
Check Your E-Mail Attachment…
I need permission to access. Am I too late? (still less than 24hours).
Thank you for your help. Really appreciate it.
Check Your E-Mail Again…
hasan its not working plz verify this
http://www.divyafashions.tk
You Are Not Using This Widget On Your Site…
hey i have tried it many times and get bored so i have removed the code ,now i am placing it plz check it.
First Add The Show Me Your Link Where It’s Not Working…???
No working. Please help me! The cod is a signature blogspot.
You Are Not Using Our Code, Please Add It And Then Leave Your Blog URL…???