Displaying your Facebook photos on your website can be a great way to showcase your work, events, products, or anything else you want to share. Embedding a Facebook album allows your website visitors to flip through your Facebook photos without leaving your site. It’s an easy way to keep your site looking fresh and give visitors more to explore.
In this comprehensive guide, we’ll cover everything you need to know to easily embed a Facebook album into your website. We’ll go over:
- The benefits of embedding a Facebook album
- How to find the album embed code on Facebook
- Adding the embed code to your website
- Customizing the look and size of the embedded album
- Troubleshooting album embedding issues
Whether you’re using WordPress, Wix, Squarespace, or coding your own site from scratch, you’ll learn how to seamlessly integrate your Facebook album. Let’s get started!
Benefits of Embedding a Facebook Album
Before we dive into the how-to, let’s look at some of the advantages of bringing your Facebook album directly onto your website:
- Showcase your photos – Your Facebook photos probably contain some of your best and most interesting visual content. Embedding them is an easy way to make this content work for your website too.
- Engage visitors – Letting visitors flip through your Facebook album right on your site keeps them engaged. The more they explore, the more likely they’ll convert into customers or clients.
- Establish authority and trust – Photos of real people and events help build authority and trust with your audience. It shows you have an established presence on major social platforms.
- Avoid links and redirects – Bringing the photos directly onto your site lets visitors enjoy the album without clicking away to Facebook. This results in higher time on site.
- Fresh, updated content – Newly added Facebook photos will automatically show on your embedded album, giving your site fresh content without any effort.
Now that you know why it’s advantageous to embed your Facebook photo album, let’s look at how to do it.
Finding Your Album Embed Code on Facebook
The first step is to locate the specific embed code for the Facebook album you want to display. Here’s how:
- Go to Facebook and navigate to the photo album you want to embed.
- Click on the three dots in the upper right corner of the album.
- Select “Embed Album”.
- This will open a window with your unique embed code for this album. Copy the entire code.
For example, your embed code might look something like this:
`
`
This full embed code contains all the necessary settings and markup for displaying your album. The key details are:
– The album URL contained in `data-href`
– The dimensions set in `data-width` and `data-height`
– Extra settings for layout, styling, info visibility, etc.
Keep this embed code handy as we’ll need it in the next step when we actually add the album to our site.
Adding the Facebook Album Embed Code to Your Website
Now that we have the album embed code, it’s time to integrate it into our website. The method you use will vary slightly depending on whether you’re using a website builder like WordPress or Wix, or coding your own custom site from HTML and CSS. Let’s explore the options:
Adding to WordPress
For WordPress sites, you can easily embed the Facebook album using a shortcode. Here’s how:
- Go to your WordPress dashboard and create a new page where you want the album to live.
- Give the page a title like “My Photo Album”.
- Instead of adding text content, switch to the “Text” editor tab in the page editor.
- Paste in your full Facebook album embed code that you copied earlier.
- Update or publish the page to save the changes.
The embedded album should now appear on that page!
No extra plugins are needed. WordPress allows shortcodes and since the Facebook embed code acts as a self-contained shortcode, it will work fine.
One tip is to switch off the visual editor on pages where you embed the album code. This prevents the visual editor from accidentally removing the code.
Adding to Wix
To embed your Facebook album on Wix:
- Log in to your Wix dashboard and edit the page where you want the album.
- Click the “+” icon to add an element and select “Embed” from the menu.
- Paste your full Facebook embed code into the box and click “Apply”.
- Position and size the embedded album by dragging the corners.
- Publish the page to make it live.
The Wix embed tool makes it quick and easy. Just be sure you’re pasting the full unaltered Facebook album embed code.
Adding to HTML from Scratch
If you’re coding a completely custom site, you can embed the Facebook album by adding the following to your HTML code where you want it displayed:
“`html
// album embed code
“`
Be sure to paste the full embed code inside `
`.
You’ll also need to include the Facebook JS SDK on your page for the embedded content to load properly:
“`html
“`
Replace the Xs with your Facebook app ID.
Position this script before the closing “ tag.
Customizing the Look and Size of Embedded Albums
By default, embedded Facebook albums have a fixed visual style and dimensions. But you can customize the appearance to seamlessly blend with your own website design.
Here are some of the things you can adjust:
- Width and height – Set using `data-width` and `data-height` in the embed code.
- Header visibility – Hide header using `data-small-header=”true”`
- Album cover – Toggle on/off with `data-hide-cover=”true/false”`
- Photo info – Remove using `data-show-captions=”false”`
- Profile pictures – Toggle with `data-show-facepile=”true/false”`
- Background color – Use CSS to target `.fb-photo-list-header-bg {background: red;}` for example
Refer to Facebook’s embedded post styling docs for more customization options.
With some CSS tweaks like colors and fonts, you can make the embedded album blend seamlessly into your site’s design. Just be sure to stick to CSS and HTML changes only. Don’t alter the album embed code itself.
Troubleshooting Facebook Album Embedding Issues
Embedding your Facebook album is usually straightforward. But occasionally issues pop up that prevent your album from displaying properly on your site. Here are some common problems and how to fix them:
Album shows up blank
This is typically caused by an incorrect album URL in the embed code’s `data-href` value. Double check that it exactly matches the album URL from your Facebook page. If it looks correct, try generating a fresh embed code from Facebook.
Album loads inconsistently
If the embedded album only loads sometimes, it could be caused by the Facebook JS SDK not loading properly. Make sure you have the `
` tag and FB JS script included just before “.
Album loads then disappears
This usually happens if your Facebook access token expires. You can get a new permanent token and updated embed code by following the Facebook for Developers guide here.
Album CSS doesn’t style correctly
Double check that your CSS selectors are targeting the album elements properly. Use your browser Inspector tool to inspect the element styles. Avoid CSS conflicts with overly broad selectors.
Photos distorted or wrong size
Go back to the embed code and make sure the `data-width` and `data-height` dimensions match the size that you want. This controls the individual photo sizes.
Can’t interact or comment on photos
Interaction is disabled by default for performance reasons. You can add `data-show-comments=”true”` or enable other features documented here.
Conclusion
Embedding a Facebook photo album is a great way to showcase visual content, engage visitors, and establish authority on your website.
By following the steps in this guide, you now have the knowledge to easily add your Facebook album to any WordPress, Wix, or custom HTML site. Keep your album embed code handy and refer back to the troubleshooting tips if any issues come up.
With seamlessly integrated Facebook photos, you can tell your brand’s story in the most compelling way possible. So go ahead and flaunt those album pics on your website!