Wednesday, December 15, 2010

How to add the Facebook Like Box on Blogger

An updated version of this guide can be found here: http://maria-tan.blogspot.com.au/2012/04/how-to-add-or-update-facebook-like-box.html 



Please note: 'How to add or update the Facebook Like Box on Blogger' is the new version of this post.  The post you are viewing now was made in 2010 and may no longer work.

This is an old update to a previous post I made in 2009 on 'How to add the Facebook Fan Box on Blogger'.

Instructions:
  1. Get the code for your Facebook Like Box. You can do this through the Facebook Plugin Page, or if you're already logged in to your Facebook page, go to Edit Page > Marketing and click Add a Like Box to your Website. See the pics above if you're having any trouble.
  2. Under Facebook Page URL, delete the URL that's currently in the box and replace it with your Facebook Page's web address.

    For example, my Facebook Page's URL is http://www.facebook.com/pages/Maria-Tan/102277350547, so that's what I pasted in the box.

    Once you enter the correct URL, your Like Box will appear on the right hand side, instead of the default Facebook Platform Like Box.
  3. Customize any of the other settings, i.e. Width, Color, Connections, Stream, Header and click Get Code.

    The settings I used were:

    width="200" (The width of your Like Box)
    height="554" (See Step 10 for more details)
    Color scheme=Light (White or Black background)
    Connections=6 (How many pictures of people who like your page show up)
    Show stream ticked (Info from your wall posts)
    Show header unticked (Find us on Facebook bar)
  4. Copy the code under XFBML.
  5. Sign in to Blogger and click Design.
  6. Click Add a Gadget.
  7. Choose Basics > HTML/Javascript
  8. Add a Title and paste the code for your Facebook Like Box under Content.
  9. Click Save.
  10. View your blog and edit the HTML/JavaScript box again if necessary.

    To change the height of your Facebook Like Box, edit the code you pasted in the HTML/JavaScript box and paste height="554" after the width="..." parameter. You can customize the height to suit your own blog by replacing the numbers 554 with your own value in the quotes.

    E.g. For a Like Box with the height of 200 pixels, paste height="200" instead.
  11. Don't forget to Save the changes once you are finished :)
Bookmark and Share
Posted by Maria Tan at 9:05 PM
Labels: , , , , , , , , , , , , , , , , , , ,

12 comments:

  1. Joni CarreiraFebruary 13, 2011 at 3:18 AM

    nice post tnkx kisses

    ReplyDelete
  2. Hagit InberFebruary 17, 2011 at 12:35 AM

    I followed the instructions a few times but all i get is a blank box.
    Any suggestions?
    Hagit

    ReplyDelete
  3. Maria TanFebruary 19, 2011 at 8:36 PM

    Hi Hagit,

    I noticed this too the other day. I think it's because Facebook is currently making changes to their pages.

    Although the embed code for the Like Box still remains the same, there are a few glitches I noticed while logged in using preview mode. The pics in this comment shows examples from one of the Facebook pages I manage for a store called Jovita's Bridal Boutique.

    If I am logged in to the Facebook page in preview mode, as the Facebook page account (e.g. 'Use Facebook as Jovita's Bridal Boutique' or Account > Use Facebook as Page) then the Like Box no longer works on Blogger, and I also get that white box you mentioned.

    But once I log out of Facebook or revert back to using Facebook with my own account, then the Like Box functions again on Blogger.

    When I exit preview mode and go back to the normal Facebook page layout, the Like Box also goes back to normal on Blogger.

    My theory is that the new upgrade to Facebook pages may require Facebook to also update their embed code for the Like Box.

    Did you experience something similar? If you have already upgraded your page and regularly 'Use Facebook as Page' then this could be the reason why you get the blank box.

    But anyway please let me know if perhaps that could be the reason for the problem.

    Hope that helps,

    Maria

    ReplyDelete
  4. Maria TanFebruary 19, 2011 at 8:40 PM

    Thanks Joni, I'm glad you liked it.

    ReplyDelete
  5. WiniFebruary 28, 2011 at 10:25 PM

    Hi Maria....
    Thank you so much for such an easy way to get all this done....I tried so many websites, and all of them didnt make any sense to me.
    Yours was easy to understand and my blog is looking fab now.
    Thanks again.

    ReplyDelete
  6. Maria TanMay 5, 2011 at 6:40 PM

    Thanks Wini, I'm glad I could help. Love your blog btw, my mouth is watering now after looking at all those yummy treats :)

    ReplyDelete
  7. medical accidentDecember 2, 2011 at 10:03 PM

    Thank you very much for explaining the way to add the likes of Facebook.
    I thought their must be a plugin for that.

    ReplyDelete
    Replies
    1. Maria TanMarch 17, 2012 at 7:33 PM

      Any time, thanks for reading my post. I'm happy that you found it helpful.

      Delete
  8. Stephen MitchellMarch 31, 2012 at 10:21 AM

    When I enter my group's URL, this appears instead of my groups Fan Box: Could not retrieve id for the specified page. Please verify correct href was passed in.

    ReplyDelete
  9. Maria TanMarch 31, 2012 at 9:17 PM

    Hi Stephen,

    What was the URL that you used? The error you received indicates that you may have entered in the wrong URL.

    Also Facebook like/fan boxes can only be created for Facebook Pages and aren't available for groups as far as I'm aware.

    Sorry about that,

    Maria

    ReplyDelete
  10. Maria TanApril 5, 2012 at 7:56 PM

    Hey everyone,

    Facebook updated its Like Box code today so if yours has stopped working or you need to add the Like Box to Blogger please see my latest post at:

    http://maria-tan.blogspot.com.au/2012/04/how-to-add-or-update-facebook-like-box.html

    Thanks,

    Maria

    ReplyDelete
  11. andreyNovember 26, 2012 at 10:04 PM

    Nice article. Thank's for sharring

    ReplyDelete

Subscribe to: Post Comments (Atom)