Just recently, I launched a new version of Radio Javan’s site for the mobile web (finally) which works on the iPhone, Android, and Palm Pre phones (essentially anything running a WebKit-based browser). Even though mobile formatted versions of sites is nothing new, it was a never a high priority for me compared to other development tasks. But over the last few months, the front page of Radio Javan has grown with a lot of content and images that take a while to load which makes it hard to use on 3G networks.
When I started, the first thing that I did was research on some existing iPhone frameworks, such as the popular iUI and the new jQTouch. But they all try to copy the iPhone native style too much and none of them really allowed me to have a custom look and feel. I looked towards some of the sites that I visit frequently on my iPhone such as ESPN, Google Reader, and Facebook, and what did they all have in common — they looked custom made.
So I spent a few weeks figuring out and writing the framework from scratch before I built out the individual pages. What did this involve? Just only less than 300 lines of jQuery code and the necessary CSS. But it really isn’t anything too genius, just took some time figuring out what I wanted. By the way, it is insanely easy and fun when working on supporting only one browser (Webkit), and then to have that browser support all the latest CSS.
The end result? http://m.radiojavan.com
I’ve currently done the most popular sections which includes Music Videos, Events (with geo location), and Podcasts. If you have any feedback, please let me know!
I just finished up with our Facebook Connect integration on Radio Javan’s site to allow users to to login to our site via their Facebook account. While I was lucky enough that there are some good Rails guides and API helpers, it was still an interesting experience. The FB APIs are pretty straightforward, but at the end of the day you are at the mercy of FB on whether or not anything actually works!
- I started off with this great guide and example project. Like most Facebook/Rails integrations, this project makes use of the awesome Facebooker library — I say “awesome” because the author still keeps it updated.
- Part of getting the integration working is that you have to send a “facebook.connect.registerUsers” command to register your existing users with FB. This API allows you to send accounts in batches of 1,000 — but it doesn’t work if you do it that high (you get HTTP errors and no-ops). In fact, I couldn’t even get it working in batches of 100, so I just ended up doing a call for each user (that would be almost 40,000+ calls for RJ).
- One important thing to note is that FB never sends the account’s email address to you. So if you want to know a new user’s email address (which is a must for RJ), then you should just simply ask for it in a signup form after they authenticated your app thru FB.
- A tricky problem is what to do if the user already has an account on your website with a DIFFERENT email address than their FB account. I’m still trying to figure this one out — I’ve seen other sites simply tell the users not to do this and use the same email, and I don’t think that’ll be a friendly behavior. Right now, I look to see if the user is already logged into RJ and determine it based on that.
- Oh, this post would not be complete without a great Internet Explorer story. So if parts of your site runs on SSL, then you need to include the SSL versions of Facebook’s Javascript files (which in turn pulls in the SSL versions of images, css, etc that it needs). The reason for this is to avoid the classic “this page both contains secure and non-secure items” from IE. So what happens when you use the SSL resources from Facebook? A big, ugly, show-stopping Javascript error (and why does it have to be about Flash?). The reason I mentioned earlier you are the mercy of FB is because I think this used to work, and they updated their JS library recently as the bugs just started showing up for people the last few weeks. My answer for now: no SSL pages for in IE — IE users don’t really care about security, do they?
Anyways, now that my integration is complete, I’m looking forward in doing more things such as publishing to the news feed. And did anyone say Facebook Connect with iPhone?
