How to Embed a Facebook Group Feed and Page Timeline in WordPress
With over two and a half billion active users, Facebook is easily the most popular social network there is. Like it or not, Facebook is omnipresent and alive. And with a little help from us, you can create a Facebook feed for your WordPress website, making your social media content accessible to your visitors without them having to leave your website.
But before we get to the how, let‘s talk about the why.
It should firstly be said that the internet, as a forum for discussion, has changed. Do you remember IRC? When have you last visited a bulletin board? As user habits and fashions have changed, forums and chatrooms have largely been supplanted by social media. Facebook groups and Facebook pages are now an indispensable communication avenue for your customers. Fortunately, with only a little effort, you can embed a Facebook page‘s timeline or a Facebook group feed into your website.
Embedding a Facebook page or group into your website will let you update your website visitors in real time, without even having to update the contents of your site. Your visitors – and your community managers – will appreciate it.
Note that this only works for Facebook pages and public groups, in accordance with Facebook’s terms and conditions. You cannot embed a personal timeline.
Qode Themes: Top Picks
View Collection
Fortunately, Facebook‘s developers are aware of this demand, and have gone out of their way to make it easy for other web developers to add a Facebook embed option into their own software. If you are using a theme which does not have this functionality, you can introduce it yourself, though it does mean you need to change the code of your theme. Be safe, and remember to back up everything. If you don‘t feel confident editing code, scroll right down to the next section and find out how you can achieve the same effect using a plugin.
Firstly, you need to find out your Facebook page URL. In our case, it is:
https://www.facebook.com/QodeInteractive
Next, to generate the code you need, go to Facebook‘s Page Plugin page.
Here, you can generate the link for your Facebook page‘s widget. Once you paste your Facebook page URL into the designated field, you will see that your page is loaded into the preview space.
You will see your Page‘s profile image, its name, the number of likes and the cover image right at the top.
The preview also features the Like Page button (or the Liked notification if you have already liked the page) and the Shop Now button, with the link to your Facebook store, if you have set it up. Immediately underneath will be the friends bar. If any of your friends have liked the page, you will see how many, and their profile pictures. If not, you will be prompted to Be the first of your friends to like this.
Below that, you will find your Facebook posts, with the Like, Comment and Share buttons underneath each one, so your users can interact with them without navigating away from your website.
Above the preview space are some fields and checkboxes: The Facebook Page URL field, which we have already covered, the Tabs field, which is by default set to show your timeline, but you can use it for other page tabs (such as events, for instance), and the Width and Height field. Width can be set to anything between 180 and 500 pixels, while height must be set to anything above 70 pixels. Leaving these fields blank makes the widget adopt default values: 340 by 500 pixels. We will leave them at their default values, but you can make them suit your social content – and website style – better.
You can use the checkboxes immediately below to select a Small Header or Hide the Cover Photo, making your embedded page more compact. Here you will also find the Adapt to plugin container width and Show Friend‘s Faces checkboxes, which are checked by default. We feel we have enough space for this widget, so we will leave them checked.
Scrolling down, you can find a large number of options along with code you can use to customize your Facebook page widget. There are also in-depth explanations for people who really like to get into code. We like the look of our widget just the way it is, so we will click the Get Code button. We now have two snippets of code.
The first piece of code needs to be added to your theme‘s header.php file. You will find it in Appearance/Theme Editor, on the right-hand side, among the Theme Files. You need to paste the first bit of code underneath thetag. Remember to click the Update File button at the bottom of the page.
The next bit of code goes wherever you want your plugin to appear on the page. To insert it into a post using Gutenberg, for instance, simply click the + sign and add a Custom HTML block to your post, then paste the HTML into its field. Of course, if you are working with Elementor, you need a Custom HTML element for the code, and if working with the Classic editor, simply edit the post or page in text mode and paste the code.
And your Facebook page is there for your website visitors!
But maybe you are uncomfortable fiddling with your website’s code – that’s fine! There is another solution you can use. You can embed a Facebook page into your website using a plugin.
The plugin we will be using is Smash Balloon Social Post Feed, formerly known as Custom Facebook Feed. It allows you to generate a feed that blends into your website. However, in its free version it will not embed any kind of graphics. Your text posts and links will be there, through. We have created a Test Page on Facebook and populated it with some randomly generated content for this demonstration.
Once you have installed and activated the plugin, you need to log into your Facebook account and connect it to the plugin. Simply click the big blue Connect a Facebook account button in the Configuration tab and follow the instructions on the screen.
You will be prompted to choose whether you wish to embed a page or a group feed. We will select a page feed for this part of the demonstration.
Log into your Facebook account and you will be prompted to select which page‘s feed you‘d like to embed. You will only be able to select the pages you are admin of. We will select our Test Page.
Next up, you will be brought to the permissions screen. In order for the plugin to function properly, we will let it Read content posted on the Page, Manage accounts, settings and webhooks for a Page, and Read user content on your Page (though you may choose to grant it fewer permissions), then click Done.
Once you do that, you will be returned to the plugin‘s settings screen. You will be prompted to select a page. Again, we will choose our Test Page, and then click Connect this page to the plugin.
The plugin will automatically fill in your Facebook Page ID and your Facebook Access Token. By default, your feed will tend to look like the rest of your website. You can customize it a great deal using the options in the Customize tab. Once done, you need to Save your Settings before scrolling down.
The Configuration tab also contains some basic settings. Here you need to select the Page feed, choose which posts you want to show (we went with Only the page owner), as well as select the Number of posts to display (which could have a different setting for mobile devices). We will leave the rest of the settings alone, but you can fiddle with the way Facebook software parses your posts, change the time during which your plugin Checks for new posts, which Localized version of Facebook you wish to use, as well as your Timezone. Once you are satisfied, you need to save Settings & Clear Cache. Before you leave the settings page, copy the shortcode [custom-facebook-feed], since you will need it to display your feed on a page or post.
We will demonstrate your facebook feed as part of a post, but it works just the same for a WordPress page. If you are working with Gutenberg, you need to add a shortcode block. Simply create a shortcode block, paste the shortcode you previously copied from the plugin’s settings, and you are ready to go. When working with Elementor, you need to use the shortcode element from your left-hand side menu, and if you are using the Classic editor, you need to paste the shortcode where you want it, provided you are editing in Text mode.
And our post now proudly displays our Facebook page‘s feed. Note that image content isn‘t visible (that‘s a feature of the plugin‘s pro version), but the text and the links are there.
The same plugin, Smash Balloon Social Post Feed, can be used to embed a group feed. It works only a little different than a page. When prompted, you need to select Facebook Group in the drop-down menu.
You will be guided via prompts through Facebook, where you need to select the groups you wish to connect to the plugin (obviously different for each account), before finally returning to the plugin and selecting the group you wish to embed. For us, it is the Test Group we created. Once we have selected it, we will click the Use token for this Group button.
Now, in order for the plugin to function correctly, you need to allow the plugin to access the group from Facebook‘s group settings screen. You can get there easily by following the “here” link.
Scroll down all the way to Advanced settings and click the Pencil icon to edit the Apps permissions.
Next, search for the Smash Balloon plugin, and select it.
Finally, click the Add button to attach the app to the group.
In order to use the plugin‘s shortcode to display one timeline instead of the other, you need to make the group your primary feed. You can do this by clicking the Make Primary Feed button. If you want to show multiple feeds using this plugin, you will need to do some shortcode editing. You can find the developer’s tutorial by clicking on the multiple feeds link in the Configuration tab.
You also need to scroll to the Settings section of the Configuration tab and change the setting of Is it a page or group? to Group. Then you need to copy the [custom-facebook-feed] shortcode.
The shortcode works the same for a group as it does for a page. If you are a Gutenberg user, simply create a shortcode block by clicking on the plus sign and selecting a shortcode block. Then you need to paste the shortcode in its field to work. Of course, if you are using Elementor, you need to drag and drop the shortcode element from the left-hand side menu and paste the shortcode in its field. For the Classic editor, simply paste the shortcode where you want the feed to appear while making sure you are editing your post or page in text mode.
And your group will appear as part of your website.
In Conclusion
As you have seen, there are several ways of embedding a Facebook feed, be it for a page or a group, into your WordPress website. But which one is for you? As always, it depends on what you want to use the Facebook feed for on your website. If you want to open a window into Facebook so that your visitors can follow your Page content without leaving your website, perhaps the best choice is Facebook‘s native Page plugin. However, if you don‘t feel confident with altering your page‘s code, or if you want to integrate a Facebook group into your website as a forum-like feature, the Smash Balloon plugin might be a better choice. But for full effect you might want to invest in the Pro version of the plugin. Either way, social media integration is now only a short step away.
