Add Facebook Popout Like Box To Blogger

Add Facebook Popout Like Box To Blogger

Facebook Popout Like Box is a new version of FB Like Box for Bloggers,this box will help you to get Facebook Page likes , the likes can be for your website/blog page or any other page.We should not underestimate the Social Media , in which Facebook is at the top , therefore get more likes for your Facebook page and get high traffic from your Facebook Pages , in this regard a New Facebook Popout Like Box Version 2 has been released which will solve your traffic problem,this is very stylish Like Box , you can add this Like Box to any side of your Blog/Website .Whenever someone move mouse on it , it will pops up .However Let's see how to add this box to Blogger.

Facebook-popout-like-box


Live Demo

How To Add Facebook Popup Like Box To Blogger


Before installing/adding Facebook Popup Like Box to your Blog , you must already install the jQuery Plugin to your blog template , if you have not added that plugin follow the below easy steps to add.

  • Sign in to your Blogger Account 
  • Go To Blogger Dashboard , there click on template after that Click on Edit HTML , then Proceed it , Check the Small Box "Expand Widgets Template" after that Search for </head> tag.
  • Now Copy the below Script and paste below/under </head> Tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  • The Plugin is installed , now lets add the Like Box
  • Again Go to Blogger Dashboard
  • Click On Layout
  • Add a Widget and Select HTML/JavaScript
  • A Box will popup , now Copy the below script/code and paste it in the box.

