Master Your Brand's First Impression with Facebook Tabs


#1

Beyond establishing the credibility you need to convert landing page visitors, did you know that SSL (Secure Sockets Layer) extends the possibilities for where you can feature your landing page offers?

Take Facebook tabs, for example.

Facebook tabs are customized pages within your fan page or business page that allow you to highlight a special offer, promote a contest, or anything else you have in mind via an extra tab along your tabs bar. These tabs are helpful in that they showcase your landing page directly within the Facebook interface, so you don’t add any friction to the user experience.

The Facebook tabs appear on your business page right below the cover photo, like this:

Now, for some marketers, custom tabs went the way of the dinos when Timeline layout for business pages came into play back in 2012, but if you’re passing on custom tabs, consider how they could help improve the first impression you set on this channel. 

While Facebook tabs aren’t a hot spot for long-time fans of your page, they’re prime real estate for new visitors who’ve just liked your page. Custom tabs are critical for capturing the attention of those who are visiting your Facebook for Ð what could be Ð the first and last time. We tend to rely on our favourite brand’s updates appearing in our newsfeed, so you may only see first-time visitors on your page once and once only. Making the most out of this visit and directing folks to take advantage of your offers is key.

Instead of just the standard Timeline, About, and Photos tabs, get your page to do some heavy lifting with tabs prompting newsletter signups, promotions, or new content offers you have up for grabs.

The World Wildlife Fund does a good job of this, using custom Facebook tabs to highlight special initiatives, and drive newsletter signups.

And Air New Zealand has recently run a contest using Facebook tabs in this way too. Here’s how that looks once you click their ÒJump the QueueÓ tab:

As you can see, using landing pages to fuel a Facebook tab can be a great opportunity to collect leads’ contact info while they’re are engaged with your brand.

You can set up your own Facebook tab in Unbounce by following the steps below:

Adjust the width of your Unbounce landing page to 785px.

A typical Unbounce landing page is 960px wide, so your page will require a bit of tweaking after you adjust the width. To learn how to edit the width of your page, click here.

Login to Facebook as a Facebook Developer.

  1. Visit https://developers.facebook.com/apps, and log in with your regular Facebook credentials. 

Create your new Facebook Tab.

  1. In the top right, click the bright green ‘Create a New App’ button.

  1. Then, to the far right, click ‘Website’.

  1. In the top right, click ‘Skip and Create App ID’.

  1. Enter your ‘Display Name’ (this is what your tab will be displayed as on your Facebook Page, and it’ll be what your customers see, so choose wisely!)

  2. Under ‘Category’ select ‘Apps for Pages’.

  1. Now click, ‘Create App ID’ , and move over to your App Dashboard.

Configure your Facebook Tab.

  1. In the left menu, click ‘Settings’.

  1. Enter a contact e-mail address, and click the ‘+ Add Platform’ button at the bottom.

  1. In the Select Platform window, select Page Tab (with the flag icon).

  1. In the ‘Secure Page Tab URL’ box, add the URL of your Unbounce landing page. Be sure that your URL starts with https://, otherwise it won’t work.

  2. Select “Yes” under ‘Wide Page Tab?’ so that your landing page fills the width of the tab.

  3. When you’ve finished editing this section, click “Save Changes” on the bottom right, and move to the final step!

Make your Facebook Tab public.

  1. In the menu to the left, click ‘Status and Review’, and make your Facebook Tab live by toggling over to ‘yes’, and clicking ‘confirm’.

Add your new custom Tab to your Facebook Page.

You’ve reached the final step!

  1. To add your new custom Tab to your Facebook page, modify the following link with your unique URL parameters, and paste it in your address (URL) bar.

Here’s the link you need to modify:

http://www.facebook.com/dialog/pagetab?app_id= YOUR_APP_ID &next= YOUR_URL

You’ll need to replace the bolded/underlined parts.

YOUR_APP_ID - locate this in Settings --> Basic, as seen here:

YOUR_URL - this is the URL of your Unbounce landing page. Locate this in Settings --> Basic, as seen here:  

Using the example above, my custom URL would be:

http://www.facebook.com/dialog/pagetab?app_id=1444212725876399

&next=https://ssl.yuli-analytics.com/tab-demo/

  1. Once you have your unique URL, copy and paste it in your address (URL) bar, and press enter.

You’ll see the following pop up:

Select where you’d like to add your new Facebook Tab, and click ‘Add Page Tab’.

  1. Your Unbounce landing page will open in a full-screen.

  2. Navigate back to your Facebook Page, and view your new Facebook Tab.

  1. Congrats! You’ve created a custom Facebook landing tab!

To view Facebook’s official Tab documentation, check out this link here.

