How to add a Facebook like box to your website in 5 Minutes

• 

How to add a Facebook like box to your website in 5 Minutes

You want to add a Facebook button or badge to your website so that people can easily like your Facebook page with only one click? Here is our How-To guide (click on screenshots to enlarge them):

Open the following website: developers.facebook.com/docs/reference/plugins/like-box/.

Paste the URL of your fan/business page into the according field

Choose the preferred Width of the like box in pixels. On the righten side you will see a preview of how the like box will appear on your website. So just play around a little bit and find your perfect Width. Even though Facebook says that the minimum supported plugin width is 292 pixels you can choose lower pixel sizes. I tried it out and it (still) works.

You can also change the Height of the fan box. But this is an optional choice. Facebook will choose the right height automatically according to your settings. The default height varies based on number of faces to display, and whether the news stream is displayed or not. With the stream displayed, deactivated header and 10 faces the default height is 558 pixels. With no faces, no header and no stream the default height of the like box is 62 pixels. With 10 faces, no header and no stream the default height is 258 pixels.

Do you want that the profile photos appear in your like box? Then please leave the default setting as it is. If you don’t want to show faces on your like box uncheck the box.

Next we can choose the calor scheme which can be light or dark. I would recommend to choose the light scheme if your website has a white background. If your website is overall darker you can also change the default setting to dark color scheme.

Untick the next checkmark box if you don’t want to show the latest status updates of your fan site within the like box. I always deactivate the stream because of the cleaner look and the minimized size of the box.

Per default the border color of the plugin is black, blue or white dependent on the used color scheme. If you want to change the color choose the right HEX color value. You can find an overview of colours and their HEX codes onw3schools.com. Please remember to always start your HEX code with the hash-tag #.

If you don’t want to have a header saying “Find us on Facebook” with your like box uncheck the according box. Otherwise leave it as per default setting.

Click on “Get Code” and a new window will open.

Navigate to the IFRAME tab and copy the code.

Paste the code into your website code wherever you want the like box to display. If you use WordPress I recommend to insert it into your sidebar. To do so, navigate within your WordPress Dashboard to “Appearance” –> “Widgets”. Now, just drag & drop a “Text” widget out of the “Available Widgets”-section to your sidebar and copy the IFRAME code to this widget. Save and your are done!

http://capecoders.net/add-facebook-like-box/