Bootstrap for Facebook apps | Hacker News Reader

Bootstrap for Facebook apps

ckrack.github.com

325 pointsllambda40 comments

I really hate to rant. I love the idea of this and worked on a thing like a "fb bootstrap" By myself for quite a while now.

Having done many fb apps and making heavy use of twitter bootstrap by myself for other projects recently (oh god, app development on lightspeed!) i first looked at it thrilled: hey cool- this will come in handy! But after about 5 seconds: wtf?

This is just twitterbootstrap painted blue. Using this for your facebook apps would NOT give them a genuine facebook look but make them only look cheap.

The typo is not right. Font sizes, line spacing - everything. Forget about the columns. They are twitterstyle, not facebook. Buttons? They are grey and blue, yes - but not facebook style. Tables? Not at all. I could continue this list for every single element! Facebook has unique tabs, unique breadcumbs. Completely missing!

My quick advice for getting a nearly facebook-like style in your appe in seconds: embed their CSS in your header. When you investigate a bit how they build their page elements, you can mimic their style really quick.

And for the "fb bootstrap": nice idea. Awful implementation. Stay away from it. But everyone has to decide for himself - seems like most people like it, tough.

Hi Chris, do you think you could extract and share your knowledge and stylesheets the way that FB Bootstrap does?

If I manage to spend 1-2 days on cleaning up and documenting my framework (be warned, it's PHP based) I will open a github project and post it here on HN.

Php newbie factoid: every single php programmer I know ends up developing a framework of their own.

Why does this happen (appearently) more on PHP than other languages? (please correct me if I'm statistically wrong)

Maybe because it's easier than learning an existing one? I don't know.

The reason why I created my facebook framework: there simply is no other.

I think you're being too critical and you're at risk of coming off as a know-it-all here. On the whole you're right in your criticisms but I think you're taking too narrow of a view of this.

First off, it's close enough. Close enough is more than enough for something like this as Facebook has rules about looking too much like the rest of the site. Having it be close but not quite Facebook-style is great for plausible deniability if they ever gave you a problem and you were inclined to try to defend yourself (it may be a losing battle but at least you have the option).

The author makes it clear that it's based on Twitter's bootstrap so it's not surprising to see it just "painted blue" as you say. Honestly, I looked at this and saw that it was more than enough to get you started.

Whenever you create a boilerplate, especially one that you release to the public, you walk a fine line between offering a solid, customizable foundation and giving people far too much structure that they have to undo. Every single framework I've ever seen (even the one I made for myself) has been criticized for being pretty much a completed project sans content. It's almost a losing battle. Give people too much and they complain it's no longer a boilerplate. Give them too little and they say there's not enough for it to be useful. I think this project walks that line quite nicely.

So I guess what I'm saying is give the guy a break. This is cool and useful. It doesn't look cheap either. I think you went too far with that statement. It isn't totally Facebook style but close enough goes a long way. I absolutely am not trying to be antagonistic. Everyome has the right to criticize especially since this got posted here on HN. I don't want to say you can't criticize but just be fair about it. It isn't as bad as you make it out to be. To me it's not bad at all. Though it may be bad to you, which is okay, don't you think there's at least some good things about it? I don't know, I have this weird paternal instinct that kicks in whenever I see criticism I think is too harsh.

The point is: download twitter bootstrap, open the variables.less file, tweak some colors to blue and grey and thats it. There is nothing what makes this a "facebook bootstrap" of any kind - and that's what I was saying.

update

It seems like the guy is still working on it - so maybe it just became popular too quickly before its ready. On a second look, the dialogs look much better now.

And as I sayed in my original post: everyone has to decide for himself ;)

PS: If facebook ever thinks you have done wrong, there will be no chance for "plausible deniability" because they simply delete your content and will never contact you or answer your mails. So why don't be perfect in the first place?

Why did you almost-but-not-exactly replicate Facebook's style conventions?

The small-but-significant differences between this framework and Facebook (e.g. button styling!) will make any app built using this look decidedly sketchy.

To me it seems that he wanted to go the CSS3 way rather than the Facebook way of doing things (multiple dom elements for single UI parts).

CSS3 won't affect the color of a border or gradient (most of which are wrong).

This was the first thing I noticed too. It seems like an odd mix between Bootstrap itself and Facebook's styling. For example, the box-shadow when focusing on text input.

Wonderful. I recently built a Facebook iFrame app and burned so many hours trying to make my app look vaguely inline with what a user expects a facebook. This is absolutely the perfect kit for that. It's a really terrible reflection on Facebook that they didn't provide exactly this themselves.

Every other "platform" provides UI guidelines with libraries/frameworks to allow others build products native to their platform. Facebook have made no good attempt at this, which is why this is a great project!

I'm going through this now so I'm equally excited. A little bit off-topic, but how did you deal with the back button problem?

Currently, if my user navigates a few pages deep in my app and clicks the back button, it exits the app and goes back to Facebook. Quite annoying... Thanks!

You could do something hacky with pushState [0], but it would take a considerable amount of work to make it work. I can't even think of a way to implement it, but you could try something out.

Your other option is to have a back button in your iframe in a prominent location and hope your user uses that instead of the browser back button.

If you somehow figure out a way to make pushState work, you should probably still have a back button in your app, for old browsers. Or at least display it for only old browsers.

[0] -https://developer.mozilla.org/en/DOM/Manipulating_the_browse...

I think pushState might be the solution indeed. I was hoping for something a bit simpler. Thanks for the help! For the record, this screencast helped me: http://railscasts.com/episodes/246-ajax-history-state

Thanks for the link! I wanted to learn about pushState so that might help me out.

Because the app is in an iFrame, you can just use regular linked files and then the back button works as expected.

If you do that though, there are a few other issues - you may have to account for pages that do/don't have the Facebook signed_request post data - i.e. you probably need to store it in a session or cookie (and deal with the relevant IE7 cookie + iFrame issues by settings P3P header if you support IE7. Can't remember offhand if it is a problem in IE8.)

