Posts from — June 2012

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 alternative.

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 Facebook

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 does­n’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 content.

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 server.

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 clien­t’s main web site. The clien­t’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 inadvisable.

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 has­n’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 was­n’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.