{"id":3551,"date":"2011-02-18T23:16:07","date_gmt":"2011-02-19T06:16:07","guid":{"rendered":"http:\/\/www.bspcn.com\/?p=3551"},"modified":"2011-02-18T23:16:07","modified_gmt":"2011-02-19T06:16:07","slug":"ultimate-guide-to-the-new-facebook-page-design","status":"publish","type":"post","link":"http:\/\/localhost\/wordpress\/2011\/02\/18\/ultimate-guide-to-the-new-facebook-page-design\/","title":{"rendered":"Ultimate Guide to the New Facebook Page Design"},"content":{"rendered":"

Written by by Mario Zelaya<\/a><\/p>\n

\"Ultimate<\/a><\/p>\n

Recently, Facebook rolled out a major overhaul of their Pages<\/a>. We studied the new design extensively to see what was new and improved. In this guide, we will go through the Facebook page changes and their impact, from a design, usability and web development perspective.<\/p>\n

Design Changes<\/h5>\n

Let\u2019s go over some of the major design changes to the new Facebook Pages.<\/p>\n

No More “Standard” Tabs<\/h6>\n

\"No<\/p>\n

The standard tabs that we\u2019re used to seeing in the top area are now gone. They\u2019re accessible on the left hand side, under the profile picture. The brand page designs and interface is now in sync with the personal user profiles where tabs are accessible under the user\u2019s profile photo.<\/p>\n

\"No<\/p>\n

Note:<\/strong> the new tabs will appear in the form of a list (there will be a maximum of 6 above the fold).<\/p>\n

New Photo Strip<\/h6>\n

\"New<\/p>\n

Like the new Facebook profiles, the new pages will have a Photo strip above the Wall (with the most recent photos you posted or tagged). When another brand or individual tags your company in a photo, that photo will appear in this section, giving your brand less control of the images shown. The downside: It\u2019s now more essential to have someone monitor your Facebook Page regularly for inappropriate photos of your brand.<\/p>\n

Profile Picture<\/h6>\n

\"Profile<\/p>\n

The maximum size for the profile picture has been reduced<\/strong> from 200x600px to 180x540px.<\/p>\n

User Interface Changes<\/h5>\n

Here are some functionality and interface changes on the new Facebook Pages.<\/p>\n

Admin View of Wall (See Hidden Posts)<\/h6>\n

<\/p>\n

Users can now select the “Admin View” option (below the profile photo) and viewHidden Posts<\/em>. In the example above, someone had spammed our wall with a magical diet post, which we then hid (we were also able to ban the user). To do this, on your own Wall, click the “X” at the top right corner of any post and select the option from the drop down that comes up.<\/p>\n

Post as Your Brand<\/h6>\n

\"Post<\/p>\n

With this new powerful feature, you can now post on other Facebook Pages using your company\u2019s Facebook Page. On the right-hand side, you\u2019ll see a link that says, Use Facebook as [your brand name]<\/em>. Click on that to start using this feature. You\u2019ll then get this modal window:<\/p>\n

\"Post<\/p>\n

Here\u2019s an example of a wall post made by the Majestic Media Facebook Page<\/a> on theSix Revisions Facebook Page Wall<\/a>:<\/p>\n

\"Post<\/p>\n

This can be beneficial in driving traffic to your Facebook Page, but be careful not to abuse this, as the other Facebook Page moderators can block your post and ban you from their wall (and we assume that if that happens enough times, your Facebook Page might be closed down by Facebook). Keep conversations meaningful!<\/p>\n

Your Brand Can “Like” Other Pages<\/h6>\n

\"Your<\/p>\n

You\u2019ll notice, in the screenshot above, that your Facebook Page can “Like” other pages.<\/p>\n

Note:<\/strong> your Likes will show up in your Facebook Page, and when you go to your home page (while logged in), your newsfeed will populate with feeds from the brands you\u2019ve Liked.<\/p>\n

Fans Count Has Changed<\/h6>\n

\"Fans<\/p>\n

If you\u2019re an admin of the Facebook Page, you\u2019ll be able to click and see the names of the people who “Like” the page. From what we can tell, it\u2019s in order from most recent “Likes”. That is to say, the first person that shows up on that list was the last person to click “Like” on your Page.<\/p>\n

The most important change that we see is that non-admin users will not be able to view the username\/profile of those who “Like” that particular brand. This functionality will only be made available to the administrators of the Page.<\/p>\n

Categories<\/h6>\n

\"Categories\"<\/p>\n

Now displayed on Facebook Pages is your organization\u2019s category (which can be adjusted). We recently changed ours from “Local Business” to “Internet\/Software”.<\/p>\n

Development Changes<\/h5>\n

Let\u2019s look at some web development\/web technology related changes to Facebook Pages.<\/p>\n

Facebook iframes Now on Tabs<\/h6>\n

From a web developer\u2019s standpoint, this is the biggest and best change Facebook has rolled out. What does this mean? No more Facebook Markup Language<\/a> (FBML)!<\/p>\n

Any Facebook app developer will tell you about the challenges of using and learning FBML. It\u2019s limited, choppy and doesn\u2019t allow you to build those fully customized Facebook applications within a Facebook Page tab.<\/p>\n

Functionality is limited in the Facebook Page tab because of FBML, which usually means anything robust will have to be developed as a full-blown Facebook application.<\/p>\n

The most recent example is the one we created for HomeSense<\/a> (that we couldn\u2019t previously do on a Page tab). During the planning phases, we were hoping to rollout this app within a Page tab, but Facebook had delayed their iframe rollout from Q4 2010 to Q1 2011, so this type of app wasn\u2019t possible within the Facebook Page. Today, it can easily be implemented thanks to the iframe rollout.<\/p>\n

To use iframes, you need the most up-to-date layout. First and foremost: in order to use iframes, the page must<\/em> be using the new Facebook Page layout. If you\u2019re an admin of a Facebook Page, you can check the status of your page<\/a>. It\u2019ll look something like this:<\/p>\n

\"Facebook<\/p>\n

Custom HTML and JavaScript<\/h6>\n

We conducted tests and found that HTML and JavaScript work flawlessly without restrictions on the iframes. More specifically, we were able to confirm that jQuery<\/a>works perfectly as well.<\/p>\n

However, we noticed some issues in the iframe display<\/strong>.<\/p>\n

The iframe window height cannot be bigger than 800px. It seems that Facebook hard-coded this value (we viewed the Facebook HTML source code). When the iframe content is longer than 800px height, scrollbars show up in the iframe.<\/p>\n

\"Custom<\/p>\n

This also causes issues on some browsers, and adds another scrollbar on the main window (see below).<\/p>\n

\"Custom<\/p>\n

Facebook API for Facebook Pages<\/h6>\n

In the initial request parameters, they send us the following data:<\/p>\n

    \n
  • page id:<\/strong> to know the source page where the tab is installed<\/li>\n
  • locale:<\/strong> to know the viewing user language so we can show Spanish only or French only content to these users, rather than creating a new tab or making a bilingual tab<\/li>\n
  • country:<\/strong> to know the viewing user\u2019s country<\/li>\n
  • Liked?:<\/strong> if the viewing user Liked the page; if not, we can show a “pre-like” conversion page encouraging them to hit the “Like” button to get access to page content<\/li>\n
  • Admin?:<\/strong> to know if the viewing user is an administrator of the Facebook Page<\/li>\n<\/ul>\n
    Saving User Sessions<\/h6>\n

    This part is important if you\u2019re running contests or creating applications that are user specific. In our initial research, we found that we can save sessions without any problems. So when the user enters the Page tab and authenticates itself, he\/she can return (in the same browsing session) again and we will not need to authenticate. This is something we couldn\u2019t do before using FBML.<\/p>\n

    Summary<\/h5>\n

    What does all this mean to you as an account manager, digital account representative, freelancer or social media expert? Likely, fewer blank stares from clients and a greater overall sense of control over their brand on Facebook.<\/p>\n

    With the changes scheduled to take full effect March 10, 2011, you should now be ready to take full advantage of the changes.<\/p>\n

    Here\u2019s the summary of changes:<\/p>\n

    \"Here's<\/p>\n

      \n
    1. Profile photo now has a max size of 180x540px.<\/li>\n
    2. Display page category.<\/li>\n
    3. Photo strip shows most recent tagged or posted photos. They are randomized. Watch out for inappropriate photos tagged with your Facebook Page. The dimensions of thumbnails are 96x67px.<\/li>\n
    4. Admin view.<\/li>\n
    5. Filter wall posts by your Facebook Page only or by everyone.<\/li>\n
    6. Tabs are now on the left (under the profile photo) in the form of a list (maximum of 6 above the fold). Also, switch to Admin View to see hidden posts.<\/li>\n
    7. If you\u2019re an admin, you can view the people who have “Liked” your brand. We noticed it\u2019s in order of most recent Likes. If you\u2019re not an admin, you can no longer view those who have “Liked” the brand page.<\/li>\n
    8. Your brand page can Like other pages. They\u2019ll show up on your brand page.<\/li>\n<\/ol>\n

      Other changes not shown in the image above:<\/p>\n

        \n
      • You can see a Newsfeed of updates from Liked Pages on your home page when using Facebook under your Facebook Page name.<\/li>\n
      • Pages now support iframed tab applications.<\/li>\n
      • Email notifications when users post or comment.<\/li>\n<\/ul>\n

        Bonus: This is what I think every time I go though airport security…<\/h3>\n

        \"\"<\/p>\n","protected":false},"excerpt":{"rendered":"

        Written by by Mario Zelaya Recently, Facebook rolled out a major overhaul of their Pages. We studied the new design extensively to see what was new and improved. In this guide, we will go through the Facebook page changes and their impact, from a design, usability and web development perspective. Design Changes Let\u2019s go over […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/posts\/3551"}],"collection":[{"href":"http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/comments?post=3551"}],"version-history":[{"count":2,"href":"http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/posts\/3551\/revisions"}],"predecessor-version":[{"id":3553,"href":"http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/posts\/3551\/revisions\/3553"}],"wp:attachment":[{"href":"http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/media?parent=3551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/categories?post=3551"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/tags?post=3551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}