Pin It



How to add facebook widget to blogger

  • Tuesday
  • Andy Law
  • Share
  • As you know, Facebook has been implemented by most of bloggers, and Facebook has created a great oportunity for us to increase number of loyal readers just by one click. So, have you got a cool Facebook fan page widget? If not, this tutorial would be for you. I will show you how to add facebook widget to blogger in a absolutely cool way with hover effect. You can see the demo here. And you can implement it for your blog also. What you need to do is following exactly the steps below:

    Step 1: Add Jquery Javascripts plugin (if your blog is already added this plugin, you can skip this step)
    1. Go to Design / Templates  >>  Edit Templates  >>  Tick the expand widget templates box
    2. Find the tag </head>  (Press Ctrl + F to find it)
    3. Place this code right above the tag </head>
    4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    5. SAVE the templates
    Step 2: Add Facebook widget code to blogger
    1. Go to Page Elements / Layout  >>  Add a Gadget  >>  HTML/Javascripts
    2. Place the code below into the content box
      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);});
        <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%2Fwww.facebook.com%2Fpages%2FBlog-On-Blogspot%2F114178088675094&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><span>/ <a href="http://www.blogonblogspot.com/">+Gadget</a></span></div></div>
    3. SAVE

      30 Responses to “How to add facebook widget to blogger”

      Isabella said...
      23 November 2011 at 16:38

      Hi Author

      Thanks a lot for this informative post. It is really useful for me.

      Now i am adding widget on my blog.

      I hope you share more stuff for bloggers.

      Funny Statuses

      Costume2Couture said...
      6 January 2012 at 01:13

      How do I do this using the GoDaddy Blogcast?

      Russ Cross said...
      19 January 2012 at 01:44

      HI, tried this but it didnt work, the facebook logo just hangs at the side with no interaction, I obviously missing something

      Kim Coombs said...
      27 January 2012 at 01:35

      Im with Russ....I can't get interaction as well....what is missing?

      cvija021 said...
      3 February 2012 at 08:07

      Great photos for fb timeline on http://www.timelinecover.co

      Angelina said...
      28 February 2012 at 15:31

      Pretty impressive site to me and i think this site is obvious enough to think over this site.
      Facebook Applications

      Abhishek Kumar Singh said...
      2 April 2012 at 13:39

      plzz help me i didnt worked

      Paige Kennedy said...
      29 April 2012 at 22:07

      there is a facebook sidebar that just hangs on the side, how do i remove this? thanks :)

      Mohd Kamri said...
      29 June 2012 at 04:11

      didn't work..plz..

      Anonymous said...
      18 July 2012 at 17:41

      i got it thanks

      Anonymous said...
      27 July 2012 at 01:36


      dadada said...
      24 December 2012 at 03:30

      Dear Sir

      Can you make the same widget but for Twitter?


      Syaiff Azwa said...
      19 January 2013 at 22:24

      sir, it appears to be your facebook page on my blog if I copy paste the code in step 2. How do I put my own fb page on my blog?

      mahesh naidu said...
      30 January 2013 at 08:06

      how to buy

      SohNi said...
      13 February 2013 at 00:49

      Hi Sayaiff Azwa:

      You need to replace iframe code in steps two with your own iframe code from FB like page

      Hope this helps.

      Daniel Benny Simanjuntak said...
      19 February 2013 at 09:11

      Awesome widgets! Keep it up..
      Bloggers are expecting this types of widget. Thanks.. :)

      Alex Smith said...
      19 March 2013 at 15:34

      I like your widgets!!
      West Ranch High School Senior Portraits

      Webtey VJ said...
      3 April 2013 at 12:15

      Hey i want to share it on my blog how will i do it??
      Please help i am a bit new to the world of blogger.

      all-with-all said...
      12 April 2013 at 19:34

      get free soft here

      jenifer lopez said...
      15 April 2013 at 20:57

      Just finished a marathon round of workshops and have now updated my Twitter background from Matt and the team at Tweetpages http://twitter.com/annmariehanlon Let me know what you think! So buy facebook fans

      Tom Smith said...
      30 April 2013 at 16:48

      I think this site is obvious enough to think over this site.
      Bail Bonds Raleigh

      Josh Green Rock said...
      3 May 2013 at 21:02

      It is really useful for me.
      Bail Bonds Las Vegas

      Sheamus Warior said...
      6 May 2013 at 19:04

      Excellent Blog! I have been impressed by your thoughts and the way you put these info in this post.
      get likes on facebook

      senthur stocks said...
      16 May 2013 at 21:44

      Only thing in stock trading and commodity trading is to understand the technical analysis is must one To Earn money in stock market and commodity market
      If You want to earn money in stock tips and Mcx tips the Indraday tips will be lowest stoploss and high profit
      We Want to see the Accuracy will be above 90 % in Free Mcx Tips , Free Stock Tips

      senthur stocks said...
      16 May 2013 at 21:44

      This site is nice and very useful information!!
      To design web sites or making blogs here many information is there.
      When I Try to Design my blog Free Mcx Tips , Free Stock Tips I found this Site!!! Really very excellent!!!
      By Mcx Tips , Stock Tips

      kailash trifid said...
      31 May 2013 at 21:45

      You made some good points there. I did a search on the topic and found most people will agree with your blog.mcx tips

      Detry said...
      4 June 2013 at 18:04

      Excellent rush tutors that have always been present before the exams. Come and you will appreciate our quality.

      Tanja Tyberg said...
      7 June 2013 at 07:18

      Dont work =(

      crackon said...
      19 June 2013 at 14:44

      do u wand a real facebook hacker pls click here

      hack your friend fb account software free download

      gexhouse2 said...
      2 July 2013 at 17:51

      This site is to much immpressiv and atracted also good job an keepit up.

      logo company in Pakistan
      Logo design online in Pakistan

      Post a Comment

      SUBSCRIBE NOW to get the latest posts