Scrolling Facebook Popup Like Box Widget for Blogger

Scrolling Facebook Popup Like Box Widget for Blogger

50
data:blog.title
Facebook widget

We have already got many Facebook Popup widget which just popup every time when we visit pages. And some widgets designed to one time popup style thus a visitors don't feel annoy. Generally we use this widget to get more Facebook likes. So I just designed this Facebook Popup like box with scrolling effect, that means when you add this widget then it will appear with popup style and it will scroll top to bottom when you just move your mouse from top to bottom. And also included a closing option if visitor wish to close it instantly. So this is really bit unique concept and simply nice. In addition you can change the widget color according to your desire. Hope this widget you would like and help to increase more Facebook Fan.

     Live  Demo


               Fan Boxlike box


CSS Part of Scrolling Facebook Popup Like Box Widget

Step 1 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 2 Now Find this code </body> by pressing Ctrl + F

Step 3 Copy the code from below and Paste it  Before/above </body>


<style type='text/css'>

#bloggerspiceFBpop {
position:fixed !important; z-index:1001;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#bloggerspiceFBpop a.bsclose {
position:absolute; z-index:1001;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
/* Widget by www.bloggerspice.com */
</style>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).bind(&quot;load&quot;, function() {
// Animate Top
$(&#39;#bloggerspiceFBpop&#39;).animate({top:&quot;50px&quot;}, 1000);
// Widget by www.bloggerspice.com
$(&#39;a.bsclose&#39;).click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>

HTML Part of Scrolling Facebook Popup Like Box Widget

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.


<div id='bloggerspiceFBpop'>
<!-- Widget by www.bloggerspice.com Start -->
<center><b><a class="BloggerSpice">Don't Forget To Join With Our Community</a></b></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FBloggerSpice&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe></center>
<!-- Widget by www.bloggerspice.com End -->
<a class='bsclose' href='#'>&times;</a>
<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href=" http://www.bloggerspice.com/2013/05/scrolling-facebook-popup-like-box.html">Blogger Spice</a></center>
</div>

Customization

  • Change FEFEFE to get different color in widget. You can get the color code from Here
  • Change BloggerSpice this with your facebook id 

If you need any further help then just leave a comment below. 
Scrolling Facebook Popup Like Box Widget for Blogger
4 Stars stars - "Scrolling Facebook Popup Like Box Widget for Blogger" We have already got many Facebook Popup widget which just popup every time when we visit page...

Great work bro. It looks like old dish with new taste.

yeh right bro..but this widget is light weight so easy to load.

nice widget bro

Hello Mohammad, Are you now ready to write for my blog.
KB Tricks

Kulvir you have modified my tutorial and code without any link back to my site. I didn't expect it from you.

hi , how do i do if i want it to show only one time in 7 days

Hi Abdellah...the coding will be different and publishing soon with this option. thanks.

superb post Sir.I have created a widget generator for this widget on my blog.so,user can directly install this plugin on their blogs.
http://www.chillofyblogging.blogspot.in/2013/06/how-to-add-facebook-like-box-to-bogger.html
Let me know if it works for you.

Nice Post bro keep it up..
Facebook pop up like box is really help to gain more likes on Facebook page from our blog and social media now in these days very important to get more visitors from there

there's a problem with this widget , even if you click on like button it doesn't disappear , every time you have to close it , and this could make your reader leave your blog. any solutions ?

Abdellah this widget is not with timer that after 10 or 15 second it will disappear..every time you have to close it. I will release some with with timer.

Nice blog bro.. Impressive

Nice widget..thank you. Visit my Blog..
rpsampath.blogspot.com

is there any code..from that it will only appear when I enter for the first time..its poped up after each refresh which quite irritating for viewer..

and I have a question...can you provide any code form which I can prevent coping from my site..its important.. thanks :)

yeh this is another facebook widget that only appear once a time. I will develop soon.

And for prevention of copying you can disable right click on your blog by using Jquery code..

Hi bro, Is this must install jquery first?
because I have trouble with Installing jquery.
Reply to my email ahmadzakiaulia@gmail.com

Brother Ahmadzaki if you are already using similar Jquery file then you can remove the Jquery file from this Facebook widget code. Because using Double Jquery widget may not work.

Really i appreciate the effort you made to share the knowledge.The topic here i found was really effective to the topic which i was researching for a long time.youtube Likes

Thanks boss.This method helps in increasing the facebook likes in my blogger page.I really like thepost.Hope you will publish more article like this in future

hi Kishore..ur site is pretty good. and thanks for commenting.

thanks and really appreciate your comment

Do you have the code for this already? Thanks!

Hi Aimee I am trying to develop unique one. So it require time. Hopefully I would able to release soon.

how can i remove the Jquery file from this Facebook widget code.

Hi Meshy..this is the Jquery file

http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js

if you are using advance Jquery file then remove the whole like of with the above Jquery file.

nice widget......thanks for Sharing
keep sharing such wonderful articles
OEWAYS

Hello Mr Mohammad
thanks for your reply but i tried that already before i posted my concern..!!the issue is if i tried to remove the line "http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" the widget doesn't pop up..!!and my template is using "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js". The main issue is if i use the widget as it is it interfere with other features in my blog such as Slide show images become Static on a single image..!!hope you can help me out..!!thanks in Advance

Hi Daniel..I just check your site and found that more than 3 Jquery script already added in your template but not hosted on any other server. That's the reason it is creating problem. And obviously this widget would conflict with Slider due to different Integrated Jquery files.

Thanks Shakil for nice comment.

Sir can you help me with this code box that u have as ( Jquery-copyright bloggerspice.com-html ) i wish to make a code box in my blog where i can write my programs on java.
Help me with this sir please. I dont know what to search for this on google.

Sir I wanted to have a multilevel drop down menu for my blog. Right now i have static floating menu. Kindly help me with it also. My blog url : http://engineersevanigam.blogspot.com/

Hi Chahit..You won't find any copy of it over the net. I have created in by using PhotoShop CS6. Create something unique by using Photoshop software.

Please follow the below link to get the tutorial of Drop-down Label widget

http://www.bloggerspice.com/2013/01/create-beautiful-drop-down-label.html

Mr Mohammad Pls I Need your Help to make live demo widget I tried but I feel all the time my blog is www.kkiislamtnz.blogspot.com Thank for your help

Hi there actually I didn't understand what actually you want to say? Live Demo for widget or Live Demo button. If you need Live Demo button like mine then please follow the tutorial from below link-

http://www.bloggerspice.com/2013/06/css-live-demo-or-download-button-with.html

I Mean My Brother I want to Connect Blog with Facebook Page and make it look Nice like yours brother Thanks

Brother Ghalib Nassor Monero Assalamu alaikum..I have read your email also..Actually you have to do some work like wallpaper, Logo+Images selection. After that you can add it into Facebook profile. You given Facebook profile id was not working. Please send me again. I will instruct you that how to beautify it. Thank you.

Mohammad Fazle Rabbi thanks for the good work. but please check what happen at http://kirchhoffittelecom.blogspot.com/

then help me sort out brother.

Hi Julius..I think your Facebook id is not correct. Instead of facebook.com%2FKirchhoffs add your whole facebook page link (e.g www.facebook.com/BloggerSpice). I hope it will work now.

Thanks Bro it worked. but the line "get this at BloggerSpice is not visible. you would like it to be there please assist

change this code #3B78CD with different one..it will visible. :)

thank you it is done now. hope to be back for more tips

Actuall i was searching for facebook popup widgets and you found on the top of google. Thanks for sharing. I really appreciate your work. Mybloggerstuff

Assalamualikum bhai.popup likebox will be appearing backside of the posts and content how can i manage it exactly frontside of the whole ccontent please reply soon

Bro you are using floating menu..this one may be making script conflict. Delete the js file first.
http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'>

and then add the HTML part above b:skin or closing Head. Hope it will work now. Thanks

great i am also using this this is great.

hello may you help me how to create google adsense?

Its Great man ,,,
http://SidRehmani.blogspot.com
Hack Articles

Thanks Aziz for dropping your comment. :up

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *