How to Add Facebook Like Box to Your Website

You would be more prefer to engage with social media and broadcast your blogging or website updates for readers to stay up-to-date with your content through preferred social media. If we narrow to Facebook, lately we have been discussing about creating Facebook fan page for your site. Moreover Facebook provides you a social plugin - Facebook Like Box, to represent your Facebook fan page on your site and let your readers easily subscribe to your updates. Wanna add it to your site too?

Facebook Like Box is a popular social plugin you could find almost on all blogs or websites. It will enable users to like your fan page in one click without visiting it, see users already liked it including their friends and read recent posts from your fan page. So you would like to add it for your site and gain more likes to your Facebook fan page while letting Facebook users to stay in touch with your site updates through Facebook. Here you can find how to add Facebook Like Box social plugin with further customization.

Before You Go:  Unless if you implemented Facebook JavaScript SDK in your site, you have to add it before you proceed with steps. Read How to Implement Facebook JavaScript SDK on Your Website and implement suitable JavaScript SDK for you.

Steps:

1. You just need to add this code to your website. Either use XFBML code or HTML5 code as you prefer.
Note: If you are a Blogger user, add your plugin code snippet via HTML/JavaScript element.

XFBML Markup

[URL of Your Facebook Fan Page]" width="[Width in Pixels]" height="[Height in Pixels]" colorscheme="[Like Box Color]" show_faces="[Enable/Disable Showing Faces of Fans]" border_color="[Color of Border]" stream="[Enable/Disable Stream]" header="[Enable/Disable Header]">

Note: The XFBML markup of this plugin may not support earlier versions of Internet Explorer. In order to enhance compatibility with older Internet Explorer versions, add below XML namespace to your root HTML tag.

xmlns:fb="http://ogp.me/ns/fb#"

i.e:

HTML5 Markup

[URL of Your Facebook Fan Page]" data-width="[Width in Pixels]" data-height="[Height in Pixels]" data-show-faces="[Enable/Disable Showing Faces of Fans]" data-border-color="[Color of Border]" data-stream="[Enable/Disable Stream]" data-header="[Enable/Disable Header]">

Color Indication Information
.....- URL of Your Facebook Fan Page
.....- Width of Facebook Like Box Plugin in Pixels

.....- Height of Facebook Like Box Plugin in Pixels

Just specify height of your like box in pixels. Else you can leave it blank and let plugin decide the height automatically.
.....- Color Scheme of Like Box

Here you are eligible to select the color scheme of the Facebook like box. Either specify light or dark here as you prefer.
.....- Show Profile Pictures of Fans

You can show off profile pictures of your fans through your like box. Specify true if you would like to display faces, or else specify false here.
.....- Color of Facebook Like Box Border

Specify border color of the like box here, either using hex color value or just specify color name.
.....- Display Steam of Your Fan Page

Specify true if you would like to display stream of your public fan page or else specify false.
.....- Facebook Like Box Header

You can elect to display default header with label 'Find Us on Facebook' here. Either specify true or false as you prefer.