Skip the Plugin – Add the Facebook Like Box to Your Sidebar Like a Pro

There seem to be a lot of Facebook Like Box plugins many just imitating the one directly available from Facebook. I’ve tried several of them and found most of them weren’t that flexible and a bit awkward to customize. Also, it means one more plugin to track and maintain with updates to ensure security. That to me is not a timesaver but a time drain. We all love to save time so let’s skip the plugin!

Can you copy and paste and also login to your WordPress dashboard (admin privileges)? I have great news then; you don’t need to be a coding pro to add the Facebook Like Box to a sidebar on your website! You just need to follow a few simple steps.

Step One – Get the Widget Code

• First copy your Facebook Page URL. Example: https://www.facebook.com/ArtsAssistance
• Measure the width of your sidebar (if you have existing boxes there, use a plugin like MeasureIt, an add-on for FireFox and Safari). Notate the pixel width of your sidebar.
• Go to https://developers.facebook.com/docs/reference/plugins/like-box/
• Fill in the Facebook Page URL you saved and width you notated into the form. You will see your Facebook Like Box example populate to the right.
• For the height, I found 215 to work for me but you may need to adjust to fit your needs. Check the example on the right as you continue filling out the form.
• You can leave selected “Show Faces” if you desire (highly recommend, this is after all a social network and who doesn’t like to see their friends?).
• For Color Scheme, recommend selecting “light” which will work for most themes.
• Do you want your Facebook Page comments to show? Leave clicked on “Show Stream” however, I don’t recommend it. Due to the space constraints of most sidebars it will be too long and take away from other items you are promoting. Recommendation – uncheck.
• Ah, this is the big decision area. Do you like the border colors? Maybe you are fine with it – if so leave blank and Facebook’s branded colors will stay in place.
• Not a fan of the border colors? With many themes this isn’t a good fit. If your sidebar background color is white, put in “#ffffff” without the quotes and presto – no borders! Less distracting also. Another good color for borders “#cccccc.”
• Suggest clicking off “Show Header;” most people will figure out a Like button.
• Click on “Get Code” and copy the output (if you need to paste temporarily, paste into a Text Edit for Mac or NotePad for the PC).

Step Two – Paste In Your Newly Generated Like Box Code

• Login to your website’s WordPress dashboard (example http://www.yoursite.com/wp_login.php).
• Go to the left to “Appearance” and then “Widgets.”
• Click and drag “Text” to the Main Sidebar area. You can add it to the bottom of the listing or based on your marketing priorities. Since the Facebook API can be slow to load at times, I don’t suggest the top.
• On the sidebar “Text” you just dragged, click on the down arrow to open the box.
• Skip the title form area and paste your newly created code into the second form area. Click on the “Save” button.

Congrats, you now have a Facebook Like Box! Boy you are awesome!

For the Coders

Noticed the script file link? You can put that in your footer file before the body tag closes unless you prefer the box to load more quickly. The instructions from Facebook are to put it immediately after the body tag opens. I took the risk of placing the script in the widget box to give myself the option of turning off the Facebook Like Box on pages it may not be needed and preferably not requiring the script for every page.