Ok so you’re not really hacking anything, but I figured using that word would grab more attention! With that said, this trick is nothing more than an easy manipulation of a new feature in Facebook. First of all, you’ll need to upgrade your account to the new profile layout if you haven’t already done so. You can do this by going to: facebook.com/about/profile/. Login and you’ll see the option to switch.
The New Layout
Also on that page will be a complete description of what visual changes will be made to your profile, but the only one we’re interested in is the new “snapshot” feature. This is the very top section of your profile that tells people some basic information about yourself:
Above, you can see the highlighted area. You can see what I call the Facebook image bar. It’s a collection of the last 5 photos that someone tagged you in. It puts them in order from left to right, meaning that all newly tagged photos will show up on the left side and move their way down the line.
Hacking (Manipulating) The Image Bar
As you can also see by the screenshot, I have hacked my image bar to show ledfrog.com whenever anyone clicks on my profile. Naturally, I wanted to draw their attention to my site and I was not surprised to find out that people see those images before anything else on my profile! From a marketing standpoint, this is great news.
The process is generally easy, but if you’re using some intricate design work or you’d like to integrate your default profile pic into the mix as well, it can get a bit complicated. For basic instructions, follow these steps:
- Create an image that is 487 x 68px. (487px is counting the white spaces between each photo)
- Cut out the five images from your main image. Each of the five need to be 91 x 68px in size.
- Upload these five tiny images to your profile. It might be easier to create a separate photo album for them.
- Tag yourself in the photos one at a time. If your image needs to line up in a specific order, like mine, you’ll want to tag the last photo first and the first photo last. This way, they’ll show up in the correct order.
That’s it! When you’re done, go back to your main profile page and you’ll see your handy work.
Advanced Manipulation
Obviously there’s some small space between the tagged images, so your photos won’t line up perfectly (like mine), but if you’re dead set on getting the images cut with the spaces in the proper places, you’ll want to cut out the white space on your original image and then take what’s left and turn them into 5 separate images. Make note that the white space is exactly 8px wide.
I created a layered Adobe Photoshop® template that you can use to see where the cutouts will fall if you plan on using a full image to create all the tiny ones. Please note that this template was designed and sized from my own Facebook page. Yours may differ slightly in size and alignment. Use this template as a guide rather than a standard.
It’s super easy to use:
- Open the template in Adobe Photoshop®.
- Take the image you’d like to slice and dice and place it on a layer behind the cutout layer.
- Resize that image if necessary to fit into each of the 6 squares properly so it looks good.
- Cutout each image and save them separately.
- Upload all images to a new album (if preferred) on Facebook and make sure this album is visible to Everyone.
- Tag yourself in each of the smaller photos, but remember to tag the last photo in the lineup first!
- Take the 6th photo and make it your default picture and then you’re all set!
Here’s a sample of the template in use with a picture ready to be cutout:
Issues
As you may have already guessed, the number one issue with doing this modification is that anyone who tags you in photos will be able to destroy your work of art! However, it’s not hard to fix. Just hover your mouse over the image(s) that you want to remove and a little ‘X’ will appear in the corner–click on that and the image will be removed from the top bar, but it will retain your tag.
You can also have a little fun with this too! You can tag your friends in your images and your hacked image will appear on their pages as well! Be careful though…if you start putting up derogatory things on your friend’s pages, you may not have any friends left. Worse case scenario, you could be hearing from the Facebook team if people start logging complaints about you.
I hope you enjoyed this tutorial. If you run a website, you are more than welcome to repost some of my steps above as well as the template download, however, I must ask that you retain credit to me by posting a link back to this article and leaving my website information inside the template. Also, please don’t hotlink the template file from my server! Upload it to your server instead.
Hi Brandon,
Thanks for the post. Good explanation of the new profile layout.
I explain what I'm about to say in more detail in this blog post: http://FatWalr.us/2010/12/facebook-profile-pictur…
This template is only going to work for people with a specific amount of personal information at the top of their profiles. If they have more or less, then the thumbnails aren't going to line up, if you're trying to incorporate your default profile pic. You would need more layers of your Photoshop file to accomodate other users doing it the way that you are. You could also set up slices in your .psd and direct people to 'Save for Web' instead of the extra instructions to help expedite the process. You would then, however, need to offer multiple .psd's with different web slices set up to accomodate people with varying amounts of info at the top.
The actual profile picture space in your template is much shorter than what Facebook allows. You can use taller images to really enhance the affect. You would need to add some vertical height and change the profile pic slot in your .psd to accomodate.
Also, you don't need to untag yourself from photos to prevent them from appearing on your profile page. You can simply mouse over the image that is messing up your layout and click the little 'x' that appears. This will remove the picture from your profile page without having to remove the tag.
Hope this helps!
I didn't even think about that and it makes so much sense now that you mentioned it. I'll update the article to reflect that. The slices idea is something I hadn't thought of which is odd since I use those all the time for web graphics and such! I think I'm going to remove the template file for now until I come up with something better.
It's good to know that clicking on the little X just removes the picture. I was under the impression that doing this actually untagged the photo. This is so much more handy.
Thanks so much for the updates and new information!
Works great on my main page, but doesn't seem to work on the extra pages I have created … like a business or community page. Does this make sense? Got any ideas?
I'm not too sure. I know pages act much differently than profiles, so it may not be possible. However, I can look into it and if I find an answer, you can bet I'll post it here! Thanks for the heads up.
Having trouble recreating effect on an Organization page, too. It sets up the images to change order on each refresh.
I haven't had a chance to verify this, but I know that since the organization pages work a lot differently than regular profile pages, something like this was to be expected. I don't run an organization page I could test, so if anyone has any insight to this problem, please share.
And if I happen to come across something that solves this problem, you can be sure I'll update this post. Thanks for the heads up!
Any idea if they changed this? I added 5 pictures and tagged them from right-to-left.
However, when I check out the wallpage the pictures are randomized… when refreshed, the pictures are in a different order again. Any idea what's going wrong?
Hello guys! First of all thanks for the tutorial Brandon. The bad thing is that I'm getting the same error in my organization page as everyone else i can't figure out why is that happening :(.