How to Add a Facebook Like Box

Adding a Facebook Like Box to your website is one of the fastest ways to turn site visitors into followers, building a direct connection with your audience. This guide walks you through exactly how to add Facebook’s Page Plugin to your site, customize its appearance, and place it where it will get the most engagement.

What is a Facebook Like Box (And Why You Still Need One in 2024)?

First, a quick clarification: what most people call a "Like Box" is officially known as Meta's "Page Plugin." While the name has changed over the years, its function remains the same - it’s a small widget you embed on your website that directly showcases your Facebook Page. Visitors can see how many people follow you, view recent posts, and most importantly, like or follow your page without ever leaving your site.

But in an age of TikTok and Instagram Reels, is a Facebook Page Plugin still relevant? Absolutely. Here’s why it’s a smart marketing move:

• Boost Social Proof: When a new visitor sees that thousands of other people already follow your page, it instantly builds trust. A visible follower count acts as a powerful, unspoken endorsement from a community of people who value your brand.
• Convert Website Visitors into Followers: People who visit your website are already interested in what you do. The Page Plugin gives them a frictionless way to stay connected. Instead of forcing them to open a new tab, search for you on Facebook, and then click "Follow," they can do it in a single click from your homepage, blog, or contact page.
• Increase Organic Reach: Every new follower is another person in your potential audience. When they engage with your content, it can appear in their friends' feeds, creating a ripple effect that grows your organic reach far beyond your existing follower base.
• Bridge Your Brand Platforms: Your website is your brand's home base, while your Facebook Page is its community hub. The Page Plugin creates a seamless bridge between the two, reminding visitors that your brand is active and engaged on social media.

Getting Started: What You'll Need

Before you jump in, you only need two things to get this working. The process is straightforward, but having these ready to go will make it even smoother.

1. A Public Facebook Business Page: The plugin is designed to promote a Business Page, not a personal profile. Make sure the page is published and visible to the public.
2. Access to Your Website’s Backend: You’ll need to be able to add a small snippet of HTML code to your site. This is easy to do on almost any platform, whether you're using WordPress, Shopify, Squarespace, or a custom-built site. You don't need to be a developer, you just need permission to add or edit an HTML element.

Step-by-Step Guide: How to Generate Your Facebook Page Plugin Code

The first step is to use Facebook’s official tool to generate the code for your Like Box. It’s a simple configurator that lets you customize the plugin's look and feel before you ever touch your website.

Step 1: Go to the Meta Page Plugin Configurator

First things first, head over to Meta for Developers' Page Plugin setup page. This is the official and safest tool to use for creating the code you'll need. Anything from a third party could be insecure or become outdated.

Step 2: Enter Your Facebook Page URL

Once the page loads, the first field you’ll see is "Facebook Page URL." Copy the full web address of your Facebook Page and paste it here. For instance, you should paste the entire URL, like https://www.facebook.com/meta, not just the handle meta.

As soon as you enter the URL, you'll see a live preview of the plugin update on the right side of the screen. This handy feature lets you see exactly how your changes will look.

Step 3: Customize the Plugin's Appearance

This is where you can dial in the specifics. Meta offers several customization options to make the plugin fit perfectly with your site's design and goals. Here’s a breakdown of each setting:

• Tabs: This field lets you choose which content appears inside the plugin. By default, it's set to timeline, which shows your most recent posts. You can also add events to display upcoming events or messages to let visitors message your page directly from your site. For most use cases, just sticking with timeline is clean and effective. You can also leave this blank to show nothing but the header.
• Width &, Height: You can set a specific pixel width (between 180 and 500) and height for the plugin. For most modern websites, it's better to leave the width blank to make the plugin responsive. This allows it to automatically adapt to the container it's in, whether it's a tight sidebar or a wide footer. The minimum height is 70px.
• Small Header: Check this box if you want a more compact version of the plugin. It reduces the size of the header, which is great for footers or areas where space is tight.
• Hide Cover Photo: If you use the small header, you also get the option to hide the cover photo, making the plugin even more minimalist. This just shows your profile picture, page name, and an option to like the page.
• Show Friend's Faces: This is a powerful social proof tool. When ticked, it shows the profile pictures of the visitor's Facebook friends who already like your page. Seeing a familiar face is a strong motivator for a new visitor to like the page, too. It’s a great idea to keep this enabled.
• Use custom CTA button: If your Facebook Page has a custom Call to Action (CTA) button like “Book Now,” “Sign Up,” or “Contact Us," this option will display it in the plugin. It's a fantastic way to drive specific actions right from your website.

Play around with these settings until the preview looks exactly the way you want it.

Step 4: Click “Get Code”

Once you’re happy with the preview, click the blue “Get Code” button. A pop-up window will appear with two separate boxes of code. This might seem a little intimidating, but it’s actually very straightforward.

• Part 1: JavaScript SDK: This is the first box. It’s a JavaScript snippet that powers the plugin. Meta recommends you place this code on your site once per page, ideally right after the opening <,body>, tag. If this seems too technical, don't worry - most modern website platforms have a simple way to add this.
• Part 2: Your Plugin Code: This is the second box. This piece of code is what actually displays the Like Box. You’ll place this second snippet exactly where you want the plugin to appear on your website (e.g., in your sidebar, footer, or on your "About" page).

Now, let's look at how to add these two pieces of code to your site.

How to Add the Code to Common Website Platforms

Putting the code on your website is simpler than it seems. The method just varies slightly depending on what platform your website is built on.

For WordPress Users

WordPress offers a few easy ways to add the code without touching any theme files directly.

1. Add the JavaScript SDK (Part 1): The easiest way to add the SDK code just after the opening <,body>, tag is by using a free plugin like "Insert Headers and Footers." Once installed, go to its settings page, find the "Scripts in Body" section, and paste the code from Part 1 into the box. This automatically injects the code site-wide, so you only have to do it once.
2. Add the Plugin Code (Part 2):
   • For Pages and Posts: Open the page or post where you want the Like Box to show up. Click the plus (+) icon to add a new block and search for the "Custom HTML" block. Paste the code from Part 2 into this block.
   • For a Sidebar or Footer: Go to Appearance >, Widgets. Drag and drop a "Custom HTML" widget into your sidebar or footer area, then paste the code from Part 2 into the widget.

Save and preview the page, and you will be done.

<,!-- Code for Part 1: JavaScript SDK, placed after <,body>, -->,
<,div id="fb-root">,<,/div>,
<,script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0" nonce="SAMPLE_NONCE">,<,/script>,

<,!-- Code for Part 2: The Plugin div, placed where you want it -->,
<,div class="fb-page" data-href="https://www.facebook.com/your-page-url" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">,
...
<,/div>,

For Shopify, Squarespace, and Wix

These platforms are built to make embedding code simple. In general, you'll look for a content block specifically designed for custom code.

• In Squarespace, use a "Code Block."
• In Shopify, you can add a "Custom Liquid" section to a theme page or edit the HTML of a page directly.
• In Wix, look for the "HTML iFrame" or "Embed Code" element.

With these platforms, you often have to paste both the JavaScript SDK (Part 1) and the Plugin Code (Part 2) into the same code block. While this isn't the most performance-optimized way (since it might load the SDK more than once), it works perfectly fine and is very easy to do.

For Custom HTML Websites

If you're editing your website’s HTML files directly:

1. Open your primary template file (often named header.php, index.html, or similar).
2. Find the opening <,body>, tag and paste the JavaScript SDK code from Part 1 directly underneath it.
3. Next, open the HTML file for the page where you want the plugin to appear. Paste the code from Part 2 into the exact <,div>, or section where you want it to show up.

Best Practices: Where to Place Your Facebook Like Box

You can put the Page Plugin almost anywhere, but some spots deliver better results than others. Here are a few strategic places to consider:

• In the Website Footer: This is a great spot. It ensures the Like Box is visible on every single page of your site without getting in the way of your main content. Visitors who scroll to the bottom are often looking for ways to connect or other details, and a quick prompt to like your page is perfect here.
• On Your About Page: People visit your "About Us" page when they want to learn more about you. They are already in an engaged mindset, making it an ideal time to ask for a follow.
• In the Sidebar of Your Blog: A sidebar is a traditional and highly effective place for a Like Box. As readers browse your articles, the plugin remains visible, giving them an easy opportunity to connect.
• At the End of a Blog Post: After a reader has just finished enjoying one of your articles, their engagement is high. Placing the plugin below your content provides a natural next step and serves as a call-to-action to stay updated with future posts.

Putting a Facebook Like Box on your site with the Page Plugin is a simple yet powerful tactic for turning clicks into community. By using the official configurator and placing the code snippet in a high-visibility spot on your site, you create a direct path for new fans to join your audience, boosting social proof and growing your brand’s reach page by page.

Actually growing that new Facebook audience takes consistent content, which is where things can get tricky. We built Postbase because we were done grappling with slow, outdated tools to manage social media. Our easy-to-use visual calendar helps you plan all your content across Facebook, Instagram, TikTok, and more, while our reliable scheduling ensures it goes live every single time. It gives you the power to stay consistent and grow your community without the headache.