How to Embed a Facebook Group Feed in WordPress

0
77

Do you need to embed posts from a Facebook group in your WordPress web site?

Promoting your Facebook group in your WordPress web site is a wonderful means to get extra engagement and develop your followers. The content material out of your group can even assist preserve your web site contemporary, even for normal guests.

In this text, we’ll present you ways to simply add a Facebook group feed in WordPress.

How to embed a Facebook group feed in WordPress

Why Add Facebook Group Content to Your WordPress Site?

Facebook teams can assist you construct a group, create a sense of loyalty, and construct a optimistic relationship along with your customers. After they be a part of your group, you’ll be able to promote weblog posts, firm updates, and even WooCommerce merchandise to these individuals with out having to spend any cash on on-line advertisements.

Our WPBeginner Engage Facebook group has over 89 thousand lively customers and is rising at an unbelievable tempo.

The WPBeginner Engage Facebook group

After creating your Facebook group, you’ll need to promote that group and drive individuals to it. The greatest manner to develop your Facebook group is by embedding the group feed in your WordPress web site.

In this manner, the individuals who go to your web site can see all the nice content material you’re posting on Facebook. This will encourage them to take a look at your group, have interaction along with your content material, and possibly even click on on the ‘Join’ button.

After embedding the group feed in your web site, new posts will seem in your web site robotically. This makes it a straightforward manner to preserve your web site contemporary, even for normal guests.

With that in thoughts, let’s see how to embed a Facebook group feed in WordPress.

How to Install a Custom Facebook Feed Plugin

The greatest manner to embed a Facebook group feed in WordPress is by utilizing the Smash Balloon Custom Facebook Feed plugin.

This plugin enables you to embed Facebook albums, feedback, evaluations, group posts, and extra in your WordPress web site.

An example of an embedded Facebook group page in WordPress

If you embed videos in WordPress, then Smash Balloon lets customers watch that media with out having to go to Facebook, by opening a lightbox popup straight in your web site.

In this information, we’ll be utilizing the professional model of Smash Balloon because it permits you to present Facebook albums, movies, and pictures in your WordPress web site. However, there’s additionally a free version that permits you to simply embed Facebook status posts in WordPress, it doesn’t matter what your funds.

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.

Upon activation, you’ll want to go to Facebook Feed » Settings and enter your license key into the ‘License Key’ area.

Adding your license to the Smash Balloon plugin

You’ll discover this info beneath your account on the Smash Balloon web site.

After getting into the important thing, click on on the ‘Activate’ button.

How to add the Smash Balloon App to Your Facebook Group

After that, you’ll want to add Smash Balloon’s Facebook app to the Facebook group that you really want to present in your WordPress website.

Note: Due to how the Facebook API is about up, Smash Balloon can solely present posts that have been made after you added the app to your Facebook group.

With that in thoughts, let’s go forward and set up the app earlier than we do anything. In a new tab, log into Facebook and go to your Facebook group.

Then, in the left-hand menu click on on ‘Group settings.’

Your Facebook group settings

After that, scroll to the ‘Manage superior settings’ part.

Here, click on on the pencil icon subsequent to ‘Apps.’

Adding the Smash Balloon app to your Facebook group

This opens a popup exhibiting all of the apps you’ve already added to this group.

Since we would like to set up the Smash Balloon app, click on on ‘Add Apps.’

How to install a Facebook app

In the search bar, sort in ‘Smash Balloon WordPress.’

When the correct app reveals up, give it a click on.

Adding the Smash Balloon app to your Facebook group

A popup will now seem exhibiting all the knowledge the app can entry and any actions it could actually carry out.

If you’re blissful to go forward and set up the app, then click on on ‘Add.’

Giving Smash Balloon access to your WordPress website

After a few moments, it’s best to see a message saying that you just’ve efficiently added the Smash Balloon app to your Facebook group.

Connect Smash Balloon to Your Facebook Group