Obviously more complex apps where navigation is handled through AJAX get tricky when you can't access the container frame. Maybe look into history.js (https://github.com/balupton/History.js/) and see if it works in a Facebook app?

History.js looks promising. I'll definitely dig deeper. Using regular A tags does not work, however, hence my question.

I decided not to support IE7 since this is a brand new app. It will be IE8+. I had to deal with the P3P issue in the past and it was a pain. Hopefully IE8 isn't as picky.

Thanks for the help! I now have something to investigate.

If some other people have also problems with IE, facebook and session cookies, have a look at this reciep, i wrote. The solution is pretty easy. http://recipes.wearekiss.com/view/platform/problem-solutions...

I had trouble doing just this, mainly because of how IE handles cookies on 304. I used this Gem for a Rails app (~1 year ago): https://rubygems.org/gems/rack-p3p.

Facebook actually passes the path from the canvas url to your iframe. So what I do is make all the targets "_top" and point to my canvas url. No need for complicated JS stuff. :D

So a link in my iframe app would be something like this: <a href="https://apps.facebook.com/defensio/archives/index target="_top">Deleted</a>

This will create an iframe with https://facebook.defensio.net/archives/index

Thanks Jason. That's actually my fallback idea, but isn't that very slow for the user since it reloads the Facebook container every time?

As the developer of a couple of Facebook apps, I have to ask: do apps HAVE to "look inline" with Facebook? Is there any proof or anything showing that apps that use the same typography and style as Fb instead of their own visual style fare any better?

Brilliant. That said, as someone working heavily with Bootstrap these days, I suggest that you rebase this off of the 2.0-wip branch as a lot has changed (for the better) there.

Good opportunity: sell themes for twitter bootstrap. Make it a marketplace.

This is great! Here's an idea: bootstrap with "pluggable" skin (Twitter, Facebook, Google+) so you can make your app standalone (use Twitter style) or inside Facebook (use Facebook style), etc.

I'm not sure if this bootstrap is already compatible with Twitter's (i.e. as simple as changing CSS file), haven't tried this bootstrap thing, but it would be great if it is!

Great idea, however I imagine most applications wouldn't need to be cross-platform.

Excellent. I was just working on a project that used Bootstrap, which worked great until I had to implement Facebook notifications (which must be viewed in a canvas app). Bootstrap is too wide for that.

Careful when branding your apps to look like Facebook.

https://developers.facebook.com/docs/guides/policy/policy_ch...

"App does not use Facebook trademarks or express or imply any affiliation with or endorsement by Facebook"

This is a rather vague statement that I could easily see being used as the justification for squashing someone's app. This is why I've always made sure any FB app I make doesn't completely rip-off Facebook styling but contains enough of my own styling to not appear to be part of Facebook.

Great, FB-styled bootstrap. Naturally, the typography is terrible. =[

I was recently working on a facebook app and thought of something similar, you have beaten me to it. Great work! Kudos!

Here is a similar facebook bootstrap that I started, functional but still a WIP.

https://github.com/tblobaum/bootstrap/tree/2.0-wip

Great bootstrap, but there seems to be a problem with inline labels in Chrome (Ubuntu 10.10). Twitter's labels work fine though. I played with CSS a bit and the labels don't like Lucida grande, obviously: http://imgur.com/XJ51Z

Great. I just wish Facebook would provide something like this themselves.

Brilliant!!! i foresee less ugly looking apps!

Twitter bootstrap turned blue. You could have at least been a bit more creative than creating an almost identical clone.

humm.

Given that Facebook apps are completely dominated by large companies these days, I'm puzzled by how useful this would be.

Are people really still building FB applications?

I thought the only real action these days was in the mobile space.

I think it looks awesome, it really does! However twitter bootstrap looks really generic therefor can be used any place, Fbootstrapp looks a lot like Facebook and cannot be used for much else beside Facebook apps without looking like a rip off.

The info page pretty explicitly says that Fbootstrapp is designed for building Facebook apps; if you're building something that wasn't meant to be viewed within an iframe on FB's page, you're looking at the wrong tool.

That's the point of the project.

> Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps

Reply on news.ycombinator.com