How to embed Facebook albums in WordPress

How to Embed Facebook Albums in WordPress


Do you want to embed Facebook albums in WordPress?

Embedding Facebook albums is a great way to get more engagement on both your WordPress website and your Facebook page. It can also grow your social media following.

In this article, we’ll show you how to easily embed Facebook albums in WordPress.

How to embed Facebook albums in WordPress

Embedding a Facebook Album in WordPress

Showing albums on your WordPress website can make your pages more engaging.

As you add more photos to Facebook, they’ll appear on your site automatically, so it’s also a great way to keep your website fresh, even for regular visitors.

You can even use embedded albums to promote your Facebook page. If visitors see lots of interesting photos then they’ll want to follow you on Facebook. This can get you some extra followers and more engagement.

WordPress used to come with built-in embed support for Facebook albums. Just like you embed a YouTube video, you could simply copy and paste the URL of any Facebook album and WordPress would display that album automatically.

However, Facebook and Instagram have since made changes to their API. These changes make it impossible for WordPress to continue oEmbed support for Facebook and Instagram.

If you try to embed a link to an album, then WordPress will tell you that ‘Sorry, this content could not be embedded.’

The Facebook album embed error

Thankfully, there is a way to fix Facebook and Instagram embeds in WordPress using a plugin.

Let’s see how you can easily embed Facebook albums in WordPress, including how to show a specific album on any page or post.

Installing a Facebook Album Plugin

The best way to embed Facebook albums in WordPress is by using the Smash Balloon Custom Facebook Feed plugin.

This plugin lets you show Facebook albums, comments, reviews, community posts and more on your site.

How to embed Facebook photos in your WordPress website using Smash Balloon

It also lets visitors take a closer look at your photos and images without having to visit Facebook, by opening a lightbox popup on your website.

In this guide, we’ll be using the pro version of Smash Balloon as it allows you to embed Facebook albums, display videos, show photos in a custom Facebook feed, and more. However, there’s also a free version that allows you to create a custom Facebook feed for WordPress, no matter what your budget.

The first thing you need to do is install and activate the Smash Balloon Custom Facebook Feed plugin. For more details, see our guide on how to install a WordPress plugin.

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

Adding your license key to Smash Balloon

You’ll find this information under your account on the Smash Balloon website.

After entering the key, click on the ‘Activate’ button.

Connect Your Facebook Page or Group to WordPress

Smash Balloon Custom Facebook Feed allows you to embed albums from your different Facebook pages and groups. You can even show the latest comments in a dropdown box below the photo, along with the like and shares.

To connect your Facebook page or group to WordPress, go to Facebook Feed » All Feeds and then click on ‘Add New.’

Adding a Facebook group or page to WordPress

Smash Balloon lets you show posts from your photo albums, timeline, events, and more.

To embed your Facebook albums, you’ll need to click on ‘Albums’ and then click on ‘Next.’

Choosing the Smash Balloon 'Albums' template

Now, you need to select the Facebook page or group where you’ll get the albums from.

To get started, click on ‘Add New.’

Choosing a source for your Facebook album

On the next screen, choose whether you want to show albums from a page or group.

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

How to connect Smash Balloon and WordPress to Facebook

This opens a popup where you can log into your Facebook account and choose the pages or groups where you want to embed albums from.

After making this decision, click on ‘Next.’

Choosing Facebook pages and groups to embed albums from

Once you’ve done that, Facebook will show all the information that Smash Balloon will have access to, and the actions it can perform.

To restrict Smash Balloon’s access to your Facebook account, just click any of the switches to turn it from ‘Yes’ to ‘No.’ Just be aware that this may affect the albums and photos that you can embed on your WordPress blog or website.

With that being said, we recommend leaving all the switches enabled.

Giving Smash Balloon access to your Facebook page

When you’re ready, click on ‘Done.’

After a few moments, you should see a message confirming that you’ve connected your WordPress website to Facebook. With that done, it’s time to click on ‘OK.’

How to connect Facebook albums to your WordPress website

Smash Balloon will now take you back to the WordPress dashboard automatically.

How to Embed Facebook Albums in WordPress

You will now see a popup with the group or page you just linked to your website. Simply select the radio button next to your source and then click on the ‘Add’ button.

How to embed albums from a Facebook page or group

If you accidentally closed the popup, then don’t panic. You can simply refresh the tab to reopen the popup.

After that, WordPress will take you back to the Facebook Feed » All Feeds page automatically. Just like before, click on the ‘Add New’ button, select ‘Albums’ and then click on the ‘Next’ button.

Now, select your Facebook page or group, and click on ‘Next.’

Selecting a source for your Facebook album

On this screen, you can choose the template you’ll use as the starting point for your feed. All of these templates are fully customizable so you can fine-tune the design depending on how you want to show the Facebook albums on your website.

We’re using the ‘Default’ template, but you can choose any template you want.

Choosing a template for your Facebook albums

With that done, click on the ‘Next’ button.

Smash Balloon will now go ahead and create an album feed based on your source and the template you’ve chosen. This is a good start, but you may want to fine-tune how the albums appear on your WordPress website.

How to Customize Your Embedded Facebook Albums

The Smash Balloon Custom Facebook Feed plugin gives you lots of ways to customize how the albums are displayed. With that in mind, it’s worth seeing what changes you can make.

On the Facebook Feed » All Feeds screen, find your album feed and then click on its ‘Edit’ button, which looks like a small pencil.

Customizing your Facebook albums feed

This opens the Smash Ballon feed editor, which shows a preview of your Facebook albums to the right.

On the left-hand side, you’ll see all the different settings you can use to customize how these albums appear on your site. Most of these settings are self-explanatory, but we’ll quickly cover some key areas.

Editing the Facebook albums feed

To start, you can change how the albums are displayed by clicking on ‘Feed Layout.’

On this screen, you can switch between different layouts, such as masonry and grid, and change the feed height. As you make changes, the preview will update automatically so you can try different settings to see what looks the best.

Choosing a new feed layout in WordPress

By default, the feed will show the same number of posts on desktop computers and mobile devices such as smartphones.

You can preview how your albums will look on desktop computers, tablets, and smartphones using the row of buttons in the upper-right corner.

Choosing a new feed layout in WordPress

Mobile devices usually have smaller screens and less processing power, so you may want to show fewer albums on tablets and smartphones.

To do this, just type a different number into the ‘Mobile’ field under ‘Number of Posts.’

Changing how your embedded Facebook albums appear on mobile devices

By trying out different layouts you can create a custom feed that looks great, no matter what device the visitor is using.

By default, the Facebook feed shows less columns on smartphones and tablets, compared to desktop computers. This helps all your albums and photos fit comfortably on smaller screens.

After testing the mobile version of your WordPress website, you may be unhappy with how the columns look on smartphones and tablets. If this is the case, then you can show fewer columns by changing the numbers in the ‘Columns’ section.

Changing the column layouts using Smash Balloon

When you’re happy with the changes you’ve made, click on the ‘Customize’ link.

This will take you back to the main Smash Balloon editor, ready for you to explore the next settings screen, which is ‘Color Scheme.’

Changing the color scheme for your Facebook photo feed

By default, Smash Balloon uses a color scheme inherited from your WordPress theme, but this screen allows you to switch to a ‘Light’ or ‘Dark’ look,

You can also create your own color scheme by selecting ‘Custom’ and then using the controls to change the background color, change the text color in WordPress, and more.

Adding a custom color to your Facebook album feed

By default, Smash Balloon adds a header to your feed, which is your Facebook profile picture and the name of the page or group.

To change how this section looks, click on ‘Header’ in the left-hand menu.

Customizing the header of your Facebook album feed

On this screen, you can change the size of the header, its color, hide or show your Facebook profile picture, and more.

If you want to remove the header completely, then click to turn off the ‘Enable’ toggle.

How to embed Facebook albums in WordPress

By default, Smash Balloon shows the title of each album. If you want to hide the title, then select ‘Posts’ from the main Smash Balloon editor menu.

Then, click on ‘Post Style.’

Changing the style of your Facebook album feed

Here, you can remove the album titles by clicking on the ‘Show album title’ slider.

This can be useful if your album titles distract attention away from the photos, or they don’t make sense when embedded on your website.

Showing the album title in your WordPress Facebook feed

On this screen, you can also choose whether to show how many photos are in each album.

To add this number, simply click on the ‘Number of posts in album’ toggle.

Adding the number to Facebook albums in WordPress

By default, Smash Balloon doesn’t include the Facebook ‘like’ button in your feed. To get more Facebook followers, you may want to add this button by selecting ‘Like Box’ from the editor’s left-hand menu.

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

Adding a 'like' button to your Facebook albums feed in WordPress

By default, Smash Balloon adds this button below your embedded photo albums, but you can change this by opening the ‘Position’ dropdown and choosing ‘Top.’

On this screen you can also change how the ‘like’ section looks including adding a custom call to action, showing how many people follow you on Facebook, and more.

Customizing the Facebook follow button in WordPress

When you’re happy with how the ‘like’ button looks, you can move on to the ‘Load More Button’ screen.

The Load More button encourages visitors to scroll through more of your Facebook feed, so Smash Balloon adds it to your embedded photo albums by default.

Adding a 'Load More' button to a custom Facebook photos feed in WordPress

Since it’s such an important button, you can help Load More stand out by changing its background color, text color, and label.

Another option is to remove the button completely, by clicking the ‘Enable’ toggle.

Removing the 'Load More' button from embedded Facebook albums

By default, Smash Balloon allows visitors to look through your Facebook albums without leaving your website.

They can simply click on any album to open a lightbox, as you can see in the following image.

Smash Balloon's lightbox feature

The visitor can then use the arrows to scroll through the album.

If they want to like a photo, leave a comment, or share the image with their Facebook friends, then they can click on the ‘View on Facebook’ link.

Visiting a Facebook group or page from the lightbox

There are a few different ways that you can customize the default lightbox.

To see your options, click on ‘Lightbox’ in the left-hand menu.

Customizing the Facebook photos lightbox

Here, you can change the color of the lightbox’s text, links, and background colors.

The lightbox feature makes it easy for people to engage with your photos, but it also allows people to scroll through your albums without visiting your Facebook page. If you want to get more visitors to your Facebook page then you can disable the lightbox feature by clicking on the ‘Enable’ toggle.

Disabling the lightbox feature on your WordPress website

Now, if a visitor clicks on an album they will be redirected to your Facebook page in a new tab.

When you’re happy with how the photo albums look, don’t forget to click on ‘Save’ to store your changes.

You’re now ready to add these albums to your WordPress website.

How to Add Facebook Albums to WordPress

You can add your Facebook albums to WordPress using a block, widget, or shortcode.

If you’ve created more than one feed using Smash Balloon, then you’ll need to know the feed’s code if you’re going to use a block or widget.

Simply go to Facebook Feed » All Feeds and then look at the feed=”” part of the shortcode. You’ll need to add this code to the block or widget, so make a note of it.

In the following image, we’ll need to use feed=”4″.

Embedding Facebook albums using code

If you want to embed your Facebook albums in a page or post, then you’ll typically use the Custom Facebook Feed block.

Simply open the page or post where you want to embed your albums. Then, click on the ‘+’ icon to add a new block and start typing ‘Custom Facebook Feed.’

When the right block appears, click to add it to your page or post.

How to add a Custom Facebook Feed block to WordPress

The block will show one of your Smash Balloon feeds by default. If you want to use a different feed instead, then simply find ‘Shortcode Settings’ in the right-hand menu.

You can now add the feed=”” code to this box. After that, click on ‘Apply Changes.’

Embedding Facebook photos in WordPress

The block will now show the albums from your Facebook page or group. Just publish or update the page to make the albums live on your website.

Another option is to add the feed to any widget-ready area, such as the sidebar or similar section. This allows visitors to see your Facebook photos from any page of your site.

Simply go to Appearance » Widgets in the WordPress dashboard and then click on the blue ‘+’ button.

Adding Facebook albums to your website's sidebar

Once you’ve done that, find the Custom Facebook Feed widget.

Then, just drag it onto the area where you want to show the feed.

How to embed Facebook albums and photos in WordPress

The widget will show one of the feeds you created using Smash Balloon.

To show a different feed instead, type the feed’s code into the ‘Shortcode Settings’ box and then click on ‘Apply Changes.’

Showing different Facebook feeds in a Smash Balloon block

You can now click on the ‘Update’ button to make the widget live. For more information, please see our step by step guide on how to add and use widgets in WordPress.

Finally, you can embed your albums on any page, post, or widget-ready are using shortcode.

Simply go to Facebook Feed » All Feeds and copy the code in the ‘Shortcode’ column. You can now add this code to your site.

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

Add a Specific Facebook Album in WordPress

Smash Balloon also allows you to embed a specific Facebook album anywhere on your WordPress site. This allows you to show your latest or best album to visitors, or to display an album that’s relevant to the rest of the page’s content.

To embed a particular Facebook album, you’ll need to buy and install the Album extension by going to Facebook Feed » Extensions.

Here, find the ‘Album’ extension and click on its ‘Add’ button.

The Smash Balloon Single Album extension

This will open the Smash Ballon website in a new tab, with instructions on how to purchase the extension.

Once you have the extension, you can install it in exactly the same way you install a plugin. If you need help, then please see our guide on how to install a WordPress plugin.

After activating the plugin, go to Facebook Feed » All Feeds and click on ‘Add New.’

Under ‘Advanced Feed Types,’ select ‘Single Album’ and then click ‘Next.’

Showing a specific album on your WordPress website

You can now choose the page or group that you want to use as your source, and choose a template by following the same process described above.

On the next page, you’ll need to enter the ID of the album that you want to embed.

Embedding a specific album in WordPress

In a new tab, simply open the Facebook album that you want to display.

You can now copy the numbers after the = symbol, and inbetween the first two periods. For example, in the following image we need to copy 447443907512397.

Getting the ID of a Facebook album

You can now paste these numbers into the WordPress dashboard.

After that, click on ‘Next’ and Smash Balloon will fetch the album.

Adding a Facebook album ID to WordPress

After that, you can style the album and add it to your site following the same process described above.

We hope this article helped you learn how to embed Facebook albums in WordPress. You may also want to check out our guide on how to create a custom Instagram photo feed in WordPress, and how to create an email newsletter to connect with your visitors after they leave your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.


Source link

Leave a Comment

Your email address will not be published.