Now, it’s time to join your Facebook web page WordPress, by going to Facebook Feed » All Feeds and clicking on ‘Add New.’

Embedding a Facebook group feed in WordPress

Smash Balloon enables you to present pictures, occasions, movies, albums, and extra.

Since we would like to embed our Facebook group feed, click on on ‘Timeline’ after which choose ‘Next.’

Embedding a Facebook group timeline in WordPress

After that, you’ll want to choose the Facebook group the place you’ll get the timeline from.

To get began, click on on ‘Add New.’

Connecting WordPress to a Facebook group

On the subsequent display, choose the radio button subsequent to ‘Group.’

After that, simply click on on ‘Connect to Facebook.’

Connecting a Facebook group to WordPress

This opens a popup the place you’ll be able to log into your Facebook account and select the group that you really want to use.

After checking the field subsequent to a number of teams, merely click on ‘Next.’

Selecting your Facebook group

You ought to now see a popup asking you to set up the Smash Balloon WordPress app.

Since we already put in this app, you’ll be able to go forward and click on on ‘Done.’

Adding the Smash Balloon social media plugin to WordPress

How to Create a Facebook Group Feed in WordPress

Now you’ve added your Facebook group to Smash Balloon, it’ll present up as an choice. Simply click on to choose the group after which click on ‘Next.’

Creating a new Facebook group feed for your WordPress website

On this display, you’ll be able to select the template you’ll use as the start line in your Facebook group feed.

All of those templates are totally customizable so you’ll be able to fine-tune the design relying on the way you need to present the standing updates, movies, and pictures out of your Facebook group.

We’re utilizing the ‘Simple Masonry’ template, however you’ll be able to select any template you need.

Selecting a masonry layout for a Facebook group feed

Smash Balloon will now go forward and create the feed primarily based in your Facebook group and the template you’ve chosen.

This is a good begin, however Smash Balloon has a number of settings you should use to customise how this group feed seems to be in your WordPress blog.

How to Customize Your Facebook Group Feed

The Smash Balloon plugin provides you a number of methods to customise how the feed seems in your web site. With that in thoughts, it’s value seeing what adjustments you may make.

On the Facebook Feed » All Feeds display, discover your group feed after which click on on its ‘Edit’ button, which seems to be like a small pencil.

Customizing an embedded social media feed

This opens the Smash Balloon feed editor, which reveals a preview of your Facebook group feed to the correct.

On the left-hand facet, you’ll see all of the completely different settings you should use to customise how the posts seem in your web site. Most of those settings are self-explanatory, however we’ll shortly cowl some key areas.

Customizing a Facebook group feed in WordPress

If you need to change the template you’re utilizing, simply click on on ‘Template.’

Then, choose the ‘Change’ button.

Choosing a new social media template

To begin, you’ll be able to change how your group posts are displayed by clicking on ‘Feed Layout.’

On this display, you’ll be able to swap between masonry and checklist layouts, and alter the feed top. As you make adjustments, the preview will replace robotically so you’ll be able to strive completely different settings to see what seems to be one of the best in your Facebook group.

The Smash Balloon social media layout editor

By default, the Facebook group feed will present a completely different variety of posts on desktop computer systems and cellular gadgets.

You can preview how your feed will look on desktop computer systems, tablets, and smartphones utilizing the row of buttons in the upper-right nook.

Creating a mobile responsive social media feed

After testing the mobile version of your WordPress website, it’s your decision to change the variety of posts that you just present on smartphones and tablets.

To make this transformation, merely discover the ‘Number of Posts’ part and kind a completely different quantity into the ‘Mobile’ area.

Creating a social media layout for smartphones and tablets

You can also need to present fewer columns on smartphones and tablets by altering the ‘Columns’ settings.

For instance, in the next picture, we’re splitting the content material into 3 columns on desktop, 2 columns on tablets, and 1 column on cellular gadgets.

Changing the number of columns in a social media layout

When you’re proud of the structure, click on on the ‘Customize’ hyperlink.

This will take you again to the primary Smash Balloon editor, prepared for you to transfer onto the subsequent settings display, which is ‘Color Scheme.’

Changing your social media color scheme

By default, Smash Balloon makes use of the identical coloration scheme as your WordPress theme, however on this display, you’ll be able to swap to a ‘Light’ or ‘Dark’ coloration scheme.

Another choice is to design your individual coloration scheme by choosing ‘Custom’ after which utilizing the controls to change the background color, change the text color in WordPress, and extra.

Adding a custom color scheme to a social media layout

You can add a header above your group feed, which might embody content material corresponding to your group’s profile image and identify. This can assist guests perceive the content material they’re seeing, and the way they’ll discover your group on Facebook.

To add a header part, click on on ‘Header’ in the left-hand menu.

Adding a header to your Facebook group status feed

On this display, click on on the ‘Enable’ slider to flip it from gray to blue.

After including a header part, you should use the controls to change the scale of the header and its coloration, disguise or present your Facebook profile image, and extra.

Customizing the Facebook group header

If you need to take away the header at any level, then merely click on to flip off the ‘Enable’ toggle.

After that, you’ll be able to change how the person posts look inside your group feed by choosing ‘Post Style’ from the left-hand menu.

After that, click on on ‘Post Style’ once more.

Customizing the style of your social media posts

On this display, you’ll be able to select between a common and boxed structure.

If you choose ‘Boxed’ then you’ll be able to create a coloured background for every submit. You can even make the border-radius bigger to create curved corners, and add a border shadow.

Adding a boxed style to your social media posts

If you select ‘Regular’ then you’ll be able to change the thickness and coloration of the road that separates your completely different social media posts.

In the next picture, we’ve added a thicker line to the group feed and adjusted its coloration.

Adding a border to your Facebook group status updates

You can even customise the person elements inside every submit by going again to the primary settings display.

Once once more, choose ‘Post Style’ however this time select ‘Edit Individual Elements’ as a substitute.

The Smash Ballon Facebook plugin

You’ll now see all of the completely different content material that Smash Balloon contains in every submit, such because the submit creator, date, shared hyperlink field, and extra.

To take away a piece of content material out of your posts, simply click on to uncheck its field.

Hiding content from a social media feed in WordPress

You can even customise how every sort of content material seems to be by clicking on it.

For instance, in the next picture, you’ll be able to see settings to change the scale and coloration of the ‘submit motion’ hyperlinks, corresponding to like, share, and remark.

Adding a post action to a Feed status update feed

You can even change the ‘View on Facebook’ textual content by typing into the ‘Customize Text’ area.

By default, Smash Balloon doesn’t add a Facebook ‘like’ button to your feed. This button makes it simpler for guests to be a part of your group, so it’s your decision to add it to your feed by choosing the ‘Like Box’ settings.

Adding a Facebook like button to WordPress

Then, merely click on on ‘Enable’ in order that the toggle turns blue.

You can now use the ‘Position’ dropdown to add the like field beneath or above the group feed.

Adding a Facebook like button to your WordPress website

You can even use these settings to change the field’s width, or add the group’s cowl picture.

To encourage extra individuals to be a part of your group, it’s your decision to present the entire variety of followers by clicking on the ‘Show followers’ swap.

When you’re proud of how the ‘like’ button is about up, you’ll be able to transfer on to the ‘Load More Button’ settings.

Adding a Load More button to your WordPress website

The ‘Load More’ button provides guests a straightforward manner to scroll via extra of your feed. If they get pleasure from this content material, then they may resolve to be a part of your Facebook group.

With that in thoughts, it’s your decision to make this button stand out by altering its background coloration, hover state, and textual content coloration.

Customizing the Facebook Load More button in WordPress

This button reveals ‘Load More’ by default however you’ll be able to add a customized message by typing into the ‘Text’ area.

Smash Balloon has a lightbox function that permits guests to watch your group’s movies and take a nearer take a look at your pictures with out leaving WordPress.