<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;right: -47px;width: 47px;background-image: url("http://2.bp.blogspot.com/-MaW4PTF8Qkc/T13eWvP_ZoI/AAAAAAAABc8/ZCYfPlB1jug/s1600/w2b_vertical-left.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-bottomright: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({left: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    left: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    left: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fthatsblogging&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#F5EBF5;" allowtransparency="true"></iframe>
</div>


  •  Change The Page Username in the Script to your Own Page Username i.e "ThatsBlogging".
  • You Can Change the width and height of the box (the width and height is clearly indicated by red text i.e 250 ".
  • Now hit Save and that's it !
  • Still Confuse ? Feel Free to ask any question , we will anwser you !
Actually the script is coded by Way2Blogging.com , all credit goes to W2B , but we share this for the sake of our Visitors , Stay Blessed , Happy Blogging
SHARE

Iftikhar Uddin

I am a Web Developer,Graphic Designer,Blogger Wizard,WordPress Samurai,Code Engineer,SEO Guru,Software Engineer and food hunter.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

33 comments:

  1. Nice and Awesome post Thanks
    My Blog:
    School of Blogging Providing with Blogger widgets, blogger tips, blogger tricks, help, hacks,Premium Blogger Templates and Blogger resources with great blogger tutorials also..

    ReplyDelete
    Replies
    1. Hey Rima Akter,You Welcome.Facebook Popup Static Box V2 is very helpful for getting Facebook Likes,which will surely help you to get quality traffic from Facebook.By the way your blog is nice but i will suggest you remove the extra widgets,because it makes your blog speed slow.
      Regards,
      Iftikhar!

      Delete
  2. hi uddin ,didn't work in my blog what i'm do to next(i'm also used the same procedure of above)

    ReplyDelete
    Replies
    1. Hey Corby Work,its just easy,all you have to do is change the user name (thatsblogging) in the script to your Page Username And the add it to blogger that's it :)
      Hope you got the solution.
      Regards,
      Iftikhar!

      Delete
  3. Really nice and awesome post and it works But when i paste the script under head for plugin then my blog slide show and menu bar does not work.Now What's the solution?

    ReplyDelete
    Replies
    1. It Works Perfectly @Istiaque.
      Remember if the plugin is installed already in your Blog Template,then no worry.It will work perfect,but if it is not installed then just paste the above mentioned script after head tag .I hope it will work perfect.
      Regards,
      IfTIkhaR!

      May be it Works only with magazine style Blogger Templates :)

      Delete
  4. Awesome! Love it. Thanks for the great post.

    ReplyDelete
    Replies
    1. Hey Stew Carrier You Welcome,This Popout Like Box is really very cute,it just comes out whensome one move mouse over it :) ,Keep Visiting Our Blog for more awesome posts.
      Regards,
      Iftikhar!

      Delete
  5. where can I find the Add a Widget and Select HTML/JavaScript ??

    ReplyDelete
    Replies
    1. Hey SiddhArth Jain its very easy :)
      #1) Go to Blogger Dashboard
      #2) Click On Layout
      #3) Add a Widget and Select HTML/JavaScript
      #4) A Box will popup , now Copy the script/code and paste it in the box.

      Hope you got the Solution :)
      Regards,
      Iftikhar!

      Delete
  6. i implemented and it was positioned on the left instead of the right of the screen... how to change that ?

    ReplyDelete
    Replies
    1. @Ebooks Eng Team, if you want to put this widget to blog right side bar just change the "Left" in the above mentioned script to right ,up or down :)
      Regards,
      IfTI!

      Delete
  7. I want this facebook like panel on the right hand side!! any ideas?

    ReplyDelete
    Replies
    1. Hey Alive Asif and Somendra Sharma I don't have any idea about the Panel,However i will back to you on a tut on this Issue,Still i don;t know exact , So be patience , Thanks for Stopping by
      Regards,
      IfTI!

      Delete
  8. Hi,

    I have a problem. My navigation bar and feature content slider seems to be non functional when I am using the code in the Edit HTML code to give the source script. Can you help?

    ReplyDelete
    Replies
    1. Hey Debraj Banejee,Follow the above steps carefully,and Make changes in the script according,i hope you can do it :) Thanks for Stopping By :)
      Regards,
      IfTI!

      Delete
  9. i request you same widget for youtube subscribe

    ReplyDelete
    Replies
    1. Hey -ADMIN-MAKZSTUFF, Sorry i am not the Original Developer of this Widget,i can't do that ;) Thanks for STopping By :)
      Regards,
      Ifti!

      Delete
  10. ITS on the right side of my blog ... i want it to be on left .. how can i can it !

    ReplyDelete
    Replies
    1. @Abhijeet Jain, if you want to put this widget to blog right side bar just change the "Left" in the above mentioned script to right ,up or down :)
      Regards,
      IfTI!

      Delete
  11. i jst what to add my like not yours hw can i do it

    ReplyDelete
    Replies
    1. hey Simon Bango Sorry i don't know what you have asked? Please make it clear
      Regards,
      Ifti

      Delete
  12. I made it possible here: Faster Maths
    Thanks Ifti, Thanks a lot.

    ReplyDelete
  13. hi,
    iftikhar i use this gadegt its cool.
    but one prblm is that the fb show on left side of my blog i want it right side how can i fix it pls help..
    My Blog

    ReplyDelete
  14. Thank you very much bro..
    Working nicely on my site
    ..www.dasathanews.com...

    ReplyDelete
  15. Hello. Can u look my blog? http://els4test1.blogspot.ro/
    i add this gadget but how i can hide the html box?
    plz u can help me?

    ReplyDelete
  16. I am unable to pu the widget on right side of my blog. Can you guide exactly what changes are to me made. I tried your suggestion in previous responses, seems I am confusing it.

    ReplyDelete
  17. Wow what a nice post Sir,Thumbs up Informative:)
    Regards Haider Ali
    Also visit my site Tricks Punch-Blogger Tutorials

    ReplyDelete
  18. http://usedlaptops4u.blogspot.com/ plz visit

    ReplyDelete
  19. Works like a charm! Thank you very much! :)

    ReplyDelete
  20. I must thank you for the efforts you have put in penning this blog.I am hoping to see the same high-grade blog posts from you later on as well.
    website design

    ReplyDelete