How to Create Custom Tabs for Facebook Business Pages (door Hubspot)

Posted on 29 september 2011

0


With over 800 million active users, Facebook can be a powerful channel for your business, no matter what you sell.

Facebook business pages are becoming more customizable, and with page tabs, Facebook makes it possible to pull in your own custom content alongside the generic Facebook tabs like “wall,” “info,” and “activity stream.” As a marketer, this allows you to create a much richer user experience with custom tabs. Coca-Cola’s Facebook page is a great example (make sure to click “more” if you’re checking it out) of a company that effectively uses custom tabs.

So, how do you create your own custom Facebook tabs? Turns out it’s not as difficult as you might think. Just follow these 6 simple steps to creating custom Facebook page tabs…

Step 1: Login as a Facebook Developer

Go to https://developers.facebook.com/apps. You’ll be able to login with your normal Facebook credentials.

Step 2: Create and Name Your New App

Click “Create a New App” from the top left-hand corner. You’ll need to provide a “Display Name,” which is what your app will be called. You’ll also need to create a “namespace,” which is basically just a unique ID for your app.

describe the image

Step 3: Update Basic Info for the App

Update your basic info with domain name and category. You can also upload a custom icon for your app by clicking “edit icon.”

basic info

Step 4: Create the Content That Will Display Within the App’s Tab

Create a page on your website (it’s best to keep the page not visible in your navigation) that will display inside your Facebook page tab. To make sure the page’s content displays correctly in your Facebook page tab, follow this one simple rule: keep your page width set to either 100% or under 520px. Make sure all images, videos, etc. that you include on your page are less than 520px.

Facebook page tabs are essentially just iFrames that load content from other sources. If we really wanted to, we could load the HubSpot.com homepage inside a Facebook page tab, but it would look pretty bad because the content is too wide.

Step 4 and 1/2: Special Note for HubSpot Customers

If you’re a HubSpot customer, you can easily create a page to display inside a Facebook tab by adding a new page in Create >> Website Pages. In the properties menu for the page, go to “advanced options” and select the “Blank (Frame)” layout. Make sure to uncheck “show in menu

blank iframe describe the image

Now you can create modules the way you normally would with HubSpot, just make sure you don’t use any images or videos that are wider than 520px. You can find more details on creating pages with HubSpot here.

Step 5: Tell Facebook What Content You Want to Display on Your Custom Tab

Go back to your app settings in developers.facebook.com, scroll down to the “Select how your app integrates with Facebook” section, and choose “Page Tab.” Name your tab whatever you’d like; then copy the URL of the page you just created in step 4, and paste that URL into “Page Tab URL.”

page tab

To make sure everyone can see your Facebook page tab, you’ll also need to provide a secure URL, which should be the same URL you provided for the page tab but with “https://” instead of “http://” at the front. If you’re website does not support https, it’s okay. Your app will still work, but you should look into getting an SSL certificate.

Step 6: Add Your Tab to Your Facebook Page

In the “related links” section of your app settings sidebar, click on “view app profile page.” From the app profile page, select “add to my page,” and choose the Facebook page on which you would like the app to display.

describe the image add app to page

The custom tab should now be on the left-hand side of your page. Congratulations — you’re now a Facebook Developer! You can adjust the order of your tabs by clicking “edit” below the last viewable tab and dragging and dropping them in the order you’d like.

For more detailed documentation and support from Facebook about creating custom Facebook page tabs, you can reference the official Facebook tutorial here.

Have you created your own custom tab for your Facebook business page? Share examples of your custom pages in the comments!Auteur: Andrew Pitre

Posted in: Facebook