Are you using Facebook landing tabs as part of your social marketing strategy? Why or why not? Tell us below with a comment.

With SSL now available to Unbounce customers on any Pro level plan, you can experiment with Facebook landing tabs. What landing page offer will you take to social?

If you’d like to upgrade to a Pro plan, head to your Account Settings in Unbounce and make the switch.


The Ultimate List of Unbounce Tips, Scripts & Hacks
#2

Great to hear, Stuart!
Thanks for reading and great point about the page width - I’ll look into that for sure.
Let us know how your experiments go! :slight_smile:


#3

Erin - this looks really good but can you clarify how you use the social widgets available within Unbounce to achieve what Air New Zealand have done. They appear to have only offered the “share” option on their social widget (logical) whereas that options doesn’t seem to be available from Unbounce landing pages ? Have they configured it within Facebook ? Perhaps the Unbounce landing page sits in underneath the social widget ? Hard to see how they’ve done it ? The concept is good though ??


#4

great tutorial!


#5

Hi Erin - do you have any stats on how successful these pages have been for the WWF, Air New Zealand & Yuli Analytics?


#6

Hi Stuart,

Great question! Just to clarify, some of the examples above aren’t actually pages that have been built by using Unbounce - these are just great examples of Facebook Tab landing pages that we wanted to share.

If you’re looking to do this style of custom social widgets…

… then basically you’ll need to do what Air New Zeland did, and custom code them. This requires a bit of html knowledge, but shouldn’t be too difficult to set up.

A quick google search allowed me to find this list of share URL’s. From there, I just grabbed the code from this stack overflow article and used this facebook icon. It’s super basic, but here’s the result after combining them all into a custom HTML widget:
http://unbouncepages.com/social-test-100/

Hope that answers your question, Stuart!


#7

Thanks Denis! Hope this feature is useful for you :slight_smile:


#8

Hi John - unfortunately we don’t have stats on these example pages - Yuli Analytics in particular is a test account that we use for demonstration purposes. We’d love to dig into this more as our customers create landing tabs with SSL - please feel free to share any of your findings with us!


#9

Oh yeah OK cool I get it :slight_smile:


#10

Hi Erin!  Thank you for the insightful post.  Do you know the max height for the unbounce page inside of the facebook tab for it to display without the scroll bar or how to tweak it so that the full page height will display without a scroll bar?  FYI I also had to set the page to 785 width.  Thank you for your help :slight_smile:


#11

Hi Joe! Thanks for your comment and apologies for the delayed reply. It looks like 785 is indeed the best width, I’ve adjusted the post with the new info :) 
As for the page height, this one seems a bit elusive. I haven’t found a clear solution yet but I’ve reached out to get some more folks on the case. I’ll be sure to update this thread if anything useful comes up!


#12

Hi Erin,

I played around with it manually and found that the cutoff point was 800.  At least that’s what I found :slight_smile:

Regards,

Joe


#13

Hey there, this looks really powerful! Can I just check whether this is available to users with Starter Unbounce Plans, or only those with one of the two Pro level plans?


#14

Hi Chris, 
SSL certification is a bit of a more advanced feature, so it’s currently available on all PRO plans and higher. 


#15

Hello Erin,
thank you for the great tutorial! However, I think one should not obmit the “Tab image” as it does display on facebook, at least if you configure your facebook page to show the “Apps” on the left side below the Info section:

I created the two Apps “AuftrŠge finden” and “Ansichtsexemplare” seen on the left with your tutorial and Unbounce and here the tab image is actually showing.
Best,
Lasse


#16

Good catch, Lasse! We’ll make that edit now. :) 


#17

Hi,

Great tutorial, easy to follow. One single PROBLEM: the links from the landing page  doesn’t work (inside Facebook page).

Any suggestions for making it active?

Thanks!


#18

Hey there - great post Erin.  Followed it and have an Unbounce page in a Facebook Tab now!

I have however come across a problem similar I think to Marius.  When a visitor completes the form on the page they are not redirected to the specified URL.  I get a message like this:

“The requested URL was not found on this server.”

Any ideas what might be happening here and how to fix it?


#19

There is another way… there is a platform called thunderpenny. If you use “static HTML” pages its free. I use this service on several of my social client’s Facebook Pages. Because our sites are custom responsive they look fine at the 785x800 (or any size). So essentially I am iFraming in the whole site.

With an unbounce page set to the right size you could be doing this as well, without having to create your own app!

Joe


#20

great article, I’ve tried the steps.  However, the facebook platform does allow me to create the page app. Ive tried it in two browsers. The page just starts over without creating the app.  Not sure if this process is still working. Any ideas?