Integrating a brand’s Facebook feed into your website allows visitors to view the latest updates, announcements, and community interactions without leaving your site.
Although there are manual methods to display Facebook content, they are not the most effective solutions.
After considering various options, we’ve chosen Smash Balloon for our custom Facebook feeds. It is user-friendly, feature-rich, and ideal for WordPress users at any skill level.
In this guide, we will show you how to create a custom Facebook feed in WordPress using our proven method.
Why Should You Create a Custom Facebook Feed in WordPress?
With over 3 billion monthly active users, Facebook is the largest social media platform globally. As a website owner, you may have already established a Facebook page or group to connect with your audience.
However, visitors to your website may miss out on your Facebook posts. By incorporating a custom Facebook feed, you can showcase what’s happening on your group or page.
This addition can enhance your website’s engagement and appeal, particularly if you share multimedia content on Facebook, such as videos and images.
This is an excellent opportunity to promote your Facebook page or group, helping you increase your likes and expand your audience.
Now, let’s explore how to integrate a custom Facebook feed into your WordPress.org site. Use the quick links below to navigate through this step-by-step guide:
- Step 1: Install the Smash Balloon Custom Facebook Feed Plugin
- Step 2: Connect Your Facebook Page or Group to WordPress
- Step 3: Create a Custom Facebook Feed in WordPress
- Step 4: Customize Your Facebook Feed
- Step 5: Add Your Custom Facebook Feed to WordPress
- Bonus Tip: How to Integrate Additional Social Media Feeds into WordPress
Step 1: Install the Smash Balloon Custom Facebook Feed Plugin
The easiest and most user-friendly method to add a custom Facebook feed to your WordPress site is by utilizing the Smash Balloon Custom Facebook Feed plugin.
This Facebook plugin allows you to display your content and comments directly on your site, and even merge posts from various Facebook feeds. It also simplifies the process of showcasing social proof by embedding Facebook reviews and community posts on your website.
Start by installing and activating the Smash Balloon Custom Facebook Feed Pro plugin. For detailed instructions, check our guide on installing a WordPress plugin.
In this article, we will utilize the pro version of Smash Balloon, which enables you to display videos and photos in your Facebook feed, select various layouts, filter your feed by post type, and much more.
There is also a free version available that lets you create a custom Facebook feed for WordPress, making it accessible for any budget.
Once activated, navigate to Facebook Feed » Settings and input your license key in the ‘License Key’ field.
You can find this information in your account on the Smash Balloon website.
After entering the key, simply click the ‘Activate’ button.
Step 2: Link Your Facebook Page or Group to WordPress
Smash Balloon Custom Facebook Feed allows you to create multiple feeds from your various Facebook pages and groups. You can even combine feeds to make a custom feed.
To create your first feed, go to Facebook Feed » All Feeds and then click on ‘Add New.’
Smash Balloon allows you to showcase Facebook albums, posts from your timeline, videos, events, and more. In this guide, we will focus on creating a ‘Timeline’ Facebook feed, but feel free to choose any feed type that suits your needs.
After selecting a feed type, click the ‘Next’ button to proceed.
Next, you need to choose the Facebook page or group from which you want to pull content.
To get started, click on ‘Add New.’
On the following screen, decide if you want to embed a Facebook group feed in WordPress or create a Facebook page feed.
Then, simply click on ‘Connect to Facebook.’
This will open a popup where you can log into your Facebook account and select the pages or groups you wish to include in your feed.
After making your selections, click the ‘Next’ button.
Once you complete this step, Facebook will display all the information that Smash Balloon will access and the actions it can perform.
If you want to limit Smash Balloon’s access to your Facebook account, you can toggle any of the switches from ‘Yes’ to ‘No.’ Keep in mind that this may impact the content available in your social media feed.
We recommend keeping all these switches enabled for the best experience.
When you’re ready, click ‘Done.’
After a moment, you will see a confirmation message indicating that your WordPress website is successfully linked to Facebook. You can now click ‘OK.’
Once completed, Smash Balloon will automatically redirect you back to the WordPress dashboard.
Step 3: Create Your Custom Facebook Feed in WordPress
A popup will appear displaying the group or page you just connected to your WordPress site. Simply select the radio button next to your chosen source and click the ‘Add’ button.
If you accidentally closed the popup, don’t worry. Just refresh the tab to reopen it.
After completing that step, you will be taken back to theFacebook Feed » All Feedspage.
As before, click the ‘Add New’ button and select the type of custom Facebook feed you wish to create, such as Timeline, Photos, or Videos.
Next, under ‘Select a Source’, you will find your Facebook group or page listed as an option.
Select the desired page or group, then click ‘Next.’
You can now choose a template to serve as the foundation for your feed. All templates are fully customizable, allowing you to adjust them to seamlessly match your WordPress blog or website.
We will use the ‘Default’ template, but feel free to choose any template you prefer.
After selecting a design, click the ‘Next’ button.
Smash Balloon will now create a Facebook feed based on your selected source and template. This is a great beginning, but you may want to adjust how this feed appears on your website.
Step 4: Personalize Your Facebook Feed
The Smash Balloon Custom Facebook Feed plugin offers numerous customization options for your feed. It’s beneficial to explore the modifications you can implement.
On theFacebook Feed » All Feedsscreen, locate the feed you just created and click the ‘Edit’ button, represented by a small pencil icon.
This will open the feed editor, displaying a preview of how your custom Facebook feed will appear on your website. Here, you can view all the embedded Facebook videos, status updates, and other content that will be featured on your WordPress site.
On the left side, you will find various settings available to customize the feed. Most of these settings are straightforward, but we will briefly discuss some important areas.
To begin, you can modify how your posts are displayed by clicking on ‘Feed Layout.’
On this screen, you can choose from various layouts and adjust the feed height. You can also create a responsive slider by selecting the ‘Carousel’ layout.
As you make adjustments, the preview will update in real-time, allowing you to experiment with different settings to find the best fit for your website.
By default, the feed displays the same number of posts on both desktop computers and mobile devices like smartphones.
However, since mobile devices typically have smaller screens and less processing power, you might want to display fewer posts on tablets and smartphones. Simply enter a different number in the ‘Mobile’ field under ‘Number of Posts.’
You can see how your changes will appear on desktop computers, tablets, and smartphones by using the buttons located in the upper-right corner.
By experimenting with different layouts, you can design a custom feed that looks appealing on any device your visitors use.
By default, the Facebook feed shows fewer columns on smartphones and tablets compared to desktop computers, ensuring that all your content fits well on smaller screens.
After reviewing the mobile version of your WordPress site, you might find that the column layout doesn’t look great on smartphones and tablets. If that’s the case, you can modify the columns by adjusting the numbers in the ‘Columns’ section.
Once you are satisfied with your adjustments, click on the ‘Customize’ link located at the top of the menu.
This action will return you to the main Smash Balloon editor.
Next, select ‘Color Scheme’ from the left-hand menu to explore various color options for your Facebook feed.
By default, Smash Balloon adopts a color scheme from your WordPress theme, but you can opt for ‘Light’ or ‘Dark’ themes, or even design your own custom color scheme.
For instance, you might want to alter the text color to ensure it contrasts well with your theme’s background.
Smash Balloon automatically includes a header in your feed, featuring your Facebook profile picture and the name of your page or group. This provides additional context beyond simply showing your Facebook timeline on WordPress.
To modify the appearance of the header, click on ‘Header’ in the left-hand menu.
On this page, you can adjust the header’s size and color, choose to display or hide your Facebook profile picture, and more.
To completely remove the header, click the toggle to switch it from blue (enabled) to grey (disabled).
Next, navigate to the ‘Posts’ screen where you can customize the appearance of individual posts within the custom Facebook feed.
You can choose between regular and boxed styles, adjust the background color, add a box shadow, and more.
By default, Smash Balloon does not include the Facebook ‘like’ button in your feed.
To encourage more visitors to follow your Facebook page, consider adding this button by selecting ‘Like Box’ from the left-hand menu in the editor.
After that, simply click the ‘Enable’ button until it turns blue. Now, if you scroll to the bottom of the preview, you will see the ‘like’ button.
You can customize this area using various settings. For instance, you can decide whether the button appears at the top or bottom of the feed and whether to include the cover photo from your Facebook page.
Once you are satisfied with the appearance of the ‘like’ button, you can proceed to the ‘Load More Button’ screen.
The ‘Load More’ button encourages visitors to explore more content in your Facebook feed.
To make the button more appealing, consider changing its background color, text color, and label.
An alternative is to completely remove the ‘Load More’ button by toggling the ‘Enable’ option to grey.
Disabling the ‘Load More’ button is beneficial for time-sensitive Facebook feeds. For instance, if your posts focus primarily on upcoming events, visitors may not need to view older posts that are no longer relevant.
Once you are satisfied with the setup of your custom Facebook feed, remember to click ‘Save’ to apply your changes.
You are now prepared to integrate the Facebook feed into your WordPress website.
Step 5: Integrate Your Custom Facebook Feed into WordPress
To embed Facebook feeds into WordPress, click the ‘Embed’ button located next to ‘Save.’
You will be presented with two options for adding your Facebook feed: shortcode or block.
Based on our experience, using a block to insert your Facebook feed is simpler. You can either click ‘Add to a Page’ or ‘Add to a Widget’ if your theme supports widget areas.
For this guide, we will demonstrate using the ‘Add to a Page’ option as an example.
Next, choose the page where you want to insert the Facebook feed.
Simply select a page and click ‘Add.’
You will be taken to the block editor. From there, click the ‘+ Add block’ button and search for the Facebook Feed block.
At this point, you can easily drag and drop the block to your desired location.
Next, select the source for your Facebook feed.
For example:
Your Facebook feed should now be displayed.
Simply click ‘Update’ to save your changes.
If you prefer using the shortcode method, you can copy the shortcode from the Embed Feed popup you accessed earlier.
Then, paste the shortcode into a shortcode block in the content editor while editing a WordPress page, post, or widget. Once finished, click ‘Update.’
For detailed instructions on how to insert the shortcode, please refer to our guide on adding a shortcode in WordPress.
Bonus Tip:How to Integrate Additional Social Media Feeds into WordPress
If you want to embed Facebook status updates, showcase your timeline, display Facebook albums, and more, the Custom Facebook Feed plugin is the ideal choice for WordPress.
Many websites manage several social media accounts, including YouTube, Twitter, and Instagram. If you produce distinct content for each platform, it’s beneficial to display this content on your WordPress site.
You can easily showcase the latest videos from your YouTube channel on your WordPress site by using the free Smash Balloon Feeds for YouTube plugin.
With over 1 billion active users each month, Instagram is an excellent platform for promoting your products, services, and blog posts.
If you have an Instagram account, you can create a customized Instagram feed and add it to any webpage, post, or widget-ready area. Additionally, you can incorporate shoppable Instagram images into your WordPress site.
We hope this guide has helped you integrate a custom Facebook feed into your WordPress site. You may also find our comprehensive guide to social commerce for WordPress users and our article on automating Facebook posts via WordPress helpful.
If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
