How to Display Facebook Photos on Your Website

by Stacey Corrin on July 21, 2020

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:

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 Facebook.

Cross-publishing Facebook photos onto your website, makes them accessible to everyone regardless of 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.

Custom Facebook Feed Pro Plugin

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.

Connect a Facebook account

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.

Click the customize tab to change your facebook photo feed settings

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.

Choose the Facebook photos post type

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.

Choose the timeline as your facebook photo source to change your feed layout

Then you can navigate to the Post Layout tab and choose either a thumbnail, half-width or full-width layout for your posts.

Facebook photo feed layout options

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:

  1. Publishing your feed in posts or pages using the new WordPress block editor with the Facebook feed WordPress block
  2. 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.

Add the custom facebook feed WordPress block to your page

Now when you click Publish and preview your page, you’ll see a beautiful Facebook photo gallery live on your website.

example of displaying a facebook photos 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.

Paste the facebook feed shortcode directly into classic WordPress editor

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.

Paste the shortcode in a text widget in your WordPress sidebar area

Then when you navigate to your website, you’ll see your Facebook photos displayed in your website’s sidebar area.

Display Facebook photos in your website sidebar

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.

This is a useful choice if you’re not interested in using a WordPress plugin and have experience editing JavaScript and other coding languages. Yet if you’re not comfortable with this approach, we suggest using the easier method above.

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.

enter your facebook posts URL into code generator

Now click the Get Code button to open a lightbox popup containing the embed codes for your website.

facebook post embed code

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.

add your facebook embed code to your theme's header area

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.

choose the custom HTML WordPress block

Paste your Facebook photo embed code directly into the Custom HTML block and publish your page.

paste the facebook post embed code into the HTML block

When you visit your live page, it’ll look similar to the example below.

Display facebook photos manually on your website without a plugin

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!

And if you enjoyed this article, feel free to follow us on Twitter and Facebook for more helpful tutorials.

Want to Try our Facebook plugin for Free?

Enter the URL of Your WordPress website to install Custom Facebook Feed Lite.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Leave a Reply

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