Posts Tagged ‘facebook’
February 11th, 2010
I recently came across an awesome plugin for jQuery which is called Facebox. Facebox produces a clean lightbox that can be a container for popup images, text and basically any HTML layout as well as AJAX powered content.
Facebox: Creating Facebook-like Dialogs
The problem with Facebox is the lightbox placement. The dialog itself is placed in the center of the page horizontally with a preset margin from the top, which looks good, but what I did notice is that the box containing the loading icon is being placed somewhere to the left part of the page. Well at least on Firefox 3.5.7.
I couldn’t help but noticing that FamSpam and StaffTool are using a different set of functions and styles for the lightbox placement and copying them into my code solved the issue.
The two functions are called getPageScroll() and getPageHeight() and are marked as quirksmode.com inside the code. The #facebox style in the CSS lacked a width: 100% which seems to have solved the issue for now. There’s also a certain overlay in the original version which includes an interesting IE6 hack:
1
2
| height: expression(document.body.scrollHeight > document.body.offsetHeight ?
document.body.scrollHeight : document.body.offsetHeight + 'px'); |
The versions at Stafftool and FamSpam however don’t mention any overlays in there code. Pretty messy, huh? Well, other than that, the plugin is very lightweight and cross-browser, works well in IE and closes the popup when pressing Esc, which unfortunately has to be hand-coded in other versions of the Facebook-style dialog boxes.
Grab the code at GitHub and enjoy: Facebox for jQuery.
November 20th, 2009
As you may have heard, I’m only starting as a Facebook developer and with a few recent experiments, Timothy and I thought about customizing a fan page on Facebook, which will hopefully soon take advantage of its own domain name (Facebook’s Open Graph API). This is less of a technical post and more of a thinking one. We started our new experiment on a Sochi 2014 Olympiad fan page on Facebook and we’re trying to replicate one of the the original websites (sochi2014.com) inside the fan page canvas.
Creating Facebook Fanpages: Experiment One
Errm.. I’d like to give a huge shoutout to the talented (sarcasm) developers of sochi2014.com! Well, on the outside the website looks okay, but on the inside, oh brother, give me a break! I’ll point out the most interesting and fun ones:
- Starting from the first line: no document type definition
- I noticed an empty table with a cellpadding=3, is that the new standard for margins? ;)
- Check out the script type=”" language=”javascript”, what the hell does that mean?
- Wow, heh, haven’t seen that for a while!
- Cool, they’re replacing margin-top: 1px; with an empty.gif height=1 image!
- Closer to the bottom of the page, I found 11 closing divs right next to eachother.. I don’t believe that they’re using a minify script for that one
- And ~ 50 errors according to the W3C HTML validator, I don’t think there’s a reason to mention them all
That’s probably enough for a start. Very frustrating when a website like that is being built like *that*, and with a page rank of 8! I’d give those guys a solid 2 ;)
Now, back to Facebook. I registered a new application, did some setup and managed to get a four-page website, similar to sochi2014.com, inside apps.facebook.com, with a few modifications (and cleaning up of the code), including a dashboard and a tabs widget for navigation. This was quite straightforward and simple to do (take a look at the Facebook API Developers Guide), the linking structure was okay, the contact form was done in only a few seconds (thank you Facebook for your great FBML!) and the static pages were simply some copy-pasting.
Once I got that up and running I decided to port it into the fan page (as an application tab) that Tim and I manage. I was quite surprised that all the linking structure died, but was pleased that I could at least see the front page, besides the fact that you have to click on the flash element before it’s shown. With a few more experiments and some help from the Facebook Platform Developer Forum (which is a very sweet place btw) I came to a conclusion that multipaging will not work in application tabs on profiles and fan pages. The easiest way around this is of course to use FBJS (javascript) to imitate multiple pages by hiding and showing certain elements on mouse click events. Forms would be a problem too, unless submitted via Mock AJAX.
Tim then asked me if I could move the menu I built up to the top where the main tabs are (Info, Wall, Photos, etc) which seemed impossible. Well, at least from within one Facebook application. So if I’d like to have 5 tabs at the top of the fan page I’d have to register 5 new Facebook applications, what a mess! Wouldn’t it be easier to manage a certain amount of tabs within one application and let profile owners and fan page administrators decide which ones they’re going to put up their navigation? Oh well.
It’s very strange though why companies aren’t yet taking full advantage of what fan pages might look (and work) like. Let’s take a look at Mashable’s Killer Facebook Fan Pages. Out of the 5 pages featured there, the Redbull Fan Page is the one I liked most. They have FBJS pagination, flash video and links to their application page which is quite interesting (yet still a single page with minumum user interaction). The Adidas Originals custom fan page is fully based on Flash, which is why they ask you to “Click to Enter” before you could see anything. The Starbucks and Coca-Cola pages are less interesting, simple HTML with links to external pages. The Pringles fan page doesn’t even have an app of it’s own – Killer?
Here are a few other pages worth checking out. Smashing Magazine – they’ve got two sections: “The Smashing Book” and “Write for Us”, which are two different Facebook applications (judged by the URL). The BMW Fan Page features an interactive form with FBJS validation and submission – way to go guys! And I’m pretty sure there are tonnes of others which I didn’t come across.
November 17th, 2009
For quite some time now I’ve been dreaming about getting into the Facebook Platform (API, Markup Language, etc) but haven’t had good enough reasons to do so. One good friend of mine Timothy gave me those reasons not so long ago and guess what! I came up with my very first Facebook App! It’s still in the sandbox, don’t rush searching for it in the applications database. I’m not going to share any code as it’s all clumsy but I do want to share some screenshots and my first experience with the Facebook API.
My Very First Facebook App
One very interesting thing about the API is the testing console, where you could run any Facebook API methods, very useful for debugging. Interface design is very catchy too, with the new Facebook Markup Language and the FBML testing console, so quick and robust! Pepole are still asking for form elements extensions though, such as the checkbox or option – it seems that they come out buggy as fb:editor-custom.
Anyways, the first thing that came into my mind is adding a Twitter Tags tab to a profile or fan page, so I used the Foller.me API and within a few hours I managed to get a fully working (or not) canvas application tab. I’m surprised by how well-written the Facebook PHP Client Library is. All the methods are explained in the code comments and do exactly what they’re expected to. The Facebook Markup Language takes care of application settings, private areas (app configuration, etc) and everything else. The overall Facebook Developers Documentation is okay, I’ll give that an 8 out of 10 and I like them running the MediaWiki software ;) Here are some screenshots of my application:
Still not sure where this is going but Timothy had some great ideas about custom Facebook Apps. I guess a release of the Twitter Tags application would be handy for some profiles (or at least for some more experience), so I might push that forward in the near future and file an “add to facebook database” request to go public. After that we’ll aim for something bigger.
December 29th, 2008
Somebody on Twitter yesterday posted a link to UADDit with photos of workplaces in web 2.0 companies, such as Twitter, Facebook, Flickr, Last.fm, Mozilla and others. I just couldn’t resist, so here they are:
The last.fm pictures are my favourite! The original post is at uaddit.com discussions.
