Free Facebook Fan Box Widget PSD Template

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

embed google apps documents in a wave

while the fact that google wave isn’t natively integrated with all things google already — something that still baffles me; this is the technology that’s going to take over the world, isn’t it? — this particular trick works brilliantly and cleverly disguises the fact that your document isn’t actually natively integrated into your wave.

first, start a wave.  wait, you don’t have google wave yet?  wtf are you waiting for?  i’ve got invites right here! okay, with me now?  good.  start a wave.  click on the little add gadget button that looks like a puzzle piece.  that lets you enter the url of a specific gadget.  now enter this url in there:

[co]http://wave-ide.appspot.com/iframe.xml[de]

what this gadget does is allow you to embed a new webpage into your wave in an iframe.  not the most elegant solution, granted, but it works and it’s seamless.  now you have a big, ugly, teal iframe in your wave and you want to change that to a google document.  if you’re doing a document or a spreadsheet, go to said doc/spreadsheet and click on share.  here’s the cool part: you can publish your document publicly, but you don’t have to, you can use the private url in your wave embed and only you and the people invited to your wave will be able to see the document.  if you want to go this route, from Share, click “Get the link to share” and copy the URL (make sure you hit Save after copying  your URL).  back in your Wave, click Edit above the big  ugly teal box.  now you can paste your doc’s URL and also specify the height for the iframe.  voilá, you now have a google document embedded in your wave.  presumably you can see others making edits to the doc in real time, too, though i haven’t tested this personally.

so what if you don’t want to share a document, but instead want to share a calendar?  this is actually what i was trying to do when i discovered this trick.  make your calendar (or select the calendar you want to share in your Wave), and from the dropdown menu, select “Calendar settings.”  from there, you can right-click and copy the link for HTML under Calendar Address (or click the link and copy the URL in the address bar) if your calendar is public, or do the same under Private Address if it’s not.  again, using the private address shares the calendar only with the people invited to the wave — it’s still private, otherwise.  once you have the URL, plug it into the iframe gadget and you’ve got yourself a calendar embedded in your wave.  unlike what’s been reported about docs and spreadsheets, it doesn’t seem to me like the calendar updates in realtime.  i suspect this has to do with the infrastructure of the technology, but i imagine someday everything google does ever will always be realtime, so i’m sure it’s only a matter of time before you will see events randomly pop up in the calendar as you’re staring at it.  and, of course, it’s only a matter of time before all google apps are natively integrated with Wave in the first place.  but to see this working,  it’s easy to believe that it is a native integration and not a third-party workaround.

with the intensity of ambivalence with which Wave made it’s official debut, i’m glad that things like this are slowly coming into the fold.  i really believe that Wave could revolutionize how we communicate, but it needs a massive adoption: it needs to replace email itself to fully be realized for what it can be.  but i still pine for more tools and more adoption for more of the fancy crap that Wave is capable of.