How to Display Facebook Photos on Your Website

How to Display Facebook Photos on Your Website

By Stacey Corrin on September 8, 2021

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

Custom Facebook Feed Pro Plugin

The Custom Facebook Feed Pro 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 Feed Pro

To begin, you can get your copy of Custom Facebook Feed Pro from here. Then, just install and activate the plugin on your website.

For help, you can check out this step-by-step guide on how to install a WordPress plugin.

Step 2: Create Your Facebook Photo Feed

After installing and activating the plugin on your website, navigate to the Facebook Feed » All Feeds menu from your WordPress dashboard.

Then, to create a new Facebook feed, just click on Add New.

add new feed with custom facebook feed pro

Next, you need to pick the feed type. With Custom Facebook Feed Pro, you have 9 different options to pick from: events feed, albums feed, videos feed, reviews feed, and much more.

Here, select Photos and then click on the Next button.

add facebook photo feed

With that, you’ve created your new Facebook photo feed so it’s time to connect it to Facebook.

Step 3: Connect to Your Facebook Page or Group

Now, you can choose to connect your new feed to a Facebook page or a group. To do that, click on the Add New button.

add new source for facebook feed

This will bring up a new popup where you can choose to connect a Page or a Group. Select the one you want here, and then click on the Connect button.

pick between group or page for facebook feed

Now the plugin will redirect you to Facebook and ask for read-only access to your account. Since it’s read-only, the plugin can’t actually change anything and only reads your data.

You can pick the page or group that you want on your site and then click on Next.

smash balloon social select pages

Finally, click on Done and your Facebook photo feed will have read-only access to your Facebook page or group.

what is smash balloon allowed to do

After that, you can just select Add to finish adding your source.

add new source confirmation

You can now select the newly added source for your Facebook photo feed. Then just click on Next to proceed.

pick your source for custom facebook feed pro

It’s now time for step 4, where you get to choose the looks of your Facebook photo feed.

Step 4: Customize Your Facebook Photo Feed

After that, you can start customizing your Facebook photo feed using the live feed editor.

On the left, you have the customization options for your Facebook feed. You can also check the live preview on the right and see how your feed looks.

live facebook feed editor example

You can now change the feed type, layout, color scheme, header design, post design, and a lot more here.

To get started, select the Feed Layout option.

select the feed layout option

You have 4 different options for your Facebook photos here: List, Grid, Masonry, and Carousel.

feed layout options facebook feed

With a list layout, your Facebook photos will be posted one after another.

example list facebook photo feed

You can also pick the grid option if you want to show lots of Facebook photos in neat rows and columns.

example of grid facebook photo feed

If you want your Facebook photos to keep their original proportion, you have the masonry layout.

example of masonry layout facebook photo feed

You can also give your photos a more dynamic look with a Facebook carousel instead.

facebook photo feed example carousel slider

Select the layout that you like and then click on the Save button at the top.

Next, you can click on the small Customize button to go back to the previous options.

go back to facebook customization options

You can now move on and set the colors of your Facebook photo feed.

To do that, just click on the Color Scheme option on the left.

select the color scheme option

On this page, you can pick the colors for your Facebook photo feed. You can choose from:

  • Inherit from Theme: Copy your website’s color scheme
  • Light: Choose a bright look for your Facebook photo feed
  • Dark: Have a darker look for your feed with light-colored font
  • Custom: Manually pick all the colors of your feed

color scheme options facebook feed

Select the color scheme you like and then click on Save.

After that, you can start editing the feed to your liking. With this simple editor, you can set the header type, post style, feed size, margins, and much more with a live preview to help you out.

When you’re done, you can just click on the Save button on the top right and move on to the next step where you embed the feed.

Step 5: Display Your Facebook Photos on WordPress

Now it’s time to show your Facebook photos on your website. This part’s actually pretty simple, and you can do it in 2 different ways.

Display Facebook Photos on Your Page

You can show your Facebook photo feed on your webpage with ease using the live feed editor.

First, click on the Embed button at the top right of your live feed editor.

click on the embed button

This will bring up a new popup. From here, you can choose where to show your Facebook photos.

To proceed, just click on the Add to a Page button here.

add facebook feed to page

Now, you can see a list of all your available pages.

Just pick the page where you want to show your Facebook photos and click on the Add button.

select page for facebook feed

Once you’ve done that, the plugin will redirect you to the page.

Here, just click on the small plus icon (+) and pick the Custom Facebook Feed widget.

add facebook custom feed block

Finally, click on the Publish button and you’re done.

You’ve now successfully added your Facebook photos to your website. Just go and see how they look to your visitors.

example of facebook photos feed

If you want to show your Facebook photo feed on your sidebar instead, the plugin has you covered as well.

Display Facebook Photos on Your Sidebar

You can also show your Facebook photos on your sidebar as a Facebook widget.

To do that, first go to the Facebook Feed menu from your WordPress dashboard. There, you’ll see a list of all your available feeds.

Just click on your Facebook photo feed to proceed.

open feed to edit

You’ll now see the live feed editor once again. Here, just click on the Embed button in the top right corner.

click on the embed button

You’ll see a popup where you can pick the location for your Facebook photo feed. To continue, click on the Add to a Widget button.

add facebook feed as a widget

The plugin will redirect you to the widgets page now. Now, you can choose between all the available locations for your Facebook photo feed widget.

You can just click on Sidebar from the options to continue.

select sidebar for widget

If you want to display Facebook photos on your footer instead, just click on the other options here.

select footer for facebook widget

In this tutorial, we’ll display Facebook photos on the sidebar.

Now, just click on the button with the plus icon (+) to add a new widget.

Here, select the Custom Facebook Feed block, and you’re done!

choose custom facebook feed pro widget

Your website now has your Facebook photo on the sidebar! Open it up and you can check how it looks.

facebook photo feed sidebar example

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 Custom Facebook Feeds Pro by Smash Balloon today!

Plus, the plugin can do a lot more than embed Facebook photos.

In fact, you can also check out our guide on how to embed Facebook videos to WordPress and make your site even more engaging.

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 *