Scrolling Facebook Popup Like Box Widget for Blogger

Scrolling Facebook Popup Like Box Widget for Blogger

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;
margin:0px 0px 0px -182px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
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);
#bloggerspiceFBpop a.bsclose {
position:absolute; z-index:1001;
font:bold 16px Arial, Sans-Serif;
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);
/* Widget by */
 <script src='' 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
$(&#39;a.bsclose&#39;).click(function() {
return false;

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 Start -->
<center><b><a class="BloggerSpice">Don't Forget To Join With Our Community</a></b></center>
<iframe src="//;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 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="">Blogger Spice</a></center>


  • 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. 
Ankit Singla says: 5/30/2013

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

BloggerSpice says: ADMIN 5/30/2013

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

Unknown says: 6/02/2013

nice widget bro

Kulvir Singh says: 6/03/2013

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

BloggerSpice says: ADMIN 6/04/2013

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

lio says: 6/04/2013

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

BloggerSpice says: ADMIN 6/05/2013

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

Unknown says: 6/12/2013

superb post Sir.I have created a widget generator for this widget on my,user can directly install this plugin on their blogs.
Let me know if it works for you.

Rizwan says: 6/14/2013

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

lio says: 6/14/2013

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 ?

BloggerSpice says: ADMIN 6/15/2013

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.

Anonymous 6/22/2013

Nice blog bro.. Impressive

Pradeep Sampath says: 6/24/2013

Nice widget..thank you. Visit my Blog..

Unknown says: 7/02/2013

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 :)

BloggerSpice says: ADMIN 7/02/2013

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..

azax31 says: 7/03/2013

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

BloggerSpice says: ADMIN 7/04/2013

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.

Social Media says: 7/04/2013

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 Likes

Anonymous 7/12/2013

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

BloggerSpice says: ADMIN 7/13/2013

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

BloggerSpice says: ADMIN 7/13/2013

thanks and really appreciate your comment

LoveAimeeG says: 7/19/2013

Do you have the code for this already? Thanks!

BloggerSpice says: ADMIN 7/19/2013

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

Daniel & Neema says: 7/21/2013

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

BloggerSpice says: ADMIN 7/21/2013

Hi Meshy..this is the Jquery file

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

Unknown says: 7/31/2013

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

Daniel & Neema says: 8/11/2013

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 "" the widget doesn't pop up..!!and my template is using "". 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

BloggerSpice says: ADMIN 8/17/2013

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.

BloggerSpice says: ADMIN 8/17/2013

Thanks Shakil for nice comment.

Chahit Toor says: 8/30/2013

Sir can you help me with this code box that u have as ( Jquery-copyright ) 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.

Chahit Toor says: 8/30/2013

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 :

BloggerSpice says: ADMIN 8/31/2013

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.

BloggerSpice says: ADMIN 8/31/2013

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

Unknown says: 9/11/2013

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

BloggerSpice says: ADMIN 9/11/2013

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-

Unknown says: 9/11/2013

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

BloggerSpice says: ADMIN 9/11/2013

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.

Unknown says: 10/22/2013

Mohammad Fazle Rabbi thanks for the good work. but please check what happen at

then help me sort out brother.

BloggerSpice says: ADMIN 10/23/2013

Hi Julius..I think your Facebook id is not correct. Instead of add your whole facebook page link (e.g I hope it will work now.

Unknown says: 10/23/2013

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

BloggerSpice says: ADMIN 10/23/2013

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

Unknown says: 10/23/2013

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

Santosh says: 12/02/2013

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

Unknown says: 6/22/2014

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

BloggerSpice says: ADMIN 6/22/2014

Bro you are using floating menu..this one may be making script conflict. Delete the js file first.' type='text/javascript'>

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

SK says: 7/31/2014

great i am also using this this is great.

second tv says: 8/17/2014

hello may you help me how to create google adsense?

Asad Abbas says: 12/27/2014

Its Great man ,,,
Hack Articles

Aziz says: 3/22/2016


BloggerSpice says: ADMIN 3/25/2016

Thanks Aziz for dropping your comment. :up

Contact Form


Email *

Message *