Tips on how to Show Your Fb Timeline in WordPress

by | Jan 16, 2023 | Etcetera | 0 comments

Do you want to show your Facebook timeline posts in WordPress?

By the use of together with your Facebook updates to WordPress, you’ll have the ability to keep your web page recent and engaging while moreover encouraging visitors to watch you on Facebook.

In this article, we’ll show you discover ways to merely display your Facebook timeline in WordPress.

How to display your Facebook timeline in WordPress

Displaying Your Facebook Timeline in WordPress

One of the crucial perfect techniques to embed your Facebook timeline in WordPress is by way of the use of the Wreck Balloon Customized Fb Feed plugin.

This plugin signifies that you’ll embed Fb albums, comments, reviews, community posts, and further for your web page.

An example Facebook timeline, created using Smash Balloon

For this knowledge, we’ll use Break Balloon most sensible charge as it lets you show footage and flicks from your Facebook timeline.

Visitors can also scroll by way of your content material subject matter in a lightbox popup, without ever leaving your internet web page. However, there’s moreover a unfastened model that permits you to show text and links from your timeline, it doesn’t subject what your finances.

Upon activation, you’ll need to transfer to Facebook Feed » Settings and enter your license key into the ‘License Key’ field.

Adding a license key to Smash Balloon

You’ll to find this information beneath your account on the Break Balloon internet web page.

After getting into the vital factor, click on on on the ‘Activate’ button.

Connecting a Facebook Internet web page or Workforce to WordPress

Next, you want to make a decision whether or not or to not display the timeline from a Facebook internet web page or body of workers timeline. We’re going to use a Facebook internet web page then again the stairs can be largely the an identical for Facebook groups.

For a additional detailed check out groups, please see our entire data on learn how to embed a Fb staff feed in WordPress.

To glue your Facebook internet web page or body of workers to WordPress, transfer to Facebook Feed » All Feeds and then click on on on ‘Add New.’

Displaying your Facebook timeline in WordPress

Break Balloon signifies that you’ll create different feeds to show your Facebook {photograph} albums, events, timeline, and further.

Since we wish to display our Facebook timeline in WordPress, you’ll need to click on on on ‘Timeline’ and then click on on on ‘Next.’

How to add a Facebook timeline to your WordPress website

After that, you’ll be in a position to select the Facebook internet web page or body of workers that you want as a way to upload to your web page.

Simply click on on on ‘Add New’ to get started.

Adding a Facebook group or page timeline to WordPress

On the next visual display unit, make a selection whether or not or now not you want to embed the timeline from a internet web page or body of workers.

After making this choice, transfer ahead and click on on on ‘Connect to Facebook.’

Connecting a Facebook page or group to WordPress

This opens a popup where you’ll have the ability to log into your Facebook account and make a selection the pages or groups that you want to use.

After that, click on on on ‘Next.’

Embedding a Facebook page or group in WordPress

On every occasion you’ve achieved that, Facebook will show all the wisdom that Break Balloon could have get admission to to, and the actions it will perform for your Facebook internet web page or body of workers.

To restrict Break Balloon’s get admission to to your Facebook account, merely click on on any of the switches to turn it from ‘Positive’ to ‘No.’ Merely remember that this may occasionally most probably prohibit the Facebook content material subject matter that appears for your WordPress weblog or internet web page.

With that throughout ideas, you should go away all the switches enabled on each instance possible.

Giving Smash Balloon permission to access your Facebook page or group

Next, click on on on the ‘Completed’ button.

After a few moments, you should see a message confirming that you just’ve comparable your WordPress web page to Facebook. Now you’ve achieved that, it’s time to click on on on ‘OK.’

Linking WordPress and Facebook

Break Balloon will now take you once more to the WordPress dashboard automatically.

Recommendations on Embed Your Facebook Timeline in WordPress

At this stage, you’ll see a popup with the group or internet web page you merely connected to WordPress.

Simply make a selection the radio button next to this provide and then click on on on the ‘Add’ button.

Adding a Facebook page timeline to WordPress

For individuals who accidentally closed the popup, don’t concern. Simply refresh the tab to reopen the popup.

After that, WordPress will take you once more to the Facebook Feed » All Feeds internet web page automatically. Similar to quicker than, click on on on the ‘Add New’ button, make a selection ‘Timeline’ and then click on on on the ‘Next’ button.

