Loading images...

Pitfalls of Facebook Page Tabs

by Richard Elen on 15 Jun, 2012

in Science & Technology

Pitfalls of Facebook Page Tabs

I recent­ly had occa­sion to cre­ate a cou­ple of Face­book Apps for a client, to be accessed from tabs under the main time­line image on a busi­ness page.

There are plen­ty of tuto­ri­als around on how to do this, but I found a cou­ple of pit­falls that don’t seem to be men­tioned in the write­ups I’ve seen.

Face­book Page Tabs

One of the many things that has changed about Face­book recent­ly is the way that tabs on Busi­ness Pages are han­dled — this hap­pened from April this year.

To begin with, you can no longer set up a tab as a land­ing page so non-fans who arrive at the page see it auto­mat­i­cal­ly: tabs are sim­ply list­ed with thumb­nail images under the head­er image. And while the con­tent was pre­vi­ous­ly lim­it­ed to 520px width, you can now choose 810px wide as an alter­na­tive.

I was cre­at­ing the very sim­plest of Face­book Apps: ones that sim­ply call what is essen­tial­ly a web page that gets embed­ded in a Face­book page with the Face­book equiv­a­lent of an iframe. The basic tuto­r­i­al on this pro­vid­ed by Face­book can be found here.

To do this, you log into Face­book as a Devel­op­er (https://developers.facebook.com) using your usu­al cre­den­tials. Just to right of cen­tre in the blue Face­book strip at the top of the page you’ll see “Apps”. Click this link and it shows you any apps you have cre­at­ed pre­vi­ous­ly and there’s a but­ton top right called “Cre­ate New App”.

As described in the tuto­ri­als, you need to give your new app a Dis­play Name that appears beneath it on the Page; a unique Name­space; and a sup­port con­tact email address. Then from the pop-up menu “Cat­e­go­ry”, choose “Apps for Pages”. For this sim­ple app, that’s all you need in the top sec­tion. The tricky bit is next.

Select­ing how your app inte­grates with Face­book

You now select how your app inte­grates with Face­book. Select­ing “Page Tab” is obvi­ous. You give the Page Tab a name; and sup­ply secure and non-secure URLs. These point at the web loca­tion where the HTML con­tent you want to dis­play insert­ed on the Face­book page can be found. Pro­vid­ing a secure URL (ie one accessed via https:) is manda­to­ry. It doesn’t seem to mat­ter if the two URLs point to the same place, but I would sug­gest it’s a lot eas­i­er if they can, and your serv­er is set up to serve both secure and non-secure con­tent.

It may not be oblig­a­tory, but it turns out to be sim­plest if the URLs point to a direc­to­ry in which the desired con­tent is the default page: in oth­er words, call your page “index.html” or what­ev­er your serv­er is set up to serve as default, and put it in a direc­to­ry, for exam­ple one named after the appli­ca­tion. So you might have a URL like “http://myserver.com/facebook/welcome/” — in oth­er words, the URL points at a direc­to­ry. This is what you want to enter into the Page Tab URL slot: with the for­ward-slash on the end.

You don’t need to pro­vide a page tab edit URL. What you prob­a­bly will want to include is a 111 x 74px image to appear in the box under the head­er on the main Face­book Page.

In addi­tion, select the width of the insert­ed HTML mate­r­i­al. You can use the orig­i­nal 520px width or the new 810px. Remem­ber that whichev­er you choose, the HTML will be dis­played on a blank white page with a Face­book blue strip at the top and lit­tle else: it should work visu­al­ly in this envi­ron­ment. It turns out that the width is not quite as straight­for­ward as it appears, as will be seen below.

On the face of it, you’re now done as far as the Face­book side of the set­up is con­cerned. Wrong. There is anoth­er step you need to take, and that is to click the check-mark next to “App on Face­book”. This asks you to enter Can­vas URL and Secure Can­vas URL. Enter exact­ly the same URLs as you used above. This step is not obvi­ous (don’t you just need to select Page Tab? No.) but if you don’t do it, you will get an error 191 when you try to add the App to a page. I have not seen this doc­u­ment­ed any­where: have you? And if you look up Error 191, you’ll find that absolute­ly every­one gets this error and that nobody has sug­gest­ed that fill­ing in the “App on Face­book” tab is the solu­tion, or what should go in there.

Once the above has been com­plet­ed, you can go off and cre­ate your mini-pages that will be stored at the URLs above and will be dis­played in an iframe on the Face­book page when vis­i­tors click on your app tab.

You can cre­ate the HTML in your favourite edi­tor: I use Dreamweaver, but you can even cre­ate it in the Post Edi­tor in Word­Press, then click the HTML tab in the Edi­tor and copy the code out, save it in a file with the right name, and upload it to the serv­er.

In my case I had a 520px-wide x 775px high image and I sim­ply placed it cen­tred on the page and cre­at­ed a local image map to allow me to make it click­able, with dif­fer­ent parts of the image tak­ing vis­i­tors to dif­fer­ent URLs on the client’s main web site. The client’s for­mat involves black back­grounds, and the image had this, so I set the page back­ground colour to black too, just in case. This proved to be inad­vis­able.

Adding the App to a Page

Once the page con­tent is in posi­tion on your serv­er, you are essen­tial­ly done, and you can go back to Face­book and enter the spe­cial URL that allows you to select which of the Pages you admin­is­ter the App should be added to. Why this isn’t eas­i­er is beyond me. A but­ton would have been nice. The URL is:

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

You get the App ID from the Set­tings page of your App, in the top sec­tion. The “Your URL” is the tricky bit. It’s the Can­vas URL, and this is why it needs to be there. If it isn’t, then what­ev­er you put in there, you’ll get the 191 error, which seems to relate to where the app redi­rects you to when you click on it.

All being well, though, you will get a nice lit­tle page that allows you to choose one of the pages you admin­is­ter and add the App to the Page. You can then go to the Page and move the order of the tabs around to suit you (the “Pho­tos” tab has to be first, for some rea­son, but you can move the oth­ers by swap­ping them around).

When 520px is actu­al­ly 512

If you cre­at­ed the page the way I described above, with an image and imagemap, you will notice straight away that it hasn’t quite worked. The same is true if you sliced your image into bits, each with its own linked, and posi­tioned them with a table. You will (prob­a­bly, I assume it wasn’t just me) see hor­i­zon­tal and ver­ti­cal scroll bars. WTF?

By sim­ply reduc­ing the width one pix­el at a time I dis­cov­ered that both scroll bars go away if you set the width to 512px. Nowhere have I seen this doc­u­ment­ed, so I would be fas­ci­nat­ed to know under what cir­cum­stances this appears. So I trimmed the image a lit­tle so that it was 512px wide and lo! It worked!

And now you run into anoth­er lit­tle aes­thet­ic issue. You’ll recall that I had my image on a black back­ground. So I look at my image on the Face­book page and I notice a black strip down the left-hand side. It turns out that this strip is 8px wide. Hmmm. The image has to be 512 or it shows scroll bars, but it is placed in a 520px-wide space. Odd. Not only that, the image is ranged right in the space, even though the HTML cen­tres it on the page. This appears to be the case what­ev­er image posi­tion­ing you use.

As a result, I had to remove the black back­ground from the page, instead set­ting it to white, the back­ground colour of the Face­book page. Nobody will notice that the image is 8px to the right.

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: