building a nice image gallery like pinterest/friendsheet using facebook graph api and LightBulb

Pinterest has gained lots of attention lately and became popular in the photographer’s and designers community from the very beginning. And once something is popular, people copy (and sometime with improvement) their beautiful user interface ideas into their own project. Last week i’ve seen quite a traction when friendsheet was released. They allow you to browse photos from your Facebook news feed in a nice and organized way.

When we saw friendsheet last week – me and Rifat were discussing that it could be a nice demonstration if we develop a image gallery with our revolutionary project LightBulb (seriously, someday something’s gonna change the world – so keep dreaming big).

LightBulb is an extensive wrapper of Facebook Open Graph objects sitting on top of their JS SDK. You can interact unbelievably easily with graph objects using a wrapper like LightBulb without worrying too much about underlying technology and the core API itself. LightBulb is stable, easy to use, there are already lots of examples within it. Hasn’t been officially released yet but we are planning to do so in a week or two. Stay in touch.

So back to the point, our main intention was to show LightBulb’s capability of pulling FB graph objects and show them in a nice way like FriendSheet. The final output looks similar to that of Pinterest/Friendsheet and guess what, for only 10-15 lines of JS :) with another couple of lines added in the stylesheet block.

Demo: – For download link of source code, keep reading :) . If you dont see the gallery (or sometime see a little overlapping sometime) please refresh and it will work like a charm. It’s fully compatible and responsive with your mobile device.

The hovering effect is done using jQuery Adipoli Hover plugin. The stacked display is done by using jQuery Masonry plugin.

LightBulb is under active development from the developers at Leevio ( Me, Shoriful Islam Ronju and Rinku Arnob) , Rifat Nabi and M.A Hossain Tonu.

Download the Facebook Gallery using LightBulb from here (Thanks

Shameless Promotion
If you want to outsource your Facebook application development to us, feel free to contact us here. Why? Because we know Facebook app development and their open graph objects inside out :)

8 thoughts on “building a nice image gallery like pinterest/friendsheet using facebook graph api and LightBulb”

  1. hello,

    its awesome script. i am using this script in my website.

    how can i display my all facebook images here? here displaying few images from my facebook. please tell me how to display all images from facebook. and also how can i display facebook like and comment button on it like pinterest.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s