Contact Us
  • The Perfect Facebook Fan Page: Optimizing the Photostrip

    If you’re NOT on the HyperArts Blog, Click Here!

    Manchester Library

    I have posted several articles (TechipediaSocial Media Examiner) on how to approach design for your Facebook fan page and take full advantage of design opportunites.

    In this series — The Perfect Fan Page — we will write detailed articles on various aspects of Fan Page creation.

    All you Need to Know About the Facebook Fan Page Photostrip

    This article will tell you all you need to know about the Photostrip — the row of 5 small images to the right of your Profile Picture — with lots of great examples, strategies, and downloadable templates….

    Facebook Profile Photostrip: Essential Info

    The key things you need to know about the Profile Photostrip are:

    • If you do nothing to control your Photostrip, Facebook will display thumbnails of the five most recent images uploaded by page admins (not fans);
    • You can’t control the order in which the 5 Photostrip images appear; they are displayed in random order on each page load. However, the order can be controlled on Personal Profiles;
    • You can control which images appear in your Photostrip and make it an integral part of your page’s visual branding and messaging. Any image a page admin uploads will automatically appear in the Photostrip; images added by fans won’t be added to your Photostrip;
    • To remove an unwanted image from the Photostrip: To “hide” from the Photostrip an image you don’t want included, refresh the page after you upload the image, then delete it by mousing over the image and clicking on the small “x” that appears in the top right corner of the image.
    • To unhide an image you hid from the Photostrip: 1) Click “Edit Page” button at top right; 2) Click “Profile Picture” in left column; 3) Under your profile picture, you’ll see “Row of photos at top of profile: [Unhide All]” – Click “Unhide All” button to unhide all hidden photos. Unfortunately, you can’t hide individual images;
    • You can omit the Photostrip entirely by hiding all uploaded images;
    • You can upload images of any size dimension but, if they are not already 97w x 68h pixels (aspect ratio: 1.43:1 – width/height), a section of the uploaded image will be sampled at the same aspect ratio and reduced to 97 x 68 for the Photostrip display;
    • Images of the same dimensions will have the same area sampled for the thumbnail. This allows for some expanded uses of the Photostrip, as described below.

    Consider the visual branding of your fan page — Control your Photostrip images!

    The Photostrip is a key part of your page’s visual branding, extending to the right of your page’s profile picture and, ideally, extending the visual theme.

    Use your Photostrip to extend your fan page branding AND convey information about your brand.

    Target, the retailer, keeps it simple to reinforce their brand, with a nice “tiling” image in the Photostrip. (They also have a nice “Like this Page” graphic on their Welcome tab.)
    Target Fan Page

    Whereas it appears that Wildfire does nothing to control the Photostrip images, resulting in a Photostrip that neither conveys information nor provides visual branding, or appeal:
    Wildfire Fan Page

    Whether you use your Photostrip to extend your profile picture concept, show products, display text messaging, or display other imagery that relates to your brand, make sure you think about branding when developing your strip!

    Focus on Visual Branding — Going with Thumbnails Only

    Some pages use their Photostrip to simply extend the visual branding and messaging by uploading the 5 images sized at 97 x 68 pixels, the exact size of the displayed thumbnails.

    The fan page for Steve Madden Fashion Design creates a great visual effect, with a limited color palette:
    Steve Madden Fan Page

    The Olay fan page has a simple, elegant Photostrip:
    Olay Fan Page

    The Bounce fan page has a playful and colorful Photostrip:
    Bounce Fan Page

    Crockpot Divas, a page for sharing crockpot recipes, utilizes colorful iconic cooking images:
    Crockpot Divas Fan Page

    Eve Milano presents social icons with visual flare:
    Eve Milano Fan Page
    The Lysol fan page is surprisingly arty and stylish!
    Lysol Fan Page

    The Cairns & Great Barrier Reef Photostrip integrates nicely with the profile picture and is evocative and beautiful:
    Cairns & Great Barrier Reef Fan Page

    Drip Media does a great job of integrating the profile picture and the Photostrip:
    Drip Media Fan Page

    JetBlue Airways goes full-on graphical/arty, to eye-pleasing effect!
    JetBlue Airways Fan Page

    3MultiMedia.com, a Huntington Beach Web shop, came up with a fun way to promote their services:
    3MultiMedia
    SmartyPig, the “free online piggy bank,” utilizes cartoonish images of things people might use their piggy bank to save for….
    SmartyPig Fan Page

    The Box Tops for Education utilizes simple messaging and colorful file-folder icons to convey their mission:
    Box Tops for Education Fan Page

    The Kiwi Shoe Care uses great icons and a very limited color palette to brand their page with — what else? — kiwis!
    Kiwi Fan Page

    Panda Express, purveyor of “gourmet Chinese food”:
    Panda Express Fan Page

    All the above examples use the Photostrip on one level — visual and/or messaging. Clicking on the images just displays the same small image with no additional information.

    Using larger images for the Photostrip — and the Comment Box for captioning

    As mentioned above, if you upload an image larger than 97x68px, it will be sampled and the sample resized to 97x68px. Larger images of the same dimension will have the same area of the image sampled.

    Secret simply provides nice juicy enlargements of their product images in the Photostrip. (And their “Express Your Scent” tab is pretty cool!):
    Secret Fan Page

    Tofurious, a marketing guy, utilizes simple and intriguing iconography to pique interest. The images simply enlarge on clicking. (His Welcome tab also has a pretty clever “Like this Page” graphic.) He then uses the Comments box to expand on the graphic.
    Tofurious Fan Page

    McDonalds also provides an enlarged version of the Photostrip thumbnail, but they also use the Comments Box to provide additional information — a link to their website:
    McDonalds Fan Page

    Kraft Macaroni & Cheese promotes their various product offerings with catchy graphics that enlarge, with additional information, including bit.ly links for tracking, in the Comments:
    Kraft Fan Page

    Hike Social Apps also provides enlarged images and extra information in the Comments box:
    Hike Fan Page

    DePauw University Class of 2016 uses college-related photos and messaging, with enlargements that include tagging in the Comments:
    DePauw Fan Page

    Use your Photostrip images as “navigation,” with enlargements that provide more info

    Because you can upload images larger than the displayed thumbnail size, you can take advantage of this to turn each image into a navigation item that pops a larger and more informative image.

    Then use the comments to give it a caption.

    Celebration! Cinema figured out where Facebook crops a full size image for display in the Photostrip, then used the extra space to add text and other content. In the description they included bit.ly links so they could track click-throughs.

    Celebration! Cinema Photostrip

    The enlargements are 960 x 672 pixels, and include more information. Then they use the comments box to provide a trackable link:

    Celebration! Cinema Photostrip enlarge

    Hugh Briss uses his Photostrip as a “mini portfolio” where clicking on the images brings up a larger, more detailed version. He then uses the Comments to say something about each project:

    Hugh Briss Page

    Clicking on an image brings up the enlargement:

    Hugh Briss Photostrip

    Hugh has obviously made a trade-off between a clean, visually attractive Photostrip and providing valuable information. But it’s a great use of the Photostrip, in terms of providing information.

    How to control which part of your big image is cropped for your thumbnail

    As I mentioned earlier in this article, when you upload a larger image, as in the above examples, Facebook takes a section of the image that is in the 1.43:1 width-to-height ratio and reduces it to create the thumbnail.

    The good news: If all your large images are the same dimensions, then each will have the same section taken for the thumbnail. So you must:

    • Decide on the size of your larger images you use for the Photostrip, and make sure they’re all the same dimensions;
    • Upload one image to determine where Facebook will be cropping them;
    • Create the other images now that you know which area will be used for the thumbnail.

    This is most likely the technique used by Celebration! Cinema to create their nice Photostrip functionality.

    Free Photoshop PSD Photostrip Templates

    Jeremy Bronson created a nifty Photoshop PSD template, with a 724 x 509 pixel area, to use in creating large images with additional info not included in the thumbnail. Download it here. (Note: On Jeremy’s template, the visible thumbnail area can take up both the gray and white areas.)

    We at HyperArts created this Photostrip template (PSD) to help you create the individual thumbnails and profile picture, if you go the thumbnails-only route.

    What if you DON’T WANT a Photostrip at all?

    If you’d prefer not to have a Photostrip on your fan page, simply hide all the images in your Photostrip, by clicking the little “x” that appears in the upper-right corner when you mouse over the thumbnail.

    Further Resources

    Addendum! If folks submit examples I think meet my critera for excellence, I’ll add them below…

    Interim
    Interim Business Solutions

    ים בטוח: רחצה בטוחה בחוף הים (Summer Safe)
    Summer Safe

    Inhouse Advertising (Very nice enlargements on the popups!)
    InHouse Advertising

    Nature Sound Spa
    Nature Sound Spa

    Zootaru (Check out how they enlarge … nice!)
    Zootaru

    Comments

    1. How do you get an image back after you’ve hit the “x” button?  Does it have to be re-uploaded?

      First time poster.  I love reading your blog via e-mails.  Great job.

      Some of my work:http://www.facebook.com/EWCTheWoodlands
      http://www.facebook.com/EWCTheWoodlands?sk=wall

      http://www.facebook.com/massageenvythewoodlands
      http://www.facebook.com/massageenvythewoodlands?sk=wall

      • Chet: You’ll have to unhide *all* photos you’ve hidden from the Photostrip. Here’s how:
        To unhide the photos that you’ve removed from your photo strip:
        Click the Edit Profile link at the top of your profile.
        Click the Profile Picture tab.
        Find the Row of photos at top of profile section and click the Unhide All button. Selecting this button will make all of the photos that you’ve previously removed appear at the top of your profile again. Then you can remove the ones you don’t want.

        Of course, it’d be better if you could just go into the Photos area and do it photo by photo, but you can’t.

    2. You forgot to include ours too! :-) 

      http://www.facebook.com/InterimBusinessSolutions

    3. Thanks for including mine, Tim. You found a lot of very cool and creative examples so I’m honored to be among them.

    4. another fan page that I would like to suggest is: http://www.facebook.com/SuzlonPALS 
      This is Pure Air Lovers Society (PALS)

    5. We haven’t chosen but we still want to show off:

      https://www.facebook.com/summer.safe

    6. Here is one that we did  https://www.facebook.com/TondaleyaShamleyFMC  I love the use of the photostrips!  It is a great way to market to the consumer and makes the page looks so much cleaner.  (in my opinion)  Great article! 

    7. Yes, correct Rainer. A number of my examples use the Comment box to add info and links that are trackable using bit.ly.

    8. Yes, correct Rainer. A number of my examples use the Comment box to add info and links that are trackable using bit.ly.

    9. We utilized our photostrip and highlighted a small ad in each http://www.facebook.com/InHouseAdvertising

    10. Thanks for the wonderful tip. I honestly think that you guys provide some of the best and most useful information when it comes to designing facebook fan pages. We used the PSd template that you provided and created a better facebook wall. Check it out at http://www.facebook.com/NatureSoundSpa
      Once again, thanks for the wonderful advice and keep them coming.

    11. Kelsey Kreamer says:

      Thank you for finding such wonderful examples of photostrips! Is there an application that you know of that helps you build a photostrip by uploading your own image content? I would like to do this for a startup I am working with in my social media marketing class. 

      • Thanks Kelsey. There’s no app that I’m aware that does what you ask.

        But try out the HyperArts Photostrip template, downloadable from this post.
        That should help.

        Tim

    12. Kelsey Kreamer says:

      Thank you for finding such wonderful examples of photostrips! Is there an application that you know of that helps you build a photostrip by uploading your own image content? I would like to do this for a startup I am working with in my social media marketing class. 

    13. Nice work, Felicia. I added it in.

      One suggestion: The type in the Photostrip images is hard to read. You might slightly darken the part of the images the text is over.

    14. Hi,
      We are new start-up in the eCommerce area, and based out of Bangalore, India. We too have a great photos strip to highlight our product verticals. 
      Plus we got the click to enlarge.
      Do check out : http://www.facebook.com/zootaru
      Cheers

    15. Sarina del Fuego’s is interesting – she’s broken up her photostrip so it looks like ten portrait-layout photos rather than five landscape ones.  http://www.facebook.com/misssarinadelfuego

    16. Many thanks for the tutorial, the examples inspired me as well:
      https://www.facebook.com/GraceCoconut
      any suggestions? :)

    17. Thanks for the tutorial, the examples inspired me as well:
      https://www.facebook.com/GraceCoconut

      any suggestions? :)

    18. Craig Morris says:

      Hi Tim, thanks for all the great advice – I tried to incorporate all of it into this: 
      http://www.facebook.com/iamstaggered

    Speak Your Mind

    *