Time to get back into some regular blogging! First up, some jQuery Facebook fun.

Looked into getting Facebook page comment counts using jQuery and the Facebook API. This is for when you’ve got Facebook comments implemented on your site using the Comments box plugin and you want to display or use the comment count somehow. I used Hal Gatewood’s PHP code as inspiration.

My getFacebookCommentCount function requires a callback function so that we only run these actions once the data has been asynchronously pulled from our buds at Facebook.

function getFacebookCommentCount(url, callback) {
    $.getJSON('https://graph.facebook.com/?ids='+url, function(data) {
        if(url && url != '#' && url != '') {
           if(!data['error']) {
              callback(data[url]['comments']);
           }
        }
     });
}

Sample usage would be:

getFacebookCommentCount('http://www.theoatmeal.com', function(count) {
  $('.putthenumberintohere').html(count);
});

That sample code would put in the Facebook comment count into any element with the “putthenumberintohere” class.

Overall, I’m thinking there might be a nicer way to check whether the URL is valid rather than my current messy way. Suggestions for improving the above code are welcome!

The web today is dull. Boring. Lame.

Okay… I take that back. The web today is pretty freaking cool. I could (and do) geekily roam around that glorious technological masterpiece of a network for days… but it’s a little flat don’t you think?

The web is made up of flat boxes on a flat screen all lined up in a very flat way. We sometimes make it look less flat with images and shadows but it’s all really just one big lie. When someone looks at a page, they’re looking at a bunch of flat elements. That’s working pretty well but it could be so much cooler.

This is where the excitement of CSS3 comes in. It has this wondrous thing called 3D transforms. You can move things around on a page on more than just the X and Y axis. You can go to that ever exciting Z axis. You know that’s the special one because it’s at the end of the alphabet. You can’t go deeper than Z. You can rotate things on a 3D plane and give your website a 3D perspective. All using only CSS and styling. No JS required.

Of course this only works on newer fancy browsers like Chrome, Safari and sometimes Firefox. I believe Opera and newer version of IE aren’t too bad either.

There are a bunch of websites I’ve come across which are already using CSS3 transforms in a neat way.

Christian Heilmann’s site has a pretty neat side menu. Really subtle yet so effective. People with browsers like Chrome and Safari get some eye candy while IE just gets the usual same old flatness. Such a simple little addition but it makes a huge difference.

Screenshot of Christian Heilmann's site with its 3D menu

Christian Heilmann shows how 3D menus can be subtle and cool

The BeerCamp website from 2011 (still not totally sure what it is, never actually read much of the text… way too mesmerised by the 3D) is incredible. It’s a very very simple effect when you look into it, yet it makes a lasting impression on every person who sees it. This is the excitement the web of the future will bring us.

A screenshot of the BeerCamp website

The incredible BeerCamp website

The Acko.net site is my favourite 3D transforms website by far. I still am in awe when I see it and I’ve gone to it so many times now. If every website looks like this in the future, the future is going to be spent with me in front of a keyboard, open mouthed and in a trance of pure bliss.

A screenshot from Acko.net

This blew my freaking mind. Just WOW.

The Snow Stack image gallery is also quite a cool concept. I’ve found it isn’t responsive all the time (occasionally stops scrolling left and right?) but that could be my laptop rather than the site itself. It is a very very cool idea with an even cooler execution.

A screenshot of the Snow Stack interactive gallery

Who needs boring and simple galleries when you can have this?

If you’re looking for a quick and interesting way to add 3D transforms to your site today, maybe look at the Flux Slider. It’s an image gallery that has both 2D and 3D transforms and is pretty fantastic to stare at while clicking buttons.

A screenshot of the Flux Slider in action

The Flux Slider in its glory

My wild CSS3 3D Transform experiment
So a little while ago, after being inspired by all this, I created my own little CSS3 3D transform experiment. It’s a set of cubes generated from a 16×16 image. It spins, animates, comes alive, glows… all using CSS3. Lots of fun to make and always lots of fun to show:

My 3D transforms experiment with Mario in cube form

If you're going to spend your time staring at something, why not Mario?

For my presentation at “What Do You Know?” in Sydney, I created the following simple step by step guide to making a cube out of CSS3. It’s ultra simplified but might help get your mind around it if you’re looking to give this a go yourself:

Screenshot of my interactive guide to making a cube in CSS3

Oh the joys of webkit animations

(The two icons there are the fancy images used in the cube are from the great people at W3 – http://www.w3.org/html/logo)

So overall, I’d like to think the web is moving towards a more 3D and exciting environment. With 3D we’ll hopefully see more engaging and awe-inspiring website designs taking the web to new heights.

If you do have something cool you’ve made in CSS3 3D, I’d love to see it! Leave a comment below or tweet at me: @thatpatrickguy