Do you need to create a customized Facebook feed in WordPress?
A customized feed permits you to present posts out of your Facebook web page or group in your WordPress web site. This could make your web site extra partaking and encourage guests to comply with you on Facebook.
In this text, we’ll present you ways to simply create a customized Facebook feed in WordPress.
Why Create a Custom Facebook Feed in WordPress?
With virtually 3 billion month-to-month lively customers, Facebook is the largest social media web site in the world. As a web site proprietor, you will have already created a Facebook web page or group the place you interact along with your viewers.
However, individuals who solely go to your web site gained’t see your Facebook posts. By including a customized Facebook feed you may present guests what’s taking place in your group or web page.
This could make your web site extra partaking and fascinating, particularly should you publish multimedia content material to Facebook resembling movies and pictures.
It’s additionally a wonderful means to promote your Facebook web page or group, which can show you how to get more Facebook likes and develop your following.
If you’re utilizing the Facebook remarketing/retargeting pixel in your web site, then you can too present focused advertisements to your guests.
Having stated that, let’s see how to add a customized Facebook feed to your WordPress web site.
Installing a Custom Facebook Feed Plugin
The finest approach to add a customized Facebook feed to your WordPress web site is through the use of the Smash Balloon Custom Facebook Feed plugin.
This plugin allows you to present Facebook content material and feedback straight in your web site, and even mix posts from a number of Facebook feeds. It additionally makes it straightforward to show highly effective social proof, by embedding Facebook opinions and neighborhood posts in your web site.
The very first thing you want to do is set up and activate the Smash Balloon Custom Facebook Feed plugin. For extra particulars, see our information on how to install a WordPress plugin.
In this publish, we’ll be utilizing the professional model of Smash Balloon because it permits you to present movies and pictures in your Facebook feed, select totally different layouts, filter your feed based mostly on publish kind, and extra.
However, there’s additionally a free version that enables you to create a customized Facebook feed for WordPress, it doesn’t matter what your price range.
Upon activation, you’ll want to go to Facebook Feed » Settings and enter your license key into the ‘License Key’ discipline.
You’ll discover this data underneath your account on the Smash Balloon web site.
After getting into the important thing, click on on the ‘Activate’ button.
Connect Your Facebook Page or Group to WordPress
Smash Balloon Custom Facebook Feed permits you to create a number of feeds out of your totally different Facebook pages and teams. You may even merge feeds to create a customized feed.
To create your first feed, go to Facebook Feed » All Feeds after which click on on ‘Add New.’
Smash Balloon allows you to show posts out of your timeline, pictures, movies, albums, occasions, and extra. For this information, we’ll create a ‘Timeline’ Facebook feed however you may choose any feed kind you need.
After selecting a feed kind, click on on the ‘Next’ button.
Now, you want to choose the Facebook web page or group the place you’ll get the content material from.
To get began, click on on ‘Add New.’
On the following display, select whether or not you’re creating a feed from a Facebook web page or group.
Then, merely click on on ‘Connect to Facebook.’
This opens a popup the place you may log into your Facebook account and select the pages or teams that you really want to use in your feed.
After making your choice, click on on the ‘Next’ button.
Once you’ve achieved that, Facebook will present all the knowledge that Smash Balloon can have entry to, and the actions it could actually carry out.
To limit Smash Balloon’s entry to your Facebook account, merely click on any of the switches to flip them from ‘Yes’ to ‘No.’ Just bear in mind that this may increasingly have an effect on the content material which you could present in the customized Facebook feed.
With that in thoughts, we advocate leaving all these switches enabled.
When you’re prepared, click on on ‘Done.’
After a few moments, you need to see a message that you just’ve efficiently linked your WordPress website to Facebook. You can now click on on ‘OK.’
With that achieved, Smash Balloon will return you to the WordPress dashboard mechanically.
How to Create a Custom Facebook Feed in WordPress
You will now see a popup with the group or web page you simply linked to your WordPress web site. Simply choose the radio button subsequent to your supply after which click on on the ‘Add’ button.
If you by chance closed the popup, then don’t panic. You can merely refresh the tab to reopen the popup.
Once you’ve achieved that, you’ll be returned to the Facebook Feed » All Feeds web page.
Just like earlier than, click on on the ‘Add New’ button after which select the kind of customized Facebook feed you need to create, resembling Timeline, Photos, or Videos.
Then, click on on ‘Next.’ Now, underneath ‘Select a Source’ you’ll see your Facebook group or web page as an choice.
Go forward and choose the web page or group, after which click on on ‘Next.’
You can now select the template that you really want to use as the start line on your feed. All of those templates are totally customizable so you may fine-tune them to completely suit your WordPress blog or web site.
We’ll be utilizing the ‘Default’ template, however you should utilize any template you need.
After selecting a design, click on on the ‘Next’ button.
Smash Balloon will now go forward and create a Facebook feed based mostly in your supply and chosen template. This is a nice begin, however it’s your decision to fine-tune how this feed seems in your web site.
How to Customize Your Facebook Feed
The Smash Balloon Custom Facebook Feed plugin offers you a lot of methods to customise your feed. With that in thoughts, it’s price seeing what adjustments you may make.
On the Facebook Feed » All Feeds display, discover the feed you simply created and click on on its ‘Edit’ button, which appears to be like like a small pencil.
This opens the feed editor, which reveals a preview of how the customized Facebook feed will look in your web site.
On the left-hand aspect, you’ll see all of the totally different settings you should utilize to customise the feed. Most of those settings are self-explanatory, however we’ll rapidly cowl some key areas.
To begin, you may change how your posts are displayed by clicking on ‘Feed Layout.’
On this display, you may change between totally different layouts, resembling masonry and checklist, and alter the feed peak. As you make adjustments, the preview will replace mechanically so you may attempt totally different settings to see what works finest on your web site.
By default, the feed will present the identical variety of posts on desktop computer systems and cell gadgets resembling smartphones.
However, cell gadgets often have smaller screens and fewer processing energy, so it’s your decision to present fewer posts on tablets and smartphones. To do that, simply kind a totally different quantity into the ‘Mobile’ discipline underneath ‘Number of Posts.’
You can preview how your adjustments will look on desktop computer systems, tablets, and smartphones utilizing the row of buttons in the upper-right nook.
By attempting out totally different layouts you may create a customized feed that appears nice, it doesn’t matter what machine the customer is utilizing.
By default, the Facebook feed reveals fewer columns on smartphones and tablets, in contrast to desktop computer systems. This helps all of your content material match comfortably on smaller screens.
However, after testing the mobile version of your WordPress website, chances are you’ll be sad with how the columns look on smartphones and tablets. If that is the case, then you may regulate the columns by altering the numbers in the ‘Columns’ part.
When you’re proud of the adjustments you’ve made, click on on the ‘Customize’ hyperlink on the high of the menu.
This will take you again to the principle Smash Balloon editor.
Next, you may click on on ‘Color Scheme‘ in the left-hand menu and take a have a look at the totally different colours you may add to the Facebook feed.
By default, Smash Balloon makes use of a shade scheme inherited out of your WordPress theme, however you can too select ‘Light’ or ‘Dark,’ and even create your individual customized shade scheme.
By default, Smash Balloon provides a header to your feed, which is your Facebook profile image and the identify of your web page or group.
To change how this appears to be like, click on on ‘Header’ in the left-hand menu.
On this display, you may change the scale and shade of the header, conceal or present your Facebook profile image, and extra.
If you need to take away the header utterly, then click on the toggle to flip it from blue (enabled) to gray (disabled).
Next up is the ‘Posts’ display. Here, you may change how the person posts are displayed contained in the customized Facebook feed.
For instance, you may change between common and boxed types, change the background color, add a boxed shadow, and extra.
By default, Smash Balloon doesn’t embody the Facebook ‘like’ button in your feed.
To encourage extra guests to comply with your Facebook web page, it’s your decision to add this button by deciding on ‘Like Box’ from the editor’s left-hand menu.
After that, merely click on on the ‘Enable’ button in order that it turns blue. Now, should you scroll to the underside of the preview you’ll see a ‘like’ button.
You can fashion this space utilizing totally different settings. For instance, you may select whether or not the button seems on the high or backside of the feed, and whether or not to embody the quilt picture out of your Facebook web page.
When you’re proud of how the ‘like’ button appears to be like, you may transfer on to the ‘Load More Button’ display.
The ‘Load More’ button encourages guests to scroll by way of extra of your Facebook feed.
For this motive, it’s your decision to make the button extra eye-catching by altering its background shade, textual content shade, and label.
Another choice is to take away the ‘Load More’ button utterly by clicking on the ‘Enable’ toggle in order that it greys out.
Disabling the ‘Load More’ button is helpful in case your Facebook feed is time-sensitive. That wat, guests don’t want to scroll by way of your earlier posts that don’t apply to them.
When you’re proud of how the customized Facebook feed is about up, don’t neglect to click on on ‘Save’ to retailer your adjustments.
You’re now prepared to add the Facebook feed to your WordPress web site.
How to Add Your Custom Facebook Feed to WordPress
You can add your customized Facebook feed utilizing a block, widget, or shortcode.
If you’ve created a couple of customized feed, then you definitely’ll want to know the feed’s code should you’re going to use a block or widget.
Simply go to Facebook Feed » All Feeds after which have a look at the feed="" a part of the shortcode. This is the worth you’ll want to add to the block or widget, so make a word of it.
In the next picture, we’ll want to use feed="1".
To use this shortcode in a web page or publish, you should utilize the ‘Custom Facebook Feed’ block in the content editor.
Simply open the web page or publish the place you need to present the feed. Then, click on on the ‘+’ icon to add a new block and begin typing ‘Custom Facebook Feed.’
When the proper block seems, click on to add it to your web page or publish.
The block will present one in all your feeds by default. If you need to use a totally different feed as a substitute, then merely discover ‘Shortcode Settings’ in the right-hand menu.
You can now add the feed="" code to this field. After that, click on on ‘Apply Changes.’
The block will now present your customized Facebook feed, and you may publish or replace the web page to make it reside in your web site.
Another choice is to add the feed to any widget-ready space, such because the sidebar or related part. This is a straightforward approach to present the customized Facebook feed throughout your complete web site.
To get began, go to Appearance » Widgets in the WordPress dashboard. Then, click on on the blue ‘+’ button.
You can now discover the ‘Custom Facebook Feed’ widget.
Then, simply drag it onto the world the place you need to present the feed.
Again, Smash Balloon will present one in all your customized Facebook feeds by default.
To present a totally different feed, kind the feed’s code into the ‘Shortcode Settings’ field after which click on on ‘Apply Changes.’
You can now click on on the ‘Update’ button.
To study extra, see our step-by-step information on how to add and use widgets in WordPress.
Finally, you may add the customized feed to any web page, publish, or widget-ready utilizing a shortcode.
Simply go to Facebook Feed » All Feeds and duplicate the code in the ‘Shortcode’ column. You can now add this code to your web site.
For extra data on how to place the shortcode, please see our information on how to add a shortcode in WordPress.
We hope this text helped you add a customized Facebook feed in WordPress. You may additionally need to see our information on how to add web push notifications to your WordPress site, or take a look at our checklist of the best social proof plugins.
If you favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may discover us on Twitter and Facebook.
by 