Now, make a selection your Facebook internet web page or body of workers, and click on on on ‘Next.’

Choosing a Facebook page or group as your timeline source

You’ll make a selection a template to use as the starting point in your embedded timeline. All of the ones templates are completely customizable so that you’ll have the ability to fine-tune the design depending on how you want to turn the timeline for your WordPress internet web page.

See also  Learn how to Configure WooCommerce Settings

We’re the use of the ‘Default’ template, then again you’ll be in a position to select any template you want. You’ll moreover business the template at a later date should you’re no longer happy with it.

Choosing a template for your embedded Facebook timeline

Whilst you’re ready, click on on on the ‘Next’ button.

Break Balloon will now transfer ahead and create a timeline feed in step with your template and your Facebook internet web page or body of workers. This is a excellent get began, then again chances are high that you’ll wish to fine-tune how the timeline seems to be like for your WordPress web page.

Recommendations on Customize Your Embedded Facebook Feed

The Break Balloon Custom designed Facebook Feed plugin will give you various ways to customize how the timeline turns out for your web page. With that throughout ideas, let’s see the opposite changes you’ll have the ability to make to your Facebook timeline.

On the Facebook Feed » All Feeds internet web page, to find your timeline feed and then click on on on its ‘Edit’ button, which turns out like a small pencil.

Editing the Smash Balloon Facebook feed

This opens the Break Balloon feed editor, which displays a preview of the Facebook body of workers or internet web page timeline to the suitable.

On the left-hand side, you’ll see all the settings you’ll have the ability to use to change how the timeline seems to be like. These types of settings are self-explanatory, then again we’ll in short quilt each house.

Customizing the Facebook timeline feed

For individuals who’re no longer happy with how the feed seems to be like, you then’ll be in a position to check out a novel template by way of clicking on the ‘Template’ menu chance.

Then, make a selection the ‘Business’ button.

The Smash Balloon social media templates

After that, you’ll have the ability to business how your posts are displayed by way of clicking on ‘Feed Construction.’

On this visual display unit, you’ll have the ability to switch between tick list and masonry layouts. As you make changes, the preview will change automatically so that you’ll be in a position to check out different layouts to look what seems to be like the best in your Facebook timeline.

Changing the layout for your Facebook social media feed

You’ll moreover business the feed top, and the selection of posts that Break Balloon displays on desktop pc methods, smartphones, and tablets.

For individuals who do business the selection of posts, you then’ll have the ability to preview how your feed will look on desktop pc methods and cell units the use of the row of buttons inside the upper-right corner.

Testing your social media feed on mobile

When trying out the cellular model of your WordPress web page, you may additionally wish to business the selection of columns that Break Balloon displays on desktops, tablets, and smartphones.

For example, inside the following image, we’re splitting the content material subject matter into 4 columns on desktop, 3 columns on tablets, and a few column on cell units. This will likely lend a hand your timeline fit with ease on the visual display unit, it doesn’t subject what more or less tool the client is the use of.

Changing the number of columns on smartphones and tablets

Whilst you’re happy with the layout, click on on on the ‘Customize’ link.

This will likely most probably take you once more to the main Break Balloon editor, so that you’ll have the ability to switch without delay to the next menu chance, which is ‘Color Scheme.’

Changing the color scheme of your social media feed

By the use of default, your timeline will use the an identical colors as your WordPress theme, then again this visual display unit moreover lets you switch between ‘Delicate’ and ‘Dark’ layouts.

You’ll even create your personal color scheme by way of deciding on ‘Custom designed’ and then the use of the settings to trade the background colour, the link color, trade the textual content colour in WordPress, and further.

Changing the colors of your embedded Facebook timeline

By the use of default, Break Balloon supplies a header to your feed, which is your quilt {photograph}, profile symbol, and the name of your Facebook internet web page.

To change how this section seems to be like, click on on on ‘Header’ inside the left-hand menu.

Adding a cover photo and header to an embedded Facebook timeline

On this visual display unit, you’ll have the ability to business the dimensions of the header and color, hide or show your Facebook profile symbol, and further.

You’ll moreover switch between the default ‘Visual’ header and a ‘Text’ header.

