Designing for New Facebook Pages

A few months ago there was so much buzz about the "new" Facebook pages - new features, new appearance, new integration, and more. One of the key features on the new pages is the ability to display external mini-websites via iframes. I remember when iframes were such a pain, the bane of HTML's existence. Now, they've come back in a friendly manner, aiding us by embedding content on social media platforms and other web 2.0 outlets.

Facebook Pages are very uniform. They have little built-in customization options, unlike the MySpace pages of the past. This is where the fresh perspective of social media designers comes in. What is social media design? It’s the process of assessing and branding your image on social media platforms. This post  is particularly about Facebook branding.

It starts with the profile image. A good page will use an image that has been designed to look integrated. Using a photograph, logo, or plain, square graphic appears flat and unenticing. Start with a basic image, try and use a transparent or white background. Add space on the top and bottom and include some specific information or a fact about your product or company. Use reflection styles on images to create a clean, 3D appearance. Check out the profile image on the Pong Research page.

pong research facebook profile image

The Facebook thumbnail banners are now on all profiles and pages. The banner thumbnails are generated by the latest photos a page uploads or is tagged in. If you don’t design thumbnails specifically for the banner, you get a bar of unattractive and jumbled, badly cropped images that no one wants to click on. To counter this – you can create five custom thumbnails at 99x68 pixels.  The banner puts these thumbnails in a random order every time the page is reloaded, so we can’t get the exact same results like Facebook profiles but, it still brings the page together. See Pong Research PAGE banner on the left, Chad D PROFILE banner on the right.  The PAGE uses individually contained images for thumbnails while the Profile can display a large image spanning multiple thumbnails. The Profile banner is nice but, remember, it is against Facebook Terms of Use to use Profiles for businesses.

pong research facebook banner facebook banner example

The third basic element in developing a Facebook page is the iframe mini website. You have to develop your own Facebook app or, install an app that provides your page with iframe functionality. I use the app “iFrames for Pages.” For Pong’s embedding mini embedded website, I used a call to action, a large main image, and repeated the images on the banner but, this time, they are clickable. When you click your phone case, it takes you directly from Facebook to Pong’s product page. With iframes in Facebook, the possibilities are endless. You can design entire stores, websites, or magazines and embed them into your Facebook Page! Make sure you keep your design under 520px wide, that’s the size of the iframes on Facebook Pages.

pong research facebook buy

After reading and checking out these Facebook Page examples, you can design for your Facebook page with confidence and knowledge.

Please tweet @Chad_BFM or @BFMweb for questions about designing for Facebook pages.

Share this post

Comment on this post


Ready to discuss your project? Work With Us
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052
  • 102 Madison Ave, 2nd Floor
  • New York, NY 10016
  • 212.260.1978