Hi, this is Linkon from TrendingWP, and in today’s article, we will see how to add a Facebook page to your WordPress websites using the Facebook page plugin. With the Facebook page plugin, you can easily embed your Facebook page timeline feed in your WordPress website, and users will be able to interact with your Facebook page from within your website.
You can also display your upcoming Facebook events on the website, and visitors will be able to subscribe to the events. You can also add a tab from where users can send you messages on Facebook from within your WordPress website. Now let’s see how to achieve it.
- First of all, you will need the URL of your Facebook page.
- You can get that by opening your page in the web browser.
- Copy that URL because you will need it in the next step.
- Now to use the Facebook page plugin, go to the plugin page provided by Facebook on developers.facebook.com.
Its link is given in the description below. You can copy it from there. Once you are on this page, paste the URL of your Facebook page in this URL field. In the Tabs field, write what tabs you want to display while showing your page on the website.
Facebook Page Tabs Types
Facebook provides three types of tabs. Timeline, events, and messages. “timeline” will allow you to display the recent posts from your Facebook page. Simultaneously, the “events” will add a new tab named “Events” from where users will be able to see upcoming events and subscribe to the events.
If you want that users can also send you a message from within your website, add “messages” in the tab field; doing this will add a “Messages” tab, and from here, visitors can send a message. Here, you can set the width and height of the embedded Facebook Page for your website, but we will recommend to leave these fields blank and tick mark this option saying “Adapt to plugin container width” here.
It will do that the embedded Facebook Page will automatically take the width of the parent container. Here other settings like “Use Small Header” and “Hide Cover Photo” are self-explanatory, and you can configure them as required.
Facebook Page Important Settings
If you want to know more about the settings, you can go through the documentation given below on Facebook’s page. Once you are done with the settings, click on the “Get Code” button here. Facebook will provide you with two options to display the Facebook page on your website.
One method is to use “JavaScript SDK,” and the second method is to use an “IFrame.” We would recommend the “JavaScript SDK” method because while using the “IFrame” method, we found that it produced undesirable results, and the Facebook page was not displaying correctly.
While the “JavaScript SDK” method was working fine. Now to use this method, let’s go to the WordPress website, and let’s say we want to show the Facebook page in our widgets area just under the “Recent Comments”.
- To do that, let’s go to the WordPress admin area and go to the “Widgets” section.
- We will add a “Text” widget just under the “Recent Comments” widget.
- From here, select the “Text” tab instead of “Visual”.
- Now grab the code from the Facebook page plugin.
- First, copy this JavaScript code from here.
You have to place this code on your website so that it appears on every page on which you want to embed the Facebook page. The recommended place to put the code is right after the opening body tag, but you can also add it in the header or in the widget section itself.
Add FB Page Widget in WordPress
So, let’s copy it and paste it in the “Text” widget here. This second code, which is actually an HTML code, is used to show the website’s Facebook page. Paste it anywhere on your website where you want to show the page since we want to show the page under the “Recent Comments” widget so we will paste it in the “Text” widget that we have created.
After pasting the code, click on the “Save” button and then “Done.” Now refresh the page, and here you can see that the Facebook page has been embedded successfully, and visitors can interact with your page directly from within your website.
Visitor can like the page by clicking the like button and then confirm it, and they can see the upcoming events on your Facebook page and subscribe to the events as well. Visitors can also message you directly from this embedded Facebook page from the “Messages” tab. I hope you enjoyed the article, and if you do, please hit the like button and don’t forget to share us on Facebook and Twitter.