Friday, 15 March 2013

Tagged under: , , ,

How to add Sliding Floating Facebook Like box in Blogger


Today article is all about Facebook pop up like box. Facebook pop up like box now a days used by many bloggers and webmaster to increase their Facebook fan page traffics in short period of time.Facebook pop up like box gain popularity day by day and it becomes a well known Facebook widget in 2013. inYou might have observed that now a days every one every webmaster and bloggers promote theirs blog website in different ways and styles. Many of them use this widget and it will surely increase your facebook fan page traffics.

This widget is widely used by many bloggers and webmasters to promote and increase the facebook fan page popularity. facebook pop up like box created in javascript, Css, Html and JQuery
  

How To Add Floating facebook Like Box in blogger

Follow these Two simple steps given below
  • Got to blogger>>Layout:
  • Add a Gadget>>Html JavaScript Gadget:
  • Inside Html/JavaScript Gadget Past below code
Step 1:

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FProBloggertrick&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>

Step 2:

Now you have done step one comes here what the next:
  • After adding the above code in layout html JavaScript Gadget:
  • Now go to dashboard >>Edit html
  • Find </head> tag and just before it past the below code.


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Now you have done all most click on save template and visit your blog you will see facebook pop up like box on right side of home page.

Facebook pop like box Customization

Two possible customization you have in this widget first one is change ProBloggertrick with your own facebook fan page username. and the second is if you want to appear this widget on left side then simply change float: right to float: left and you have done

What if facebook pop up like box does not work

  • Go to your facebook fan page which you want to appear.
  • Go to edit page >> update info
  • Then write unique name for your page by click Username
  • when you write available username for your page then copy that and replace with ProBloggerTrick
  • Noted you can only one time change this name after this you have no permission to change it.

22 comments:

  1. Nice post bro ;)
    I wanna ask that how much money I have to pay for a custom domain ??? Plz suggests me the lowest price :P

    ReplyDelete
  2. @Yadav
    You will have to pay for custom domain only 10 dollar but if you are in Pakistan
    then you can purchase it with onle 8.50 in pak rupees 850 Rs only

    2 dollar discount:

    ReplyDelete
  3. Oh great widget bro.. I will not only enhance blog look but also help to increase facebook fan base.. Great work bro!

    ReplyDelete
  4. @Ankit Thanks Bro for your apprecaition..keep in top 10 ten commentator...

    ReplyDelete
  5. @Asghar
    Thanks Asghar for your appreciation keep it tound with us..

    ReplyDelete
  6. it was not working on my blog brother?

    ReplyDelete
  7. @ kirn if its not working just give username to your fb fan page. then try again.

    ReplyDelete
  8. Hafeez bro can you give me codes for when anyone open my blog then Facebook like box plugin comes in pop menu on middle

    example open this website www.love104.org
    and see facebook like box coming on screenn


    please give me code for that
    plzzzzzzzzzzz

    ReplyDelete
    Replies
    1. You can easily apply this in simple way just visit the below link

      http://www.probloggertricks.com/2013/03/how-to-add-new-facebook-pop-up-like-box.html

      Delete
  9. do you have another style for this like box ???

    ReplyDelete
    Replies
    1. You can easily customize it by playing with Css codes inside the widget codes. If you want a specific design then inform us we will do thats for you.

      Delete
  10. i did the same as u said but,my facebook floating doesn't showing likes
    it is showing blank.

    ReplyDelete
    Replies
    1. Dear Kiran try to remove the cache it will work fine.

      Delete
  11. Nice bro. It's looking good, so I can improve fanspage base. Thanks.

    ReplyDelete
  12. facebook box worked fine but after this the slider on my blog stopped working.. can u fix it the developer of this? :)

    ReplyDelete
  13. my slider stopped working after this .. can u solve this issue?

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism