I came across a cool article the other day which had some examples on how to go a little crazy with your Facebook profile picture, so I can’t take full credit for this. In fact I might not be able to take any credit at all, I just got done reading the article when my good friend (and awesome photographer) Doug was walking by, he had his full set of equipment with him that day and the next thing I knew I was hanging from the drywall down the hall with a flash on either side of me, I’m just glad I opted to wear underwear that day! He did his Photoshop thing and placed the photo over a Facebook profile background template, and added what I can only assume if what he perceives Twitter to think of me, he even added a splat of bird crap to my lid – nice! I uploaded it to my Facebook profile and I think it turned out great. The deal is basically that Facebook allows your profile picture to be up to 200 x 600 pixels and if you overlay it onto the background before uploading then you can make it seemingly interact with or come out of the page.
A few of things to keep in mind:
- The position of the photo is dependent on how many lines your status message occupies. The image isn’t pushed down with the rest of the page content, so the more lines your status occupies the more of the upper gray needs to be added to the image. The majority of my status messages seem to take up two lines, so I have my image defaulted to that, and I also have a one line version uploaded to my profile pic album and could switch to that if I really wanted to.
- The position of the photo is dependent on the text size of your status message, which is a similar issue to above, but actually a much bigger problem. This is to do with how the browser chooses to render that font, so it is a platform and browser problem. We have already noticed differences from Mac to Windows to Safari – each one was a pixel off even though we used Firefox to test on all three platforms. I currently have mine set to look good in Windows which covers the majority of web users, but of course the people that really care about pixel perfect positioning are all on Macs. We thought about getting creative to try and work around this and have the wall appear to tear, this might work out fairly nicely on a picture like mine where I’m hanging so it makes sense, but wouldn’t work for all cases.
- The image doesn’t always appear over the exact background it’s been created to appear over. For example if you look at my public Facebook profile (make sure you are not logged in) it’s pushed way down, or if you look at my profile in the Facebook iPhone app it’s a similar deal. It’s not necessarily bad but something to keep in mind.
- If you go with a long profile picture as I have then it will push down the content within the left column.
- The thumbnail that accompanies your Facebook feed items is only 50 x 50 pixels so if you have a long picture it won’t all fit. I found that Facebook has quite a nice thumbnail feature that allows you to pick an area of a smaller version of your profile picture so you’ll probably find it works out quite well.
I conclude that it’s all a bit gimmicky now, at least for a personal profile page, it might work well for a fan page that doesn’t have to worry about a status message and the page looks the same whether you are logged in or not. If Facebook were to allow PNGs with transparency to be uploaded then it would solve the issue of not having to worry about where the background meets. But there would still be the issue of positioning, for example in my picture my hands hanging from the exact position of the background seem still wouldn’t be controlled. Facebook would need to allow for liquid positioning of the image – just as the rest of the page moves with the text then so should the image. And I don’t see any reason why they couldn’t allow for us to use a different image for the thumbnail than the one used for the profile picture. None of this is hard to do from a coding perspective, but I imagine Facebook is a lot more concerned with their branding, trying to stay away from the horrors of MySpace. One of the things I’ve always loved about Facebook over MySpace is exactly that – the clean organized look and feel, but c’mon Facebook give us the chance to somehow add just a little personality to our profile page!











