Facebook Page Tab for the Library Catalogue!!!

Forgive me for getting excited about this, but I had a abortive attempt at creating a Facebook app for the library catalogue (several years ago). I also couldn't figure out how to get the Libx one working, so when I saw a post to an e-mail list about how easy it was with Facebook Page Tabs to do it for the Library Catalogue I couldn't wait to get dug in. While figuring it out I was intrigued to learn that Facebook are retiring their FB mark up languages, in favour of iFrames. This seems to have made my dive into Page Tabs easier than expected.

While it wasn't quite as easy as implied I did successfully pull it off inside of one morning.

Preparation: 

• Sign up for Facebook Developers (You need to validate your account using a mobile phone number or credit card).
• Decide on a name for your App 
• Have a Facebook page to put your page tab on
• Create a html page hosted elsewhere with the content you want to display in Facebook pre-populated. This page should be 810 px or 520 px wide. (I used a page from our library catalogue search interface) 
• Know what the URL and secure URL for this page are.
• Create or reuse an icon 111 x 74px to represent and link to your app from your Facebook Page. For Example, here's what I used. Please contact me if you want to use it. 

Here's what I did... (I'm not saying it will work for anyone else) 

Sign in to Facebook Developers
Click create new app
On the left hand menu under Settings, click on Basic
Enter as many details as you can.
I entered:

Basic Info

Display Name
Contact e-mail
Enabled sandbox

Select how your app integrates with Facebook 

Page Tab

Page Tab Name
Page Tab URL
Secure Page Tab URL
Uploaded a Page Tab Image that reads Library Catalogue
Selected the desired width (810 or 520)
Clicked save changes

Advanced settings were also visited and similar information entered.

Activating your Page Tab

Once complete I went to http://addpagetab.com and entered the number of my app. It takes a few minutes to appear.

Then I went back to Facebook developers and selected my testers

Next I visited my page and positioned my page tab icon (loaded above, reads Search Library Catalogue) by clicking on the icon, then selecting the pencil, and using the swop with instruction to move it into the desired place.

Testing

You have the option to test your app, which I really appreciate. So at the moment it's in testing as I know that the look and feel of our website will change in the next few weeks, and will probably remain in testing for the interim. But hopefully it will be live and kicking for the repeat exams. 

Here's how it looks on our Facebook Page

Here's how it looks in Facebook