Visitors can merely click on on any video or picture thumbnail to open the lightbox popup.

Smash Balloon's lightbox feature

They can then scroll via the remainder of the photographs and movies in the feed utilizing the arrows.

To customise the default lightbox, merely choose ‘Lightbox’ from the left-hand menu.

How to customize the Facebook lightbox feature in WordPress

Here, you’ll be able to change the colour of the lightbox’s textual content, hyperlinks, and background colours.

The lightbox popup makes it straightforward for guests to discover your feed, however it additionally permits individuals to scroll via your pictures and movies with out visiting your Facebook group.

If you need to get extra guests to your Facebook group then it’s your decision to disable the lightbox function. To do that, merely click on on the ‘Enable’ toggle so it turns from blue to gray.

How to disable the Smash Balloon lightbox feature

Now, if a customer clicks on any picture or video in the group feed, they’ll be taken to your Facebook group in a new tab.

When you’re proud of how the Facebook group feed seems to be, don’t neglect to click on on ‘Save’ to retailer your adjustments.

You’re now prepared to add this feed to your WordPress web site.

How to Embed Your Facebook Group Feed in WordPress

You can add your Facebook group feed to WordPress utilizing a block, widget, or shortcode.

If you’ve created multiple feed utilizing Smash Balloon, you then’ll want to know the feed’s code should you’re going to use a block or widget.

To get this info, go to Facebook Feed » All Feeds after which take a look at the feed="" a part of the shortcode. You’ll want to add this code to the block or widget, so make a word of it.

In the next picture, we’ll want to use feed="1".

Adding a Facebook group feed to your WordPress website

If you need to embed your Facebook group feed in a web page or submit, then you should use the ‘Custom Facebook Feed’ block.

Simply open the web page or submit the place you need to embed the Facebook feed. Then, click on on the ‘+’ icon to add a new block and begin typing ‘Custom Facebook Feed.’

When the Facebook block seems, click on to add it to your page or post.

The Custom Facebook Feed WordPress plugin

The block will present one among your Smash Balloon feeds by default. If this isn’t your Facebook group feed, then discover the ‘Shortcode Settings’ part in the right-hand menu.

You can now go forward and add the feed="" code, then click on on ‘Apply Changes.’

Embedding a Facebook group feed in WordPress

After that, simply publish or replace the web page to make the group feed 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 permits guests to see your group feed irrespective of the place they’re in your web site.

To get began, merely go to Appearance » Widgets in the WordPress dashboard after which click on on the blue ‘+’ button.

Adding a social media widget to your WordPress website

Once you’ve completed that, begin typing ‘Custom Facebook Feed’ into the search bar.

When the correct widget seems, drag it to the place you need to present the feed.

The WordPress widget editor

The widget will present one of many feeds you created utilizing Smash Balloon.

If this isn’t your Facebook group feed, then sort the feed’s code into the ‘Shortcode Settings’ field. Then, click on on ‘Apply Changes.’

Adding a social media widget to your WordPress website

You can now click on on the ‘Update’ button to make the widget reside. For extra info, see our full information on how to add and use widgets in WordPress.

Finally, you’ll be able to embed the Facebook group feed on any web page, submit, or widget-ready space utilizing shortcode.

Simply go to Facebook Feed » All Feeds and replica all of the code in the ‘Shortcode’ column. You can now add this code to any shortcode block.

For extra info, please see our detailed information on how to add a shortcode in WordPress.

Note: If you might be utilizing a block-enabled theme, you should use the full-site editor to add the ‘Custom Facebook Feed’ block wherever in your web site.

We hope this text helped you learn the way to add a Facebook group in your WordPress web site. You can also need to see our information on how to create a contact form in WordPress, or see our knowledgeable decide of the best Facebook plugins for your blog.

If you favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You can even discover us on Twitter and Facebook.

The submit How to Embed a Facebook Group Feed in WordPress first appeared on WPBeginner.



Source link