Adding a header to the Facebook timeline

Want to remove the header completely? Then simply click on on on the ‘Allow’ toggle to turn it off.

After that, you’ll have the ability to business how the individual posts look inside your body of workers feed by way of deciding on ‘Post Style’ from the left-hand menu.

How to add a Facebook timeline to your WordPress website

On the next visual display unit, you’ll have two different possible choices.

See also  The way to Combine Sq. Bills in WordPress (Step by way of Step)

To start, transfer ahead and click on on on ‘Post Style.’

Styling the individual posts inside an embedded Facebook feed

On this visual display unit, you’ll be in a position to choose from a normal and boxed layout.

If you select ‘Boxed’ you then’ll have the ability to create a colored background for each post. This will likely lend a hand your Facebook posts stick out from the rest of your internet web page and may also make the text more uncomplicated to be told.

Using the boxed post style in your Facebook feed

You’ll moreover make the border-radius higher to create curved corners, otherwise you’ll have the ability to add a shadow.

If you choose ‘Commonplace,’ you then’ll have the ability to business the thickness and color of the street that separates your different social media posts.

Smash Balloon's regular post style

You’ll moreover customize the individual parts inside of each post by way of going once more to the main settings visual display unit.

Once all over again, make a selection ‘Post Style’ then again this time make a selection ‘Edit Particular person Elements’ instead.

On this visual display unit, you’ll see all the different content material subject matter that Break Balloon contains in each timeline post, such since the post author, event establish, shared link box, and further.

To remove a piece of content material subject matter from your posts, simply click on directly to uncheck its box.

How to edit individual elements inside a Facebook feed

You’ll moreover business the dimensions and color of the ones explicit particular person portions. Simply click on on on the element’s name very similar to ‘Post Author’ or ‘Post Text.’

You’ll then use the settings to customize this content material subject matter. For example, chances are high that you’ll make the text higher so that it stands out, or add a brand spanking new color.

The Smash Balloon post editor settings

By the use of default, Break Balloon doesn’t include the Facebook ‘like’ button for your timeline. To increase your Facebook lovers, chances are high that you’ll wish to add this button by way of deciding on ‘Like Box’ from the editor’s left-hand menu.

After that, simply click on on on the ‘Allow’ button so that it turns blue.

Adding a Facebook Like button to your WordPress website

By the use of default, Break Balloon supplies this button beneath the timeline, then again you’ll have the ability to business this by way of opening the ‘Position’ dropdown and choosing ‘Best’ instead.

On this visual display unit, you’ll have the ability to moreover business how the ‘like’ section seems to be like along with together with a custom designed title to movement, showing how many people apply you on Facebook, together with your internet web page’s quilt {photograph}, and further.

Customizing the Facebook like button

Whilst you’re happy with how the ‘like’ button seems to be like, you’ll have the ability to switch without delay to the ‘Load Further Button’ settings.

The ‘Load Further’ button supplies visitors an easy approach to scroll by way of additional of your Facebook timeline, so Break Balloon supplies it to the feed by way of default.

This is a excellent get began, then again as it’s such an important button chances are high that you’ll wish to lend a hand it stand out by way of changing its background color, hover state, and label.

You’ll moreover business the text that appears on the button, by way of typing into the ‘Text’ field.

Customizing the Load More button in WordPress

If you want to remove the Load Further button, then transfer ahead and click on at the ‘Allow’ toggle.

By the use of default, Break Balloon allows visitors to look throughout the images and flicks for your timeline without leaving your internet web page.

The buyer can simply click on on on any {photograph} or video to open a lightbox popup, as you’ll have the ability to see inside the following image.

Smash Balloon's lightbox feature

The buyer can then use the arrows to scroll by way of all the footage and flicks for your Facebook timeline.

Within the match that they wish to like {a photograph}, go away a statement, or share the image with their Facebook friends, then they may be able to click on on on the ‘Comment on Facebook’ link.

Visiting a post in your embedded Facebook timeline

This opens a brand spanking new tab and takes the client straight away to the post for your Facebook internet web page.

There are a few different ways to customize Break Balloon’s lightbox serve as. To appear your possible choices, click on on on ‘Lightbox’ inside the left-hand menu.

Customizing Smash Balloon's lightbox feature

