As experienced WordPress developers, we've integrated countless social features into sites, and the Facebook Like Box (also called Fan Box) remains a popular way to connect visitors directly to your Facebook page for easy likes and updates. While we've covered Like Buttons and Comments before, here's our detailed guide on embedding the Like Box in WordPress, based on proven methods we've used with clients.
The simplest approach is the official Facebook plugin for WordPress. Install and activate it, then head to Appearance » Widgets. Drag the Facebook Like Box widget to your sidebar and enter your Facebook page URL in the settings.
This widget mirrors Facebook's social plugin options: display connections, show faces, hide header, adjust border color, with light or dark themes available.
For full control, generate the code manually from Facebook's Like Box page in their social plugins section. Enter your page URL and customize the appearance.
Click Get Code for options like HTML5, XFBML, or iframe. We recommend HTML5 for most WordPress sites; XFBML if using other Facebook plugins; iframe as fallback.
In the HTML5 tab, copy the first code snippet—the JavaScript SDK—and add it via our Insert Headers and Footers plugin in the footer (or after the <body> tag):
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));Next, copy the second snippet, like this example:
<div class="fb-like-box" data-href="https://www.facebook.com/platform" data-width="300" data-height="258" data-show-faces="true" data-stream="true" data-header="true" data-show-border="true"></div>
Paste it into a Text widget in Appearance » Widgets. Save and check your site. This works in sidebars, footers, or post areas—just update the page URL to yours.
For XFBML, first add the same SDK JavaScript as above to your footer or header.php.
Then, add this to your theme's functions.php for XML namespace support:
// Add Open Graph doctype to language attributes
function add_opengraph_doctype($output) {
return $output . ' xmlns:og="https://ogp.me/ns#" xmlns:fb="https://ogp.me/ns/fb#"';
}
add_filter('language_attributes', 'add_opengraph_doctype');Finally, paste the XFBML code into a Text widget:
<fb:like-box href="https://www.facebook.com/platform" width="300" height="258" show_faces="true" stream="true" header="true" border_color="#f9f9f9"></fb:like-box>
Save and preview. We've tested this setup extensively for reliable rendering.
Grab the iframe code from the IFRAME tab, add it to a Text widget in Appearance » Widgets, save, and view your site.
This guide should get your Facebook Like Box live quickly. Drop a comment with questions—we're here to help—and follow us on Facebook for more tips.