Home
Blogger

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

50 comments

  1. Great work bro. It looks like old dish with new taste.
    • yeh right bro..but this widget is light weight so easy to load.
    • 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.
  2. nice widget bro
  3. 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.
  4. 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.
  5. 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
  6. 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.
  7. Nice blog bro.. Impressive
  8. Nice widget..thank you. Visit my Blog..
    rpsampath.blogspot.com
  9. 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..
    • 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.
  10. 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.
  11. 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 and really appreciate your comment
  12. 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.
  13. 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.
    • 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.
  14. nice widget......thanks for Sharing
    keep sharing such wonderful articles
    OEWAYS
    • Thanks Shakil for nice comment.
  15. 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.
    • 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.
  16. 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/
    • 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
  17. 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
  18. 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
  19. 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
  20. great i am also using this this is great.
  21. hello may you help me how to create google adsense?
  22. Its Great man ,,,
    http://SidRehmani.blogspot.com
    Hack Articles
  23. good
    • Thanks Aziz for dropping your comment. :up
Go Up