Contact Us
  • Suggest a Facebook Page that Best Takes Advantage of the New Layout, and Win Enchantment!

    NOTE: My article is finished, but please feel free to submit your fine work here for awhile.

    Submit a Page — and it doesn’t have to be yours — that best takes advantage of Facebook’s new Page layout and win a signed copy Guy Kawasaki’s excellent new book Enchantment.

    Facebook’s new Page layout allows for a much more complete branding experience, giving over most of the masthead, left column and main content area to brands to make it their own. I think it’s a vast improvement over the previous layout.

    I am going to be writing a blog post discussing the design and branding possibilities that have opened up with the introduction of Facebook’s new Fan Page layouts, and I will feature several Pages that best take advantage of the new layout and features.

    I am seeking submissions of Pages — and they don’t have to be your own — that best exhibit creative use of the following:

    • The Profile Picture
      Does the Profile Picture connect well to the Photostrip and the other tabs? Is it well designed? If it contains messaging, is this utilized attractively and effectively?
    • The Photostrip
      Do the 5 pictures work together to enhance the branding? Does the Photostrip take advantage of the enforced randomness? Do other elements on the Page work with the Photostrip?
    • The left-column tabs
      Is the navigation clear, well organized and uncluttered? Do the icons for the tabs extend the branding? Are the tab names clear and concise? Are there any of the rather funky Static FBML icons ?
    • Overall layouts
      Is the design, content and layout of any custom iFrame tabs done at a high level, clearly conveying the Page’s message and connecting well with the other designed elements?

    Ideally, the submitted Pages will utilize all of the above components to create overall branding & messaging excellence.

    If I may toot our own horn here, the HyperArts Fan Page does a good job of unifying the above-listed branding elements.


    Just post your Page submissions in the comments section below. Cheers!

    Comments

    1. Hi guys. Sounds like “tooting one’s own horn” is allowed today… so here’s my toot:

      http://www.facebook.com/peregrinoinsurance

      James is a client of mine, and an all around great guy with 600+ fans. (Shameless plug: if you need an insurance quote…) 🙂

      The https bug was a tough one to work around, but with a little help from my friends… we got it done.

      I could not have accomplished this without Tim and Bill’s help here at Hyperarts… so I guess that’s another “toot” for Hyperarts.

    2. I`ll continue the horn tooting theme..

      http://www.facebook.com/craftlinks

    3. Thanks for the opportunity to “toot one’s own horn” ~ I shall do the same by showing off my pretty Page using a range of available Apps. I’m just disappointed the photostrip displays randomly on Pages whereas it’s static on Profiles.

      http://www.facebook.com/InterimBusinessSolutions

      We offer virtual administration and social media support services, so social media has been the perfect networking platform for us to make valuable connections with business owners playing in the virtual space!

    4. On a completely side note, why is that your letter images stick in the top image bar on facebook?
      I was under the impression that if it rotates per page view

    5. I want to suggest 3 Lions Media page as one that fits these qualifications. First, the profile banner and “welcome” tab were created to appear as one, cohesive design. Unlike many pages, there is no confusion over where the focal point lies. The design concept was well thought-out. Second, the tabbed page uses a Flash element and a javascript image slider. The URL is http://www.facebook.com/3lionsmedia.

      A second page I want to recommend is http://www.facebook.com/soshables. Rob Henry (I believe that’s his name) is a Facebook page designer who creates mini-sites within the confines one a single tab. Not only that, his designs are excellent, some of the best I’ve ever seen. He uses a number of functions to create compelling pages.

      • Great stuff, Paul. I’d sure like to see more creativity going into the Photostrip and how it interacts with the other tabs’ branding.

        And stripped-down, unified navigation in the left column.

        But these certainly demonstrate fine design!

        • Timewire – Lionel Rainey here (CEO at 3Lions). We are actively working on showcasing a cleaner integration of different interior pages showcased on the left column. This was version 1.0 iframe for Facebook for us. V2 will be so much better. Thank you for the kind words!

      • Hi Paul,

        I’d rather not address you publicly with my question. How can I contact you?

        Thanks,
        Suzie

    6. That is devilishy clever 🙂

    7. Hey all, hope it’s not too late to ask an iframe question – the comments on the previous post seem to be closed.

      I’ve built a series of iframes for a client holding a contest. Facebook users can post their entries on the wall (a pic and a bio). I was hoping to set up a “Contest Voting” tab, where visitors can view pictures of all the contestants and, by clicking on their pictures, go to their specific entry posts and “like” them accordingly. (The contestant with the most likes wins.)

      Unfortunately, it seems that Facebook will always open non-Facebook URLs in a new window and Facebook URLs in the iframe, which results in a rather ugly Facebook-page-inside-an-iframe setup. Ideally, I would like each contestant’s page to open in a new window.

      To check out the problem, go here http://www.facebook.com/ELYSEEWATCHES?sk=app_207635129250676 and click on the contestant’s pic or name.

      I’ve tried using various targets (_blank, etc.) and substituting the real URL for bit.ly & tinyurl redirects, but nothing has worked.

      Any ideas?

    8. I love the landing page.

      If you haven’t already done so, is there any chance of doing a guide on how to achieve something similar, especially now that Static FBML is on the way out. The addition of tabs in the landing page is very stylish and I’d love know how you achieved the look of the feeds. In particular the addition of a scroll bar

    9. Analisa,

      We put together a pretty cool and useful theme for our Facebook page. The idea was to inform visitors about what we do at Room 214 and provide the means for them to get in touch with us.

      http://www.facebook.com/Room214

      We also have custom tabs that add a lot of personality to our page:

      Welcome – http://www.facebook.com/Room214?sk=app_124079800985414
      Media – http://www.facebook.com/Room214?sk=app_175324129159948
      Team- http://www.facebook.com/Room214?sk=app_115785675155039

      Thank you for reaching out to us!

      Brandon Whalen

      • Thanks for submitting! I have always been a fan of your design style and effective use of Facebook.

    10. This is a landing page we’ve designed for a new campaign we are starting called, Go Social in 2011. And we’ve taken advantage of the new updates for Facebook pages and introduced a few features. Have a look: http://on.fb.me/AliveNow-GoSocialin2011

      Comments and feedback welcome!

    11. This is the SBB’s Supersaver Tickets Facebook Page:
      http://www.facebook.com/supersavers

      Components:
      – 180x180px profile pic (also suitable for the wall)
      – 6 page tabs (above the fold) – ordered
      – individual page tab icons (iframes instead of fbml)
      – photo strip: 5 branding images (random order is no problem)
      – tab “Switzerland” shows an animated calendar (iframed flash file)

      Following improvements are planned:
      – Revision of the welcome page (design and a better CTA)
      – Optimal use of the info tab (more accurate data)

    12. Hi there. Loads of great pages. Thanks for sharing. I wonder if somebody knows a good FB solution for creating chains of cooperation between people. I´m currently working on a solution where we want to create some form of Facebookbased message board where people can find each other and exchange services.

      Thanks in advance

    13. I gotta say, my design team and I have figured out this new layout quite well:

      http://www.facebook.com/builddotcom

      Note the CTA in the profile image, the use of TOp images to entice clicks + provide additional info as well as a tracked link in the descriptions, as well as the many tabs that each have a unique favicon to entice clicks.

      not to mention our great reveal tabs… with this (and some Facebook ads) we have continued to grow our fanbase at a rate of 700-1000 likes a day!

      • Hi Mario, I think the custom tabs are really well done, and I like the uniformity of your left nav with unifying icons.

        One thing I wonder about is the Profile Pic. It appears to use the entire 520px allowed height, but after the logo part, those tiny photos don’t seem to convey much and they push your nav south.

        But I’m now doing another “perfect fan page” post and will use your navigation as an example of doing the nav right.

    14. Hello there!

      I’m marketing director at an agency called 1000heads. We help manage Nokia’s global community of fans and as such, keep an eye on their Facebook page too.

      Take a look and see how we’re rolling out things there –
      http://www.1000heads.com/2011/03/rewarding-engagement/

      [hope it’s of interest!]

      🙂

      • I really like what you did with the Nokia fan page and scrambled URL on the Nokia fan page … pretty much what I was thinking when decided to tweak folks’ interest with the scrambling of the HyperArts spelling. A happy accident, as I didn’t know they’d get reshuffled on each page load! But I thought, What the heck! On our Welcome page (RE HyperArts) I created a static image that presents a “fake” Photostrip with the correct spelling. This, of course, has caused loads of confusion 🙂

        I’ve written an article on the new layout branding for the Social Media Examiner which will come out shortly, and I’ll try to work in your page as an example of rolling with the randomness.

        Thanks for passing this along, James. I enjoyed your blog post, as well.

        • Thanks for the response Tim, I look forward to reading your SME post/

          PS. Glad you liked our work 🙂

          • Hey James, You may have noticed I didn’t use your scrambled Nokia URL on the SME post, just ran outta room.

            However, I writing a similar article for another very popular blog and was going to use the Nokia Photostrip as a cool example of rolling with randomness, BUT IT CHANGED!

            Oh well, timing is everything. Cheers….

      • HI James,

        Would love to talk to you more about what you do.

        Suzie

        • Hi Suzie,

          You can contact either on Twitter – @whatleydude [or @1000heads]
          Or via email – firstnames dot lastname at 1000heads dot com

          Looking forward to hearing from you.

          James

    15. James… That is one of the coolest ideas I’ve seen yet on how to leverage the five random pics. Mega kudos. Brilliant.

    16. My page is at http://www.facebook.com/celebrationcinema.

      Note that the top 5 images have additional data cut out of the frame that’s only visible if you click through. The bit.ly stats for the links in captions show that about 20 people per day click on the “Discounts & Deals” image, which suggests you can have effective CTAs in profile images.

      The profile picture tries to use whitespace to its advantage. The big rounded icon looks nice at “news feed” size.

      The rest of the tabs aren’t well branded yet. We currently use a Google contact form embedded in FBML to collect contest registrations that are within Facebook’s promo guidelines and without using an app. We’re working on embedding a Wufoo contact form and like button within an iFrame to be able to do much more with contest entries too.

      • Nice Photostrip. I’m going to use it for a new post on a very popular blog, as an example of effective Photostripping 🙂

        Now you guys just gotta get that navigation cleaned up!

    17. well i like this one… it´s simple but does it´s work… http://www.fb.com/Maya.Hakvoort

      greets Marc

    18. This is one for a local organisation just setup in last 7 days. Decided to use facebook in place of web site initially to see how it performs:-
      http://www.facebook.com/BonnieBoness

    19. I’ve barely even got to the toe dipping stage on facebook pages but I really like the photostrip used here – first fb page to make me smile: http://www.facebook.com/LikeableMedia

      • I love their Photostrip. But their navigation is really cluttered, with Events there although there aren’t any events, and an app tab with no icon, and a funky old Static FBML icon.

        But the Photostrip is definitely going into my next post!

    20. Dang! Spent too much time converting my FBML tabs to iframes! Oh well, here’s Fourth Cup’s Facebook page … http://www.facebook.com/pages/Fourth-Cup-Print-and-Web-Design/147775538614769 Hope everyone enjoys the “Brain Challenge”

      • Nice integration of Profile Pic and Photostrip, Jason!

        Now you just gotta slap some custom icons on those apps in the left navigation which is a snap.

    21. Hi Ashish- go to your app, then Edit Settings, then Facebook Integration, then in the Canvas Section, make sure you have both fields completed with the secure and non secure urls.

      For example:
      Canvas URL: http://yourdomain/fb/appfolder/ and
      Secure Canvas URL: http://yourdomain/fb/appfolder/

      Then scroll down and look for the section, Page Tabs, and make sure you have both fields completed with the secure and non secure urls.

      For example:
      Tab URL: http://yourdomain/fb/appfolder/content/index.php
      Secure Tab URL: https://yourdomain/fb/appfolder/index.php

      The reason I made a sub folder for the Tab URLs is so that the actual app content pulled from that folder, while the Canvas URL pulls from a the main folder. That way I can have a separate “Install Instructions” page for the app if I want.

      All of these instructions presuppose that you have a valid SSL certificate on that domain. Without that… you won’t get anywhere. But (shameless plug disclaimer)… you could always avoid all of this hassle and use TabPress. 🙂

      Let me know if this helps or if you need more assistance.

    22. Hi i posted one of the page i am working on here …

      http://www.facebook.com/matthewvankanmusic?sk=app_185264771510928

      My question is…..

      how do i get the images on my wall tab to stay put?
      it seems everytime i refresh the page, they move around…

      HERE IS EXAMPLE
      http://www.facebook.com/matthewvankanmusic?sk=wall

    23. I just wanted to share the latest page I completed. I hope you enjoy. Thanks for all the inspiration and tips.

      http://www.facebook.com/pages/The-Cheeta-Project/122173587848041

    24. Just thought I would add to the list. We just got done with it. Tried to take in all of the information from the great sites above. This is the first time we have tired to do all of these things so it’s not as special as the ones above, but I think it turn out good. Hope you like it!

      http://www.facebook.com/pages/HalloweenAndCostumescom/125313543327

    25. Very cool FB page with slide out menu from the side of page

      i left the scroll, for a nice effect with the background image

      http://www.facebook.com/pages/Web-Robot/111212292291833?sk=app_209832429030600

      • I love the slick slide-out techniques. One thing you should consider is the legibility of the text over the busy graphic. All your text content is pretty much unreadable. Unless that’s your intent, you should address that. Also, it appears that the little MP3 player (?) box is cut off on the right side.