Proper right here, you’ll have the ability to business the color of the lightbox text, links, and background.

By the use of default, the lightbox displays any comments that individuals have left for your footage and flicks. If you want to hide the ones comments, you then’ll have the ability to click on at the ‘Show Comments’ switch to turn it from blue (enabled) to grey (disabled).

Disabling social media comments on your WordPress website

The lightbox serve as allows people to scroll by way of your footage and flicks straight away for your WordPress internet web page.

See also  13 Websites to Create Cool animated film Characters of Your self

However, chances are high that you’ll need to encourage people to discuss with your Facebook internet web page instead. In this case, you’ll have the ability to disable the lightbox serve as by way of clicking on the ‘Allow’ toggle.

How to disable the Smash Balloon lightbox feature

Now, the client will need to click on on on the ‘View on Facebook’ link so that you can take a better check out any {photograph} or video.

Whilst you’re happy with how the Facebook timeline seems to be like, don’t overlook to click on on on ‘Save’ to store your changes.

Saving your custom social media timeline

Recommendations on Add Your Facebook Timeline to WordPress

You’re now ready as a way to upload the timeline to your internet web page the use of a block, widget, or shortcode.

For individuals who’ve created a few feed the use of Break Balloon, you then indubitably’ll need to know the feed’s code as a way to upload it to a block or widget.

Merely transfer to Facebook Feed » All Feeds and then check out the feed="" part of the shortcode. You’ll need to add this code to the block or widget, so make a remark of it.

Inside the following image, we’ll need to use feed="2".

Adding a Facebook page to WordPress using shortcode

If you want to embed your Facebook timeline in a internet web page or post, then we propose the use of the ‘Custom designed Facebook Feed’ block.

Merely open the internet web page or post where you want to show your Facebook timeline. Then, click on on on the ‘+’ icon and get began typing ‘Custom designed Facebook Feed.’

When the suitable block turns out, click on on as a way to upload it to the internet web page or post.

The Custom Facebook Feed block

The block will show definitely considered one of your Break Balloon feeds by way of default. If this isn’t the feed you want to show, then simply to find ‘Shortcode Settings’ inside the right-hand menu.

You’ll now add the feed="" code to this box. After that, click on on on ‘Observe Changes.’

Adding your Facebook status updates to WordPress

The block will now show the timeline from your Facebook internet web page or body of workers. Simply submit or change the internet web page to make the timeline continue to exist your internet web page.

However, you’ll have the ability to add the feed to any widget-ready house, such since the sidebar or an an identical section. This can be a easy approach to put it on the market your Facebook internet web page right through all your internet web page.

Merely transfer to Glance » Widgets and then click on on on the ‘+’ button.

The WordPress widgets screen

After that, to find the Custom designed Facebook Feed widget.

Then, drag it onto the sector where you want to show the Facebook timeline.

The Facebook Custom Feed widget

Similar to the block, the Custom designed Facebook Feed widget will show some of the the most important feeds you created the use of Break Balloon.

To show a novel feed, simply type that feed’s code into the ‘Shortcode Settings’ box and then click on on on ‘Observe Changes.’

Adding the Facebook timeline to your WordPress blog using a widget

You’ll now make the widget reside by way of clicking on the ‘Substitute’ button. For more information, please see our step-by-step data on learn how to upload and use widgets in WordPress.

In spite of everything, you’ll have the ability to embed the timeline on any internet web page, post, or widget-ready house the use of a shortcode.

Simply transfer to Facebook Feed » All Feeds and replica the code inside the ‘Shortcode’ column. You’ll now add this code to your WordPress blog or internet web page.

For an intensive walkthrough, please see our data on learn how to upload a shortcode in WordPress.

Additionally, should you’re the use of a block theme, you’ll have the ability to use the full-site editor as a way to upload the ‘Custom designed Facebook Feed’ anyplace for your web page.

We hope this article helped you discover ways to display your Facebook timeline in WordPress. You may also want to check out our data on learn how to create a touch shape in WordPress, or see our an expert make a choice of the highest Instagram WordPress plugins.

For individuals who liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You’ll moreover to find us on Twitter and Fb.

The post Tips on how to Show Your Fb Timeline in WordPress first appeared on WPBeginner.

WordPress Maintenance

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *