Do you want to show media from Facebook on your WordPress website? Displaying photos from Facebook posts is an excellent way to give site visitors fresh and engaging content.
Yet it’s not immediately obvious how you go about importing images from Facebook to your website. And if you’re unfamiliar with copying and pasting code snippets, it can be a confusing experience.
With that in mind, we’ll show you how to display Facebook photos on your website in a way that’s easy for anyone to understand.
Here’s a table of contents to help you navigate the different methods:
- Why add Facebook photos to WordPress?
- Easy way to display Facebook photos
- Embed Facebook photos manually
Before we dive in, let’s explore why it’s a smart idea to display Facebook content on your website.
Why Show Facebook Photos on Your Website?
People usually upload photos to Facebook to share them with their friends and family. But as a brand, it’s important to remember that not everyone has a Facebook account. This means your ideal audience won’t see your photos if you publish them exclusively on your Facebook page.
Cross-publishing Facebook photos onto your website makes them accessible to everyone — even if they have a Facebook account or not. As a result, you’ll have more people engaging with your content and exploring your website.
Showing Facebook photos in WordPress is also an ideal way to get more Facebook followers. The methods we explore later in this article give visitors the ability to like and interact with your Facebook page without leaving your website.
Now that you know some of the benefits of showing Facebook photos on your site, let’s look at the methods for embedding them in WordPress.
Easy Way to Display Facebook Photos on Your Website
The easiest way to display Facebook photos on your website is by using a WordPress plugin. The best WordPress plugins enhance your site’s functionality, giving you extra features without needing to know how to code.
The Custom Facebook Feed plugin by Smash Balloon lets you seamlessly integrate Facebook content into your WordPress site, including photos and other media. Then, all you need is to post an update on your Facebook page, and it’s automatically shown on your website.
What’s more, the plugin looks great on your site right out of the box, so it won’t take any work to get your content looking the way you want.
With that in mind, let’s look at the steps to show Facebook photos using the Custom Facebook Feed plugin.
Step 1: Download and Install Custom Facebook Feeds
To begin, click here to get started with the Custom Facebook Feed plugin by Smash Balloon. Then download the plugin to your computer.
Next, you’ll need to add the plugin to your website. For help, check out this step-by-step guide to install a WordPress plugin.
Step 2: Connect to Your Facebook Page
The next step is to link your Facebook page to your WordPress website. From your WordPress dashboard, click the Facebook Feed option to go to the configuration page.
Then click the blue Connect a Facebook Account button to sign in to Facebook and link your page.
During this process, you’re asked to choose either a Facebook page or group then click the Save Changes button to preserve your settings.
Step 3: Select the Photos Post Type
With your account connected, the next step is to choose the type of content you want to display on your website. So click the Customize tab at the top of the page to see the options available.
This page lets you define your Facebook feed’s width, height, padding, and background color. You can also choose to show your page’s cover photo, a “Like” box, and a load more button.
The most important option on this page is the Post Types section. This section lets you choose which content to show in your Facebook feed widget, including Facebook events, statuses, videos, links, and more.
Since we’re learning how to display Facebook photos in WordPress, untick all options aside from the Photos checkbox, as shown below.
This ensures only photos appear on your site’s Facebook feed. When clicking the Photos option, you can see extra settings to customize your feed. You can choose to show photos from your photos page or photos posted on your timeline. It’s also possible to set the number of columns in your feed.
If you want to change the layout of your Facebook photo feed you’ll need to choose Timeline as the source of your photos.
Then you can navigate to the Post Layout tab and choose either a thumbnail, half-width or full-width layout for your posts.
When you’re happy with your settings, click the Save Changes button.
Step 4: Publish Your Facebook Photo Feed
The next step is publishing your Facebook photo feed on your WordPress website. Smash Balloon offers 2 different ways to show your feed in multiple areas of your site including:
- Publishing your feed in posts or pages using the new WordPress block editor with the Facebook feed WordPress block
- Embedding your feed in posts or pages using the classic WordPress editor and in widget-ready sidebars with a shortcode
Don’t worry if this sounds tricky. We’ll walk you through both solutions next.
Displaying Facebook Photos With the WordPress Block Editor
To embed your Facebook photo feed in the WordPress block editor, you need to create a new post or page. We’re going to create a new page in WordPress by navigating to Pages » Add New.
Then, click the Plus (+) icon to add a new WordPress block. Under the Widgets section, you’ll see the Facebook Feed WordPress block. Click the block to add it to your page and see a preview of your feed.
Now when you click Publish and preview your page, you’ll see a beautiful Facebook photo gallery live on your website.
Displaying Facebook Photos in WordPress Pages With a Shortcode
You can also add Facebook photos to the classic WordPress editor using Smash Balloon’s ready-made shortcode. In your new post or page, simply paste the shortcode, as shown below.
There are different variations of the shortcode you can use to change the display settings. You can view them in the shortcode options documentation here.
Adding Facebook Photos to WordPress Sidebar Widgets
If you’d like to add photos from Facebook in a widget ready area of WordPress like a sidebar or footer area, you can do that with the Smash Balloon shortcode.
Simply head to Appearance » Widgets from the WordPress dashboard. Then find the Text WordPress widget and drag it to your preferred sidebar area. We’re placing our Text widget in the primary sidebar for our blog.
Inside the widget, paste your Facebook Feed shortcode and click Save.
Then when you navigate to your website, you’ll see your Facebook photos displayed in your website’s sidebar area.
It’s not just simple photos you can show in WordPress, either. Smash Balloon’s Facebook Album’s extension lets you embed a Facebook Album on your website too.
Display Facebook Photos on Your Website Manually
As an alternative to using a WordPress plugin to show Facebook photos on your website, you can embed your photos manually.
One of the drawbacks of adding Facebook photos to WordPress manually is it isn’t as intuitive. The WordPress plugin we used earlier, automatically imports Facebook photos, displaying them in a user-friendly gird. Then when users click each image, you can see the captions and further details.
The manual method requires you to find the individual Facebook posts with the photos you want to display. Then instead of a beautiful gallery, you’ll end up embedding a single Facebook post.
Let’s look at how it works.
First, head to the Facebook Developers website and choose the Embedded Posts option.
Next, enter the URL of the Facebook post containing the photo you want to add to your site. You can include the full post or just the post’s image by clicking the checkbox.
Now click the Get Code button to open a lightbox popup containing the embed codes for your website.
To embed your post in WordPress, copy the first section of code, and paste it into your site’s header.php file after the opening <body> tag.
If you’re using a modern WordPress theme, you may be able to do this using the WordPress customize panel, as shown below. If that’s the case, paste the code into the Header box and save your changes.
Now copy the second section of code, and create a new page in WordPress.
If you’re using the block editor, add a new block by clicking the Plus (+) icon. Then under the Formatting section, choose the Custom HTML WordPress block.
Paste your Facebook photo embed code directly into the Custom HTML block and publish your page.
When you visit your live page, it’ll look similar to the example below.
Best Way To Display Facebook Photos in WordPress
As you can see, manually embedding Facebook photos on your site won’t give you the polished, user-friendly design you can achieve when using a WordPress plugin. It also limits how many photos you can show to the number included in the initial post.
Whereas with Smash Balloon’s Facebook plugin, you can display as many photos as you like, in multiple Facebook feeds across your website. This helps you increase engagement between you and your site visitors and helps you get more likes by displaying dynamic Facebook content directly on your website.
So what are you waiting for?
Click here to get started with Facebook Feeds by Smash Balloon today!