More than once a customer has asked me "How do I put a Facebook like box on my website?". In this tutorual I will show you how to add a Facebook Like box to your HTML or WordPress website. A Facebook Fan Page, or Facebook Page account is required to complete this tutorial.
How to add a Facebook Like Box to my website
- Navigate to http://developers.facebook.com/docs/reference/plugins/like-box/
- Enter your Facebook Page in the 'Facebook Page URL' field.
- Set the width to 292 in the 'Width' field. I think this is a good width for most WordPress sidebars because it just barely fits, while display the max number of fans.
- Set the 'Height' field to 200. 2oo displays the fan's thumbnails while cutting off their names. You don't need to display their names, it's not important. The objective is to make an impression that people are following your blog or website while reserving as much vertical space as possible for ads and such.
- Set the 'Border Color' to a hexadecimal value that matches the color of our website's color scheme. This step isn't too important sense using Facebook's branding colors also serves us here.
- Make sure 'Show stream' is unchecked. We don't need this, and it would only detract from out blog or website information.
- Check 'Show header' so that the message 'Find us on Facebook' is listed at the top of the box.
- Click the 'Get Code' button.Adding the Facebook Like Box to WordPress sidebar
- Copy the code snippet from field '1' and paste it into a text widget on your WordPress website. Enter a couple carriage returns and paste the code snippet from field '2' just under the code snippet from box 1 in the same widget.
Adding the Facebook Like Box to an HTML web page - Pretty much do as the directions say.
- Paste the Code snippet from field '1' within the
HTML | copy code | ? at the top and place the code snippet from field '2' within your markup where you want the Facebook like box to actually appear.1 <body>
Here's what your Facebook like box will look like when you're done.
