As designers, we often find ourselves spending exorbitant amounts of time working on fake content. It’s hard to describe something to some people without being able to show it to them. Facebook fan page widgets are something you see everywhere, and yet, how do you incorporate them into a mockup without using someone else’s box or resizing it to fit into dimensions that fit your new design but aren’t the original widget’s proportions? I have found myself in this position many times and, yesterday, set out to find a PSD solution. Unfortunately, it doesn’t exist. There are a couple really good Facebook UI templates (like this one from Fuel Your Creativity which has you covered on everything you need for an actual fan page, or this one that was featured on Smashing Magazine and includes everything else, from pop up messages to chat boxes to “loading” boxes), but nothing — nothing — for fan boxes. This was a bit surprising considering the depth and detail of what was offered in those links above, but changing my query around got me no closer to a solution for what I was looking for.
So, I decided to make my own.
This Facebook Fan Box widget is fully layered and editable, down to the dividers inside the box. The background is a shape with a stroke applied to reproduce the border around the Facebook widget’s iframe. The size of the widget is 237 x 300 — which is what I generally use when I add fan boxes to sites I’m working on because it gives enough room to have an equal amount of padding on both sides around four columns of user photos. The photos themselves are generic Facebook avatars that can be swapped with any image you want (or not). All the text is editable and in Lucida Sans (which can be substituted with Lucida Grande for Mac-users).
This is version 1.0 of this PSD template, designed specifically for our own typical needs when we are designing mockups for clients. It only includes the face-box-style fan box, but leave your comments below, and we might consider updating the template to accomodate different sizes or fanbox styles.
Download Facebook Fan Box Widget PSD Template 2.05MB
downloaded 2 times