Do you wish to present your Fb timeline posts in WordPress?
By including your Fb updates to WordPress, you possibly can hold your website recent and attention-grabbing whereas additionally encouraging guests to observe you on Fb.
On this article, we’ll present you the best way to simply show your Fb timeline in WordPress.
Displaying Your Fb Timeline in WordPress
The best strategy to embed your Fb timeline in WordPress is through the use of the Smash Balloon Customized Fb Feed plugin.
This plugin allows you to embed Fb albums, feedback, critiques, group posts, and extra in your website.
For this information, we’ll use Smash Balloon premium because it permits you to present photographs and movies out of your Fb timeline.
Guests can even scroll via your content material in a lightbox popup, with out ever leaving your web site. Nonetheless, there’s additionally a free model that permits you to present textual content and hyperlinks out of your timeline, it doesn’t matter what your funds.
Upon activation, you’ll must go to Fb Feed » Settings and enter your license key into the ‘License Key’ area.
You’ll discover this info beneath your account on the Smash Balloon web site.
After coming into the important thing, click on on the ‘Activate’ button.
Connecting a Fb Web page or Group to WordPress
Subsequent, you should determine whether or not to show the timeline from a Fb web page or group timeline. We’re going to make use of a Fb web page however the steps will likely be largely the identical for Fb teams.
For a extra detailed take a look at teams, please see our full information on the best way to embed a Fb group feed in WordPress.
To attach your Fb web page or group to WordPress, go to Fb Feed » All Feeds after which click on on ‘Add New.’
Smash Balloon allows you to create totally different feeds to indicate your Fb picture albums, occasions, timeline, and extra.
Since we wish to show our Fb timeline in WordPress, you’ll must click on on ‘Timeline’ after which click on on ‘Subsequent.’
After that, you possibly can select the Fb web page or group that you simply wish to add to your website.
Merely click on on ‘Add New’ to get began.
On the subsequent display, select whether or not you wish to embed the timeline from a web page or group.
After making this choice, go forward and click on on ‘Hook up with Fb.’
This opens a popup the place you possibly can log into your Fb account and select the pages or teams that you simply wish to use.
After that, click on on ‘Subsequent.’
When you’ve performed that, Fb will present all the data that Smash Balloon may have entry to, and the actions it may well carry out in your Fb web page or group.
To limit Smash Balloon’s entry to your Fb account, simply click on any of the switches to show it from ‘Sure’ to ‘No.’ Simply bear in mind that this will likely restrict the Fb content material that seems in your WordPress weblog or web site.
With that in thoughts, you must go away all of the switches enabled each time attainable.
Subsequent, click on on the ‘Accomplished’ button.
After just a few moments, you must see a message confirming that you simply’ve linked your WordPress web site to Fb. Now you’ve performed that, it’s time to click on on ‘OK.’
Smash Balloon will now take you again to the WordPress dashboard routinely.
Easy methods to Embed Your Fb Timeline in WordPress
At this level, you’ll see a popup with the group or web page you simply related to WordPress.
Merely choose the radio button subsequent to this supply after which click on on the ‘Add’ button.
In the event you unintentionally closed the popup, don’t fear. Merely refresh the tab to reopen the popup.
After that, WordPress will take you again to the Fb Feed » All Feeds web page routinely. Identical to earlier than, click on on the ‘Add New’ button, choose ‘Timeline’ after which click on on the ‘Subsequent’ button.
Now, choose your Fb web page or group, and click on on ‘Subsequent.’
You may select a template to make use of as the place to begin on your embedded timeline. All of those templates are totally customizable so you possibly can fine-tune the design relying on the way you wish to show the timeline in your WordPress web site.
We’re utilizing the ‘Default’ template, however you possibly can select any template you need. You too can change the template at a later date in case you’re not proud of it.
Once you’re prepared, click on on the ‘Subsequent’ button.
Smash Balloon will now go forward and create a timeline feed primarily based in your template and your Fb web page or group. This can be a good begin, however you might wish to fine-tune how the timeline appears in your WordPress website.
Easy methods to Customise Your Embedded Fb Feed
The Smash Balloon Customized Fb Feed plugin provides you plenty of methods to customise how the timeline seems in your website. With that in thoughts, let’s see the totally different adjustments you can also make to your Fb timeline.
On the Fb Feed » All Feeds web page, discover your timeline feed after which click on on its ‘Edit’ button, which appears like a small pencil.
This opens the Smash Balloon feed editor, which exhibits a preview of the Fb group or web page timeline to the correct.
On the left-hand aspect, you’ll see all of the settings you should use to vary how the timeline appears. Most of those settings are self-explanatory, however we’ll rapidly cowl every space.
In the event you’re not proud of how the feed appears, then you possibly can attempt a distinct template by clicking on the ‘Template’ menu possibility.
Then, choose the ‘Change’ button.
After that, you possibly can change how your posts are displayed by clicking on ‘Feed Structure.’
On this display, you possibly can swap between record and masonry layouts. As you make adjustments, the preview will replace routinely so you possibly can attempt totally different layouts to see what appears the very best on your Fb timeline.
You too can change the feed top, and the variety of posts that Smash Balloon exhibits on desktop computer systems, smartphones, and tablets.
In the event you do change the variety of posts, then you possibly can preview how your feed will look on desktop computer systems and cellular units utilizing the row of buttons within the upper-right nook.
When testing the cellular model of your WordPress web site, you may additionally wish to change the variety of columns that Smash Balloon exhibits on desktops, tablets, and smartphones.
For instance, within the following picture, we’re splitting the content material into 4 columns on desktop, 3 columns on tablets, and a couple of column on cellular units. This might help your timeline match comfortably on the display, it doesn’t matter what type of system the customer is utilizing.
Once you’re proud of the format, click on on the ‘Customise’ hyperlink.
This can take you again to the primary Smash Balloon editor, so you possibly can transfer on to the subsequent menu possibility, which is ‘Colour Scheme.’
By default, your timeline will use the identical colours as your WordPress theme, however this display additionally permits you to swap between ‘Gentle’ and ‘Darkish’ layouts.
You may even create your personal colour scheme by choosing ‘Customized’ after which utilizing the settings to change the background colour, the hyperlink colour, change the textual content colour in WordPress, and extra.
By default, Smash Balloon provides a header to your feed, which is your cowl picture, profile image, and the title of your Fb web page.
To vary how this part appears, click on on ‘Header’ within the left-hand menu.
On this display, you possibly can change the scale of the header and colour, conceal or present your Fb profile image, and extra.
You too can swap between the default ‘Visible’ header and a ‘Textual content’ header.
Wish to take away the header utterly? Then merely click on on the ‘Allow’ toggle to show it off.
After that, you possibly can change how the person posts look inside your group feed by choosing ‘Submit Type’ from the left-hand menu.
On the subsequent display, you’ll have two totally different choices.
To start out, go forward and click on on ‘Submit Type.’
On this display, you possibly can select between an everyday and boxed format.
If you choose ‘Boxed’ then you possibly can create a coloured background for every publish. This might help your Fb posts stand out from the remainder of your web site and might also make the textual content simpler to learn.
You too can make the border-radius bigger to create curved corners, or you possibly can add a shadow.
In the event you select ‘Common,’ then you possibly can change the thickness and colour of the road that separates your totally different social media posts.
You too can customise the person elements inside every publish by going again to the primary settings display.
As soon as once more, choose ‘Submit Type’ however this time select ‘Edit Particular person Parts’ as a substitute.
On this display, you’ll see all of the totally different content material that Smash Balloon consists of in every timeline publish, such because the publish creator, occasion title, shared hyperlink field, and extra.
To take away a chunk of content material out of your posts, merely click on to uncheck its field.
You too can change the scale and colour of those particular person components. Merely click on on the component’s title comparable to ‘Submit Writer’ or ‘Submit Textual content.’
You may then use the settings to customise this content material. For instance, you may make the textual content greater in order that it stands out, or add a brand new colour.
By default, Smash Balloon doesn’t embody the Fb ‘like’ button in your timeline. To develop your Fb followers, you might wish to add this button by choosing ‘Like Field’ from the editor’s left-hand menu.
After that, merely click on on the ‘Allow’ button in order that it turns blue.
By default, Smash Balloon provides this button beneath the timeline, however you possibly can change this by opening the ‘Place’ dropdown and selecting ‘High’ as a substitute.
On this display, it’s also possible to change how the ‘like’ part appears together with including a customized name to motion, exhibiting how many individuals observe you on Fb, including your web page’s cowl picture, and extra.
Once you’re proud of how the ‘like’ button appears, you possibly can transfer on to the ‘Load Extra Button’ settings.
The ‘Load Extra’ button provides guests a straightforward strategy to scroll via extra of your Fb timeline, so Smash Balloon provides it to the feed by default.
This can be a good begin, however because it’s such an vital button you might wish to assist it stand out by altering its background colour, hover state, and label.
You too can change the textual content that seems on the button, by typing into the ‘Textual content’ area.
In the event you want to take away the Load Extra button, then go forward and click on the ‘Allow’ toggle.
By default, Smash Balloon permits guests to look via the photographs and movies in your timeline with out leaving your web site.
The customer can merely click on on any picture or video to open a lightbox popup, as you possibly can see within the following picture.
The customer can then use the arrows to scroll via all of the photographs and movies in your Fb timeline.
In the event that they wish to like a photograph, go away a remark, or share the picture with their Fb pals, then they’ll click on on the ‘Touch upon Fb’ hyperlink.
This opens a brand new tab and takes the customer on to the publish in your Fb web page.
There are just a few alternative ways to customise Smash Balloon’s lightbox characteristic. To see your choices, click on on ‘Lightbox’ within the left-hand menu.
Right here, you possibly can change the colour of the lightbox textual content, hyperlinks, and background.
By default, the lightbox exhibits any feedback that folks have left in your photographs and movies. In the event you want to cover these feedback, then you possibly can click on the ‘Present Feedback’ swap to show it from blue (enabled) to gray (disabled).
The lightbox characteristic permits individuals to scroll via your photographs and movies straight in your WordPress web site.
Nonetheless, you might want to encourage individuals to go to your Fb web page as a substitute. On this case, you possibly can disable the lightbox characteristic by clicking on the ‘Allow’ toggle.
Now, the customer might want to click on on the ‘View on Fb’ hyperlink in an effort to take a more in-depth take a look at any picture or video.
Once you’re proud of how the Fb timeline appears, don’t overlook to click on on ‘Save’ to retailer your adjustments.
Easy methods to Add Your Fb Timeline to WordPress
You’re now prepared so as to add the timeline to your web site utilizing a block, widget, or shortcode.
In the event you’ve created a couple of feed utilizing Smash Balloon, you then’ll must know the feed’s code so as to add it to a block or widget.
Simply go to Fb Feed » All Feeds after which take a look at the feed="" a part of the shortcode. You’ll want so as to add this code to the block or widget, so make an observation of it.
Within the following picture, we’ll want to make use of feed="2".
If you wish to embed your Fb timeline in a web page or publish, then we suggest utilizing the ‘Customized Fb Feed’ block.
Simply open the web page or publish the place you wish to present your Fb timeline. Then, click on on the ‘+’ icon and begin typing ‘Customized Fb Feed.’
When the correct block seems, click on so as to add it to the web page or publish.
The block will present one among your Smash Balloon feeds by default. If this isn’t the feed you wish to present, then merely discover ‘Shortcode Settings’ within the right-hand menu.
Now you can add the feed="" code to this field. After that, click on on ‘Apply Adjustments.’
The block will now present the timeline out of your Fb web page or group. Merely publish or replace the web page to make the timeline dwell in your web site.
Alternatively, you possibly can add the feed to any widget-ready space, such because the sidebar or related part. That is a straightforward strategy to promote your Fb web page throughout your complete web site.
Simply go to Look » Widgets after which click on on the ‘+’ button.
After that, discover the Customized Fb Feed widget.
Then, drag it onto the world the place you wish to present the Fb timeline.
Identical to the block, the Customized Fb Feed widget will present one of many feeds you created utilizing Smash Balloon.
To indicate a distinct feed, merely sort that feed’s code into the ‘Shortcode Settings’ field after which click on on ‘Apply Adjustments.’
Now you can make the widget dwell by clicking on the ‘Replace’ button. For extra info, please see our step-by-step information on the best way to add and use widgets in WordPress.
Lastly, you possibly can embed the timeline on any web page, publish, or widget-ready space utilizing a shortcode.
Merely go to Fb Feed » All Feeds and replica the code within the ‘Shortcode’ column. Now you can add this code to your WordPress weblog or web site.
For an in depth walkthrough, please see our information on the best way to add a shortcode in WordPress.
Moreover, in case you’re utilizing a block theme, you should use the full-site editor so as to add the ‘Customized Fb Feed’ wherever in your website.
We hope this text helped you discover ways to show your Fb timeline in WordPress. You may additionally wish to try our information on the best way to create a contact type in WordPress, or see our professional choose of the greatest Instagram WordPress plugins.
In the event you appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You too can discover us on Twitter and Fb.
