If you have set up a Facebook page to promote your business or project through Facebook, you can now show everybody how popular it is by connecting your website with your Facebook page. This is done by placing a box with people that like your Facebook page on your website.
How to place a Facebook Like Box on my website?
That’s very easy! The first thing you need to do is to go to the page plugin section on the Facebook Developers pages: https://developers.facebook.com/docs/plugins/page-plugin/
You can change some settings like the width of the box or whether to show a header or not, and then click the button “Get Code”. In the pop-up window, click on iFrame and copy the iframe code.
The code looks like something like this:
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fpeople%2FKleinermann%2F61574882685613%2F&tabs=timeline&width=0&height=0&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="0" height="0" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
Now you need to paste this code wherever you’d like the box to appear on your website.
Note: Ensure your site uses HTTPS, as Facebook requires secure URLs.
Here are some common examples:
Add the Facebook Like Box to a WordPress website
Go to the backend area and click on the “Appearance” button in the left hand menu. Then select “Widgets”. Here you need to drag a new “Text” widget into the area on the right hand side were you’d like the box to appear.
The description of the areas varies, depeding on the theme you’re using for your WordPress blog/ website. But commonly this would be either the First or Second Sidebar, Left or Right Sidebar, Primary or Secondary. Then paste the iframe code in the text widget and save. That’s it.
Add the Facebook Like Box to Drupal website
Go to the backend area and find the “Administer” page, usually accessible via a menu in the sidebar. On the administer page you need to look for the “Block” link. If you can’t find it this way, look around a little or ask the website administrator. Drupal websites can vary in structure and design.
On the “Block” page, find and click the “Add Block” button. Here you need to give the block a title, insert the iframe code into the block body and choose “Full HTML” from the input formats list below the block body. Then scroll to the bottom of the page and save.
Now the new block appears in the “Disabled” section of the list. You need to place the new block in the region you would the Facebook Page Box to appear, usually this would be one of the sidebars.
Save and done.
Add the Facebook Like Box to a simple HTML website
If you have a simple html website, just paste the code in your html file in the appropriate location, which will be somewhere between the opening < body > tag and the closing < /body > tag.
Customising The Facebook Like Box
To change the look of the box you can change the following attributes within the iframe code:
href – the URL of the Facebook Page for this Like Box
width – the width of the plugin in pixels. Default width: 300px.
height – the height of the plugin in pixels. The default height varies based on number of faces to display, and whether the stream is displayed. With the stream displayed, and 10 faces the default height is 556px. With no faces, and no stream the default height is 63px.
colorscheme – the color scheme for the plugin. Options: ‘light’, ‘dark’
show_faces – specifies whether or not to display profile photos in the plugin. Default value: true.
stream – specifies whether to display a stream of the latest posts from the Page’s wall
header – specifies whether to display the Facebook header at the top of the plugin.
If you have any questions or suggestions regarding this tutorial please leave me a comment 🙂
