How to Easily Embed Your Catalog on Your Facebook Page

You may have noticed that some retailers have added their online catalog to their Facebook Page. This is a great way to reach fans on Facebook with engaging content. We created this short guide to help you embed your catalog (or any other type of publication) on a Facebook Page, quickly and easily.

Important notice: Facebook has adjusted page permissions for pages with less than 2000 fans. As a result, if you have less than 2000 fans, this guide will no longer work for your Facebook page.

Simply put, we’re going to help you showcase your catalog in a Facebook Tab. Here’s where Facebook Tabs are shown on a Facebook Page:

Facebook Tabs on a Facebook Page.And here’s what our example catalog on Facebook will look like:

An online catalog embedded on a Facebook Page.To get your catalog on your Facebook Page like the example above, simply follow these 5 steps:

1. Open and install “Static HTML: iframe tabs”

To get started, you’ll need an app that helps you manage your Facebook Tabs without hassle. We like to use Static HTML: iframe tabs. Follow the link and then click Add Static HTML to a page. This way, you’re going to add an easy to manage tab to your Facebook Page.

The “Static HTML: iframe tabs” install page.

2. Add Page Tab to your Facebook Page

You’ll get to see a screen where you can select a Facebook Page. Choose the Facebook Page where you’d like to embed your catalog and click Add Page Tab.

Add Page Tab screen of the “Static HTML: iframe tabs”.

3. Locate and set up the new tab

When you’ve installed the “Static HTML: iframe tabs”, you should have a new tab on your Facebook Page named “Welcome”. Click on that tab and then click Set up tab.

The “Welcome” tab.

4. Enter the HTML for your tab

In the screen that follows, we’re going to edit the tab so that it will display your catalog. To do so, you’ll have to paste the code for your catalog into the section called “index.html”.

The area where you’ll have to paste the code for your catalog.Simply copy the code below and paste it into the area for “index.html”.

The HTML code for embedding a catalog on a Facebook Tab.This code allows you to display a catalog in an iframe on Facebook. However, before saving, you’ll first need to replace two parts of the code (indicated with red above). The first part https://www.yourcatalog.com should be replaced with the link to your catalog. The second part Embedded catalog can be anything you like, but is preferably used as a title. For example: “Fall Catalog 2016”.

There are two ways to link to your catalogs:

1. Displaying a specific catalog
Simply open the preview of your catalog in Publitas and copy the URL from your browser’s address bar. That’s the link you can use to replace https://www.yourcatalog.com.

The link to a specific catalog in Publitas.2. Automatically displaying your latest catalog
In this case you’ll need to link to your group instead of a specific catalog. You can find the URL to your group by opening the preview of your catalog in Publitas, like in the first option. Then, instead of copying the entire URL, you’ll only copy the first part (leaving out the publication name and page number). The resulting link is what you can use to replace https://www.yourcatalog.com.

Leave out the publication name and page number from the URL to link to your group.Once you’ve pasted the code in the “index.html” and you’ve replaced the red parts of the code with your own catalog’s URL and title, you can click Save & Publish. You now have a tab on your Facebook Page that displays your catalog. However, your tab is still named “Welcome”. Let’s change that to something more engaging.

5. Fill in Tab Name and upload Tab Image

From your Facebook Page, click Settings -> Edit Page. Under the sections “Tabs”, locate the newly added welcome tab and click Settings -> Edit Settings. Here you can edit the name of your tab as well as upload a different image for it.

Changing your Custom Tab Image and Name.

Your Custom Tab Image and Name as shown on your Facebook Page.

Bonus tip: Move your new tab so that it’s visible on your Page

It’s possible that you’ve added other apps and tabs to your Facebook Page. If that’s the case, your new custom tab with your embedded catalog may not appear high up enough on your page. To change this, click Manage Tabs (found below your tabs). Here you can easily move the tab with your embedded catalog higher up in the list.