If you haven’t heard yet, Facebook is doing away with it’s long running Facebook Like Box widget. Come June 23rd it’ll be gone for good. But no worries, Facebook will be replacing the old Like Box with the modernized Facebook Page Plugin, which looks an awful lot like the Google+ Badges.
This past week, I added the Facebook Page Plugin to my website and so I’m sharing this quick tutorial with you so you can update your own WordPress website.
Customize the Look of your Facebook Page Plugin
So, let’s get started.
First, you’ll need to visit this link: https://developers.facebook.com/docs/plugins/page-plugin.
Once you’re there, you’ll see a space where you can enter in your Facebook Page URL and add some options.
I don’t recommend adding a width and height unless needed, because leaving those spaces empty will allow your Facebook widget to maintain auto settings and flex to different widths. An important consideration if you have a mobile responsive theme.
You’ll be able to select additional options, including showing friend’s faces, hiding the cover photo, or showing page posts. Select the options you think will work best for your website. If you’re unsure, I recommend using the settings you see in the screenshot below.
Below is a quick preview of the desktop and mobile versions. As you can see, it looks good in both formats. This was something that often caused trouble when integrating the old Facebook Like Box on mobile responsive themes. They didn’t always look their best.
Now, once you’re done entering your Facebook Page URL and selecting your options, you’ll need to hit the “Get Code” button at the bottom of the configuration box.
Add your Facebook Page Plugin Code to WordPress
— Genesis users scroll down for alternate instructions —
In your WordPress dashboard, go to “Appearance” → “Editor”. Find your theme’s “footer.php” file and use CTRL+F to search for the opening “” tag.
Once you’ve found the “<body>” tag, you’ll need to insert the first code snippet (seen in red below) to your theme’s “footer.php” file. Once done, hit “Update File”.*
*If you’re relatively new to making code edits, make sure you backup the file first or save a copy of the original code somewhere before editing this file.
— GENESIS USERS: In your WordPress dashboard, navigate to “Genesis” → “Theme Settings”. Scroll down to the last customization area on the page, titled “Header and Footer Scripts”. You’ll need to enter the first code snippet under the box titled, “Enter scripts or code you would like output to wp_footer():”. Once you’re done, hit “Save Settings”.
Add the Final Code Snippet to your WordPress Widget
To add the final code snippet to your website, go to “Appearance” → “Widgets” to place the second Facebook Page Plugin code in a widget. You’ll need to grab a Text Widget and drag it to the widget area where you want your Facebook Page Plugin to display (see below). Once you’ve added the code, simply hit “Save”.
And that’s it!
If you have a question or comment, please leave it below. And if you’ve installed the Facebook Page Plugin on your WordPress website, tell us what you think of it.
Leave a Reply