“Hack” Your Facebook Profile Picture

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:

  1. Upload your new profile picture
  2. Upload each of the thumbnail pictures
  3. Tag yourself in the thumbnail image that will be the farthest to the right when you’re done
  4. Tag the next farthest right, then the next, until you have all 5 thumbnail images tagged
  5. 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 1 row of personal info.
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:

  1. Download the template file (above)
  2. Open it in Photoshop
  3. Make a new layer beneath the layer called “put pic under this layer”
  4. Place your desired image on this layer
  5. Choose “Save for Web”
  6. Holding the Shift key, highlight slices 1, 4, 6, 8, 10, and 12.
  7. Click “Save” (thanks @Flomaster for pointing this out)
  8. From the Slices dropdown at the bottom, choose “Selected Slices”
  9. 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.

Related posts

Tags: ,

About Luke

My name is Luke, and I'm the Online Media Manager for a technology company, photographer, husband, and father. You can see a snapshot of some of my work at LukeCoburn.com. I cheer for the Red Sox and am completely in love with my wife and four little princesses.

62 Responses to ““Hack” Your Facebook Profile Picture”

  1. Frontville001 December 23, 2010 at 9:19 pm #

    wow this is awsome!

  2. Darryl Tieng December 27, 2010 at 6:14 pm #

    Tried a photo frame concept:

    http://www.flickr.com/photos/darryltieng/5296892597/

    • Luke December 28, 2010 at 2:28 pm #

      Cool. Thanks for sharing.

  3. paul December 28, 2010 at 11:56 pm #

    I used the template and there was a 15px shift upwards on the profile picture, other than that, it worked great.

    • Luke December 30, 2010 at 4:05 am #

      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.

  4. Steve December 29, 2010 at 5:28 am #

    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

    • timea March 5, 2011 at 5:12 pm #

      szep

  5. jnew December 30, 2010 at 4:44 pm #

    links to templates aren’t working

    • Luke December 30, 2010 at 5:16 pm #

      So sorry. It’s fixed now.

  6. Flomaster December 31, 2010 at 12:13 am #

    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

    • Flomaster December 31, 2010 at 12:25 am #

      step 6.5 click save
      then you can click the dropdown box and “selected slices’

      • Luke December 31, 2010 at 4:27 pm #

        Thanks for pointing this out. It’s confusing when people like me skip steps. I’ve revised the instructions.

  7. Lori Carey January 14, 2011 at 2:45 pm #

    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.

    • Luke January 14, 2011 at 4:02 pm #

      Hey, you’re very welcome. Thanks for the comment. Even though you were “forced” into it, have fun with it!

  8. William January 18, 2011 at 1:18 pm #

    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.

  9. Preston January 19, 2011 at 5:05 am #

    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

    • Luke January 19, 2011 at 1:34 pm #

      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 :)

  10. Sheryl7962 January 21, 2011 at 8:38 am #

    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.

    • Luke January 25, 2011 at 1:37 pm #

      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.

  11. McrLuva4evaa January 23, 2011 at 10:09 pm #

    wait ..what are the “slices”???

    • Luke January 25, 2011 at 1:34 pm #

      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!

  12. philmiller February 11, 2011 at 2:55 am #

    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?

    • Luke April 21, 2011 at 7:56 pm #

      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.

  13. -cj- February 13, 2011 at 6:15 am #

    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.

    • philmiller February 13, 2011 at 2:48 pm #

      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.

    • Esther Max February 23, 2011 at 1:03 pm #

      it seems like in fan pages facebook randomize it – while on profile pages they don’t (Yet!)

      • Luke April 21, 2011 at 7:55 pm #

        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.

    • Luke April 21, 2011 at 7:53 pm #

      Esther is correct. The pictures get randomized on pages.

  14. Justin Fisk February 24, 2011 at 4:27 pm #

    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.

    • philmiller February 24, 2011 at 4:42 pm #

      Justin- how can we use fbml to customize the photo bar? is that an option?

      • Luke April 21, 2011 at 7:52 pm #

        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.

    • Luke April 21, 2011 at 7:50 pm #

      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.

    • Luke April 21, 2011 at 7:48 pm #

      Very cool. Thanks for sharing!

  15. Yournextofkin April 25, 2011 at 4:54 pm #

    I keep getting little black lines on the edges of my slices, why is this?

    • Luke April 26, 2011 at 8:13 pm #

      Are the lines in your original image file, or only after you upload them to Facebook?

  16. Julian Nuñez May 5, 2011 at 11:37 pm #

    thanks thanks thanks!!!!!!!!!!!!!!!!!!!!!

    • Luke Coburn May 6, 2011 at 1:12 am #

      Well, you’re just welcome welcome welcome!!!!!!

  17. Henrik May 8, 2011 at 7:24 pm #

    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

    • Luke Coburn May 9, 2011 at 2:06 am #

      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.

      • Henrik May 9, 2011 at 4:08 am #

        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.

        • Luke Coburn May 9, 2011 at 11:41 am #

          @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.

          • Henrik May 9, 2011 at 1:40 pm #

            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

          • Luke Coburn May 9, 2011 at 2:01 pm #

            @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.

          • Henrik May 9, 2011 at 4:24 pm #

            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

          • Henrik May 9, 2011 at 4:27 pm #

            **** Link – You need to del the “THANKS” in the end for it.. Sorry!

            (To get the pic in full size)

          • Luke Coburn May 10, 2011 at 12:07 am #

            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?

          • Henrik May 10, 2011 at 1:44 pm #

            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/

  18. Jon May 11, 2011 at 6:44 pm #

    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?

  19. Ulrik May 17, 2011 at 10:26 am #

    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) ?

    • Luke Coburn May 27, 2011 at 3:25 am #

      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.

  20. Espen Irgens May 19, 2011 at 6:25 pm #

     What Ulrik said. No matter how I tag, sort, name files, etc, they appear at random.

    • Luke Coburn May 27, 2011 at 3:25 am #

      Hi, Espen.  Same question to you as to Ulrik.  Are you trying to do this on a business Page or a personal profile?

  21. sid May 30, 2011 at 3:30 pm #

    awesum sharing man.. i appreciated

  22. thans June 11, 2011 at 9:52 pm #

    I love the idea, but your template is off!

    • Luke Coburn June 13, 2011 at 11:59 am #

      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.

  23. Molly June 15, 2011 at 6:25 am #

    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/  

  24. LukeCoburn July 25, 2011 at 2:29 pm #

    Well, I was kinda hoping that mine was an easy, step-by-step way…

Trackbacks/Pingbacks

  1. Facebook pages to change automatically tomorrow « Microformats & the semanantic web - March 9, 2011

    [...] along the top of the page. Whilst this gives more opportunity for creativity commenter’s on this blog  are reporting that Facebook don’t like this customisation, so photos automatically rotate [...]

  2. Commenting Systems: Why Every Blog Should Have (A Better) One | FatWalr.us - April 30, 2011

    [...] comments right below the comment that they left. You can see an example of this happening in my most popular blog post. If you see a comment that you want to reply to, there will be a reply link right beneath the [...]

  3. Comment personnaliser un profil Facebook | WinAstuce - May 4, 2011

    [...] Profilepane – FBcrop – PicScatterA découvrir également, un hack intéressant à cette adresse. /**/ /**/ Articles similairesExporter et Importer vos préférences Photoshop CS4/CS5Réparer [...]