Scrolling Facebook Popup Like Box Widget for Blogger

Scrolling Facebook Popup Like Box Widget for Blogger

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

Related Post

Speak Your Mind

Ankit Kumar Singla says: 5/30/2013

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

Mohammad Fazle Rabbi says: 5/30/2013

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

Hafeez Khan says: 6/03/2013

nice widget bro

Kulvir Boparae says: 6/03/2013

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

Mohammad Fazle Rabbi says: 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.

Abdellah L. says: 6/05/2013

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

Mohammad Fazle Rabbi says: 6/05/2013

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

Kunal Kothari says: 6/12/2013

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.

Rizwan Saharan 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

Abdellah L. 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 ?

Mohammad Fazle Rabbi says: 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/23/2013

Nice blog bro.. Impressive

Pradeep Sampath says: 6/24/2013

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

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

Mohammad Fazle Rabbi says: 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..

ahmadzaki aulia says: 7/03/2013

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

Mohammad Fazle Rabbi says: 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 time.youtube 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

Mohammad Fazle Rabbi says: 7/13/2013

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

Mohammad Fazle Rabbi says: 7/13/2013

thanks and really appreciate your comment

Aimee Guerrero says: 7/19/2013

Do you have the code for this already? Thanks!

Mohammad Fazle Rabbi says: 7/19/2013

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

Meshy says: 7/21/2013

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

Mohammad Fazle Rabbi says: 7/21/2013

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.

Muhammad Shakil says: 7/31/2013

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

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

Mohammad Fazle Rabbi says: 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.

Mohammad Fazle Rabbi says: 8/17/2013

Thanks Shakil for nice comment.

Chahit Kumar says: 8/30/2013

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.

Chahit Kumar 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 : http://engineersevanigam.blogspot.com/

Mohammad Fazle Rabbi says: 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.

Mohammad Fazle Rabbi says: 8/31/2013

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

Kijana Kiislam 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 www.kkiislamtnz.blogspot.com Thank for your help

Mohammad Fazle Rabbi says: 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-

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

Kijana Kiislam 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

Mohammad Fazle Rabbi says: 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.

Innogenius Exeptional Julius says: 10/22/2013

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

then help me sort out brother.

Mohammad Fazle Rabbi says: 10/23/2013

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.

Innogenius Exeptional Julius 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

Mohammad Fazle Rabbi says: 10/23/2013

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

Innogenius Exeptional Julius says: 10/23/2013

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

Santosh Tiwary 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

Siddique Hussain 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

Mohammad Fazle Rabbi says: 6/22/2014

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

Sonu Kapasia says: 7/31/2014

great i am also using this this is great.

YUVI NUSM says: 8/17/2014

hello may you help me how to create google adsense?

Sid Rehmani says: 12/28/2014

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

aziz says: 3/23/2016

good

Mohammad Fazle Rabbi says: 3/25/2016

Thanks Aziz for dropping your comment. :up

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *