You’ve seen it before: people doing weird things with their profile picture to make it bigger, blend into the background, or really anything else that will make them stand out from the crowd. We’ve seen people hanging off things, climbing, falling, or doing pretty much anything else that you can do in a small amount of vertical space. Well, with Facebook’s new profile layout, your creativity now has new boundaries.
Being sure to give credit where it’s due, the first person to have reportedly “hacked” their Facebook profile like this is French artist Alexandre Oudin. Since then, many people have come up with new, unique ways of using this space.
Here’s my current profile:
And here’s my previous one:
How it’s done
Once you have your pictures saved out (more on that below) you need to do the following:
- Upload your new profile picture
- Upload each of the thumbnail pictures
- Tag yourself in the thumbnail image that will be the farthest to the right when you’re done
- Tag the next farthest right, then the next, until you have all 5 thumbnail images tagged
- Wait for your friends to describe your awesomeness
Maintenance
This hack is not without its flaws, though. If anyone else tags you in a picture, that picture will become your new thumbnail graphic (on the left). In the example of my daughter, her arm gradually detaches from her body. There is a very simple solution, though. All you need to do is mouse over the thumbnail that you don’t want in the lineup and click the ‘x’ that appears in the top right corner. Don’t worry, that doesn’t remove your tag. It simply tells Facebook that you don’t want that thumbnail to show up on your Profile homepage.
Download the Photoshop template file
Getting the pictures can be tricky if you don’t know exactly (down to the pixel) where the thumbnail images show up in relation to your profile picture on the Facebook page. And that’s why I made these Photoshop templates.
Since different people have different amounts of personal info at the top of their page, there are different versions of the template. In my examples above, you will see that I have 3 rows of personal information at the top (where I live, my birthday, etc.), so I would have to download the template for “3 rows” below.
Download the Photoshop template file for 2 rows of personal info.
Download the Photoshop template file for 3 rows of personal info.
thanks @jnew and @paul: your comments helped make this process better for everyone
I’m hoping that this template will help in your quest for Facebook coolness. If you have Photoshop, just follow these steps to get your own picture loaded up:
- Download the template file (above)
- Open it in Photoshop
- Make a new layer beneath the layer called “put pic under this layer”
- Place your desired image on this layer
- Choose “Save for Web”
- Holding the Shift key, highlight slices 1, 4, 6, 8, 10, and 12.
- Click “Save” (thanks @Flomaster for pointing this out)
- From the Slices dropdown at the bottom, choose “Selected Slices”
- Click “Save” (again)
Now you just need to upload and tag the images in the order outlined above. Now sit back, admire your new Facebook profile, and wait for your friends to tell you how cool you are.
Help! I don’t know Photoshop!
If you don’t have or know how to use Photoshop, there are services out there that will give you this sort of effect automatically. You may find that you have a little less control over the outcome, but you can get in on the fun just the same. I don’t really know anything about the services themselves, but a couple that I’ve seen around are Profile Pane and Your New Profile.
“Hack” your photo albums too!
You can also do a similar hack to a Facebook photo album.
Show us what you got
Do you have a Facebook profile of your own to share? Let’s see ‘em! Take a screenshot and share in the comments.
wow this is awsome!
Tried a photo frame concept:
http://www.flickr.com/photos/darryltieng/5296892597/
Cool. Thanks for sharing.
I used the template and there was a 15px shift upwards on the profile picture, other than that, it worked great.
Thanks for the comment, Paul. It dawned on me that I was only supplying one version of a template, when really multiple versions are required, since different people are displaying different amounts of personal info at the top of their profile pages. I made the template for my own profile (which has three rows of info at the top), and I’m guessing that you only have two, which caused the 15px shift. I revamped the template and supplied new versions (as shown above). Props to you for helping me figure out the deficiency here.
Here you go. Would you be able to make a template that adds the photo album below the tagged set so you can show more of the image? I’m referencing the kid in the glasses: http://cdn.mashable.com/wp-content/uploads/2010/12/Jayden-Tan-Facebook-Profile.jpg
Here’s mine, from your template.
http://i15.photobucket.com/albums/a380/sdavis1986/Screenshot2010-12-29at121909AM.png
szep
links to templates aren’t working
So sorry. It’s fixed now.
hello I have a problem with the template.
I am using photoshop CS4 and when I go to save for web. I hold shift and select the right slices I do not see a drop down for ‘selected slices” it saves the entire image
step 6.5 click save
then you can click the dropdown box and “selected slices’
Thanks for pointing this out. It’s confusing when people like me skip steps. I’ve revised the instructions.
Thank you for the templates. I was just forced to the new profile page yesterday. Your templates made this a quick and easy job and I plan to change my profile images on a regular basis.
Hey, you’re very welcome. Thanks for the comment. Even though you were “forced” into it, have fun with it!
Thank you very much, the templates are very useful indeed. I find it fun to edit each little picture as well, giving them each a shadow.
I do not have photoshop, and would really like not to have to download it. If anyone at all can do just one picture for me, I will be eternally grateful
Hi, Preston. Thanks for stopping by. If you’re interested in getting the effect but don’t have access to Photoshop, I’d suggest checking out the options that I included in the section “Help! I don’t know Photoshop!” These services may not give you the same degree of control as Photoshopping your own image, but I think they can provide you with the effect that you’re looking for, without having to ask for favors
I’m a novice with the web/Facebook so I hope my questions aren’t too stupid
I would like to have control of the five pictures in the banner that sit below the personal info lines and I don’t know how to control it. (this is my biggest beef with the new profile page)
I downloaded an app a couple of days ago that had several pre-made banner photo’s (nature, movies, cartoons, etc) but for some reason the two banners I downloaded are gone now, as is the app from my Facebook?
What I’d really like to do is have 5 pictures of my favorite art pieces to go across the banner (ala gallery style).
Is the only way to do it is to either tag the photos as me (I have an art album on FB already) or download the pictures into my profile album? Which is not preferable because the problem with downloading into my profile is that it changes your profile each time a photo is uploaded and then of course all that minutiae gets recorded onto your friends live feed. When all I want to do is have a cool looking banner that isn’t a hodge podge of random disconnected photos.
Thanks in advance for any help you can give me.
The banner of thumbnail images is designed by Facebook to represent the 5 most recent images that you have been tagged in. Because of that, you need to tag yourself in order for them to show up. There’s really no way around that. You don’t need to upload them to your profile pic, and if you already have them in an art album all you need to do is tag yourself. If there are other pictures that you’ve been tagged in more recently, all you need to do is go to your profile, hover your mouse over the pic that you want to get rid of, and click the little “x” that pops up. That will get rid of the pic from your profile gallery, but it won’t remove the tag…which is most likely what you want.
wait ..what are the “slices”???
The Slice tool is accessible in Photoshop through the Crop icon (at least…in CS5 it is). Click and hold the crop tool, and you will see it. When you choose it in one of my templates, you will see the slices pop up. Basically, the slices allow to you save multiple chunks of your image as unique images. By following the directions that I provided above, you will end up with multiple images that you can upload to Facebook. Without using slices, you would have to crop your document down to each thumbnail size, save the graphic (but not the file), undo your crop, crop the next image, etc… It’s tedious work without slices. Hope this helps!
The photoshop files are perfect! You should think about making a buck or two off of them. You saved me about 20-30 mins of time. anyways… for some reason since fb has slid this out to “pages” as well it does not keep the photos in the same order. It seems to move them around on every refresh. this could just have “broke” this so called hack”. Anyone else notice this?
Sorry to take so long to respond, but, yes, you’re right that the pictures get randomized on pages. Too bad…could have given us the ability to brand our business pages much easier.
Does anyone know if this will work with fan pages? We just switched our fan page to the new format, but the photo bar seems to randomize the images each time you load the page.
Since I’m posting from my phone I don’t have link but Inside Facebook has a post about this. Basically Facebook doesn’t approve of this “hack” and has randomizing the photos to prevent it from being used.
it seems like in fan pages facebook randomize it – while on profile pages they don’t (Yet!)
That’s correct. I hope they don’t start to on regular pages, but, you’re right…if they don’t like it, it won’t be too hard for them.
Esther is correct. The pictures get randomized on pages.
I also found that when trying to implement this practice on a newly-upgraded fan page, the photo strip images are randomized. I confirmed that all the images were sized and tagged correctly and confirmed this. Guess our only option is to use fbml.
Justin- how can we use fbml to customize the photo bar? is that an option?
Hi Phil. I don’t believe that it is an option. I’m quite confident that FBML can only be employed in other ways (on external sites, and that sort of thing). Facebook defines how the pictures get displayed to the general public. To allow anything else would open the door for another MySpace…and nobody wants that.
Hi Justin. Yes, you’re right that the photos get randomized on Facebook pages. Sadly, there is no way (unless I misunderstand what you’re talking about) to use FBML to change this. I’m pretty sure that you’re at the mercy of Zuckerberg as to how the images get displayed on pages.
This is my hack:
http://www.robertoiacono.it/wp-content/uploads/2011/04/roberto-iacono-hack-facebook-profile.jpg
Very cool. Thanks for sharing!
I keep getting little black lines on the edges of my slices, why is this?
Are the lines in your original image file, or only after you upload them to Facebook?
thanks thanks thanks!!!!!!!!!!!!!!!!!!!!!
Well, you’re just welcome welcome welcome!!!!!!
Right now the to links you gave us – are not working (
Profile Pane
&
Your New Profile
) when will it work so we can log in?
Best regards
Hi @52d152e96278f328c21e86f1b07fc40c:disqus . I actually can’t find any links that aren’t working. The links to the Profile Pane and Your New Profile services work fine from my end. I’d like to help, but don’t see a problem. Sorry.
When Iam trying it says: “Sorry! Logging in is currently disabled due to some pending changes. Please try again later!” and the other program website log in ” and Profil Panel “An error occurred. Please try again later.” Thats when Iam trying to log on Facebook by the 2 links/websites..
Can you help me now dude.. Iam tryed to change the settings about Http:// on my FB.
@52d152e96278f328c21e86f1b07fc40c:disqus , Okay, I understand what you’re saying now. Sorry, but I still can’t help you. I only link to those outside providers as a reference to people that can’t or don’t know how to use my Photoshop templates. I don’t have anything to do with those other pages. If you’re having a problem with my templates that I offer for free download, then I can help you there, but not with these other websites. Sorry. I hope you get it working for yourself.
Thanks for the quick reply. The problem is that I do not have Photoshop and would very much like to have done this trick on my profile and my company profile. I would be incredibly happy if you somehow could help? Best regards Henrik (Henry) Denmark
@52d152e96278f328c21e86f1b07fc40c:disqus , Unfortunately, this hack doesn’t work on Business pages (I need to write a post on that…) Facebook randomizes the image thumbnails on the top of business pages, so you can’t anticipate which will be first, second, etc. Unless the images formed a pattern, where it didn’t matter what order they displayed in, you would be out of luck.
You can, however, do it with your personal profile…which is what this post is about. If you upload the image that you’re trying to hack, I’ll try to break it up for you and get you the images. If I don’t get to it quickly, maybe someone else out there will beat me to it.
Hello again Luke. You are quick to answer my questions. Arrhg so it is not possible at company sites.. Also thought it was “mixing” all the time I have a link here to the image I want to split my profile:http://img852.imageshack.us/img852/6433/dsc04643b.jpgTHANKS to whoever would be first
**** Link – You need to del the “THANKS” in the end for it.. Sorry!
(To get the pic in full size)
Hi @52d152e96278f328c21e86f1b07fc40c:disqus . I need to know how many rows of information you have at the top of your Facebook Profile page. This is the section at the very top of your Profile, where it tells people where you went to school, relationship status, etc. Most people have 2 or 3 rows. How much you have makes a difference because it’s that content that will push the thumbnails down the page, and they won’t line up properly if I don’t know how much content is there.
Also, this picture is going to be pretty hard to manipulate because your arm is toward the bottom of the image instead of the top. If you look at the examples that I used in my post, you’ll see that my daughter’s arm is at the top of the image (near her head), which is why the image works in that case. In your picture, your arm is toward the bottom of the image, which will make it…tricky. Your profile picture will have to be small, and the rope won’t really be in the images at all. Does that make sense?
Thanks for the quick reply. I took 3 pictures of myself where it should make for better. I think everybody is very good, but if possible it would be cool with the rope (link 3). Besides, I took a picture of my FB profile so you can see the top of it (how I see it myself)Link 1. http://imageshack.us/f/269/dsc04679a.jpg/Link 2. http://imageshack.us/f/577/dsc04676a.jpg/Link 3. http://imageshack.us/f/222/dsc04493a.jpg/Link 4 (F.B). http://imageshack.us/f/685/fblook.jpg/
http://imageshack.us/f/269/dsc04679a.jpg/
http://imageshack.us/f/577/dsc04676a.jpg/
http://imageshack.us/f/222/dsc04493a.jpg/
Hi, Luke! I’m using Photoshop 7. After saving it for web, I don’t have slices 4,6,8,10. What I have are 1,2,3,5,7,9,11,13,14 all the way to 33. Should the ones you mentioned be those containing the photo slices?
Hi!
It doesn’t seem to work on my page … Facebook keeps displaying the images in a random order.
I started tagging the last one first.
Somebody got a similar problem (and solved it) ?
Hi, Ulrik. Are you talking about a Page (like a business Page) or a profile? Facebook business Pages randomize the order, but (to my knowledge) personal profiles do not.
What Ulrik said. No matter how I tag, sort, name files, etc, they appear at random.
Hi, Espen. Same question to you as to Ulrik. Are you trying to do this on a business Page or a personal profile?
awesum sharing man.. i appreciated
I love the idea, but your template is off!
Hi, thans. Do you have more than 3 rows of personal info at the top of your Facebook profile? It looks like you might have 4, which would throw it off, since I only made templates that would accommodate up to 3 rows. Either that, or Facebook has changed the line-height or margins at the top of profile pages.
Heres an easy step by step way of doing it…http://www.almostsavvy.com/2011/01/13/how-to-easily-hack-your-facebook-profile-photo/
Well, I was kinda hoping that mine was an easy, step-by-step way…