Multi-Tab Template for Facebook Timeline Page Tabs!
Our TURNKEY template has all the code and files to create a website-like Page Tab.
See it in action, and learn more....

Featured Web Design and Development Projects: Ubisoft Just Dance and Propel Contest Microsite

April 18, 2012 By Leave a Comment

Project Overview

CLIENT: Ubisoft, leading producer, publisher and distributor of interactive entertainment products.

PROJECT: Just Dance 3 and Propel Zero Just Create Dance Contest Microsite

URL: justdancegame.ubi.com/justdancepropel

TECHNOLOGY: HTML, CSS, JavaScript, jQuery, PHP, My SQL, Web Service, Facebook XFBML.

Ubisoft, creators of the Just Dance 3 video game, approached us with this project, asking us to design and develop a microsite that would host a special co-branded contest. Propel Zero engery water was their co-sponsor, so the site needed to be designed to reflect both the Just Dance 3 and Propel Zero brands.

The contest, with a grand prize of $20,000, is specifically for users of Just Create, a program on the Just Dance 3 for XBox 360 game. Players can choreograph and perform their own dances with XBox 360 Kinect technology. Once a dance is created and uploaded to the Just Create website, users are prompted to visit the microsite where they can enter the contest.
[Read more...]

Technorati Tags: , , , , , , ,

Filed Under: Web Design, Website Programming Tagged With: , , , , , , ,

New Larger Size for Facebook Timeline Profile Pictures? Buggy Rollout or Bug?

April 13, 2012 By 42 Comments
This post is no longer relevant. Facebook, as of the evening of April 26, 2012, also changed the dimensions of the Profile Picture for Brand Pages to 160 x 160px.

HOWEVER: The Profile Picture placement over the Cover Photo is DIFFERENT for Brand Pages and Personal Profiles.

Brand Page: Distance from the top of the Cover Photo to top of the Profile Picture is 210 pixels.

Personal Profile: The above distance is 193 pixels.

DOWNLOAD THIS NEW TIMELINE FOR PAGES TEMPLATE for Timeline for Pages Cover Photo / Profile Picture combination.

Apr 18, 2012: Facebook sent this message with the weekly page reports:
On April 26, we will be updating the size of the profile picture on all Pages. We are letting you know about this small change in advance so that you can update your profile picture on April 26. The new profile picture will be 160 x 160 pixels and will sit at 23 pixels from the left and 210 pixels from the top of the Page.

RESOLVED!

It appears the 160 x 160px Profile Pictures were just a temporary glitch. They are now consistently displaying at 125 x 125px. Phew!

Create a Cool Cover Photo / Profile Picture Integration for Timeline!
Detailed Tutorial & PSD Template for creating a great Cover Photo / Profile Picture integration — for Brand Pages — for Personal Profiles.

Original post….

Several days ago many started to notice that their carefully crafted Cover Photo / Profile Picture integrations were messed up.

Perhaps I’m being cynical, but this reminds me of how Facebook made the order of the Photo Strip images random on Brand Pages, in order to disrupt attempts to, um, harden them into a graphical presentation.

It’s just possible that inconsistent sizing of the Profile Picture is the same principle applied to Timeline? If the Profile Picture is displayed inconsistently, you have to make it just a “logo” and not an extension of the Cover Photo. Well, anyway…..

Here’s the Fanta Timeline Page masthead, as viewed with Firefox or Chrome on Mac 10.7.3, logged in and using Facebook as my Profile:

It is displayed at 160 x 160px, rather than the expected 125 x 125px size. Notice that the bottle section in the Profile Picture isn’t a smooth continuous extension of the Cover Photo.

Here’s the same Page viewed in Safari, where the Profile Picture is displayed at the expected 125 x 125px size:

Fanta Timeline Page - Safari Browser

Note the smooth continuity of the Cover Photo and the Profile Picture.
[Read more...]

Technorati Tags: , , ,

Filed Under: Facebook Design, Platform Updates Tagged With: , , ,

When Facebook Users Opt for Secure Browsing, What Do They See on Non-Secure Page Tabs?

April 5, 2012 By Leave a Comment

When you create a custom Page Tab for your Facebook Fan Page, you must specify both a “Page Tab URL” and a “Secure Page Tab URL” in your Application “Basic” Settings:

Facebook Application Basic Settings

Facebook announced the secure-hosting for Page Tabs requirement in October 2011.

Although we don’t know precisely how many of Facebook’s 800M+ users opt for secure browsing, I think you can safely assume it’s a very big number, likely in the tens of millions.

The “Secure Browsing” Option for Facebook

Users have the option to use Facebook under “secure browsing” where all URLs have an SSL Security Certificate and are much more secure. Page tabs index pages that aren’t hosted securely are not displayed to secure-browsing users.

The following is a breakdown of exactly what Facebook’s secure-browsing users see when viewing unsecure URLs while in Facebook.
[Read more...]

Technorati Tags: , , ,

Filed Under: Facebook Programming Tagged With: , , ,

How to Create a Facebook App for your Timeline Page Tab

April 2, 2012 By 54 Comments

In order to create a custom Page Tab for your Facebook Timeline Page, you need to first create a Facebook application. Here’s how:

Creating your Facebook App

First, go to the Facebook Developers app page. If this is the first time you’ve installed the Developer Application, you will see the Request for Permission dialog.

After the Developer App is installed, it’s time to create your Page Tab App.
[Read more...]

Technorati Tags: , , ,

Filed Under: Facebook Programming Tagged With: , , ,

Timeline Cover Photos: Are You Breaking the Rules?

March 27, 2012 By 1,067 Comments

When Facebook launched Timeline for Pages, most people were already familiar with the new layout of the Cover Photo and Profile Picture. Personal Profiles have had Timeline for months now. The new Cover Photo gives Business Pages the opportunity to display a large image at the top of their Page.

The Profile Picture is smaller and square — Facebook actually recommends that Pages use this space for their company logo:

Regarding the Profile Picture: “This represents your Page on other parts of Facebook, like in news feed. Use your logo or another image that’s associated with you.”

RELATED: How to Create a Cool Timeline Cover Photo and Profile Picture Combo for your Facebook Page | Timeline for Pages: FAQ

Oh, The Possibilities!

When Timeline for Pages launched I was excited, as a Page Admin, to think about all of the possibilities for a new Cover Photo — we now have 851 x 315 pixels to use! The possibilities seemed endless: promoting sales, featuring a fan-of-the-month, designing a collage, displaying new products, calling out custom tabs or special offers, linking to website, etc.

New Rules

However, Facebook immediately notified Page Admins that there are strict guidelines for what Pages can and cannot convey in the custom Cover Photos:

Cover images must be at least 399 pixels wide and may not contain:

  • Price or purchase information, such as “40% off” or “Download it at our website”
  • Contact information, such as web address, email, mailing address or other information intended for your Page’s About section
  • References to user interface elements, such as Like or Share, or any other Facebook site features
  • Calls to action, such as “Get it now” or “Tell your friends”

– Facebook

[Read more...]

Technorati Tags: , , , , , , , ,

Filed Under: Facebook, Facebook Design Tagged With: , , , , , , , ,

How to Create a Cool Timeline Cover Photo and Profile Picture Combo for your Facebook Page

March 14, 2012 By 74 Comments
ALERT: Apr 27 2012 Facebook has rolled out the new Profile Picture dimensions for all Brand Pages — 160 x 160 pixels.

NOTE:The top of a Page’s Profile Pic is 210px from the top of the Cover Photo. (On Personal Profiles this distance is 193px.)

THIS POST HAS BEEN UPDATED for the new Profile Picture dimensions (160 x 160px, displayed) and includes a NEW downloadable Photoshop Template, with the new Profile Picture dimensions for Brand Pages.

When Facebook rolled out Timeline for Personal Profiles last year, creatives jumped at the opportunity to make eye-catching and clever Cover Photo / Profile Picture combinations, and I featured a number of these in an article about creative Timeline designs for Personal Profiles.

Now that Facebook is in the process of rolling out Timeline for Pages, the same creative impulses can be applied to Facebook Brand/Business Page mastheads.

PLEASE NOTE: This tutorial is for Facebook Pages, NOT Personal Profiles! The alignment of the Cover Photo and Profile Picture is slightly different in Facebook Brand Pages and Personal Pages — Brand Pages: the distance from the top of the Cover Photo to the top of the Profile Pic is 210px; Personal Profiles: the distance from top of Cover Photo to top of Profile Pic is 193px.

Here’s the Cover Photo / Profile Picture integration article for Personal Profiles.

Cover Photo / Profile Picture Tutorial + Downloadable Photoshop Template

This article will show you how to create an integrated Cover Photo and Profile Picture, and I’ve added a downloadable Photoshop template to help you in this effort.

When I say “integrated” masthead design, I mean a masthead where the Cover Photo ( the big image) and the Profile Picture (the image overlaid in the lower left corner of the Cover Photo) seem of a piece, where the Profile Picture appears to be transparent:

HyperArts Fan Page Masthead

HyperArts Fan Page Masthead

Ford Motor Company Masthead

Ford Motor Company Masthead

Corona Timeline Cover Photo & Profile Picture

Corona nicely integrates the Cover Photo with the Profile Pic which also makes a good thumbnail icon

or otherwise cleverly integrated to create a unified whole:

Pragmatic Design Masthead

Pragmatic Design Masthead

[Read more...]

Technorati Tags: , ,

Filed Under: Facebook, Facebook Design Tagged With: , ,

How to Engage Your Audience with the New Facebook Timeline for Pages

March 2, 2012 By 1 Comment

“The new Pages helps businesses and organizations express their identity through features like cover photo and Page timeline.” -Facebook Pages

A whole new world: Facebook Timeline

Along with the launch of Timeline for Facebook Pages yesterday (February 29, 2012) came a whole new landscape for Page admins to navigate.

People have a lot of questions about this new layout:

  • How can I utilize new design space?
  • What will happen to custom tabs?
  • Can I still drive non-fans to fan-gated tabs?

The list goes on. Which is why Tim wrote this great Timeline for Pages FAQ post that is a must-read for all Page admins.

Timeline’s New Features — Better Fan Engagement

While the new design elements are important, and seem to be the center of attention for now, I think it’s important to also think about the new features that come along with Timeline, the ones that have more to do with fan engagement.

Facebook has rolled out several new tools that allow admins to better engage with their audience, and to customize messaging on the Wall (and we might as well start calling it Timeline).

Admins can no longer control where new visitors land when they come to their Facebook Page — the “default landing tab” option is gone. Because Timeline is the first thing that a user will see, it better be good.

Curating Your Content Spatially AND Temporally

Admins can now “pin” posts to the top of the Wall (for up to a week) in order to highlight specific content. But, in my opinion, the most important thing that has changed for Pages is the ability to curate content both spatially and temporally in the Timeline.


[Read more...]

Technorati Tags: , , , , , , , , , , , , , ,

Filed Under: Facebook, Facebook Strategies, Platform Updates Tagged With: , , , , , , , , , , , , , ,

Facebook Timeline for Pages – Frequently Asked Questions

February 29, 2012 By 86 Comments

HyperArts Timeline Page Cover Photo Masthead

BUG UPDATE: Two TIMELINE BUGS you should be aware of:

If you’re experiencing problems, you might also check:

  • Known Issues on Facebook Page
  • Known Facebook Bugs — BUG UPDATE: Two TIMELINE BUGS you should be aware of:

    If you’re experiencing problems, you might also check:

    February 29, 2012: We all woke up this morning to the news that Facebook is rolling out, as of NOW, Timeline for Facebook Pages. It was announced at the Facebook Marketing Conference.

    RELATED: How to Create a Cool Facebook Timeline Cover Photo and Profile Picture Combo
    Our tutorial shows you how to create a killer masthead design for your Facebook Page. RELATED: How to Use Timeline for Pages to Increase User Engagement
    Analisa tells you how to take advantage of great Timeline features to make your Page more compelling!

    Some brands were given a jump on this change, so that folks can see the Pages Timeline in action on the Today Show, Coca Cola and Red Bull pages. There’s some good news and bad news (but mostly good) for Page admins and marketers. First, the good news:

    • Custom tabs can be up to 810px wide inside Facebook’s container which is 850px wide, with enforced left and right margins of 20px.
    • You can create your own large thumbnail (“Custom Tab Image” or “View”) for all apps, even those you didn’t create!
    • Make a Status Update “sticky”: You can “pin” status updates to keep them at the top of your updates for up to 7 days;
    • A big juicy Cover Photo (851 x 315px) (although no advertising or promoting allowed!) PLUS your Profile Picture;
    • You can preview all your existing Pages from one location: https://www.facebook.com/pages/status/
    • And lots of other cool features.

    The bad news (to some):

    • No more ability to set a default landing tab (all users — fans and non-fans — land on Timeline/Wall);
    • Wall conversations suffer from the 2-column layout, fragmenting the flow of conversation.
    • No more “Recommendations” area. The Recommendations section finally made its re-appearance on March 13, 2012. Welcome back!
    • No Photo strip, the row of 5 thumbnails at the top of your Page;
    • Smaller profile picture: Previously 180 x 540px, it’s now displayed at 160w x 160h px (although the uploaded image must be at least 180 x 180px!) and nested in the Cover Photo. But, obviously, with the addition of the Cover Photo it’s a net gain;
    • No left-column navigation: Tabs are now located at the top of the Page — a throwback to the old Page layout! And fewer tabs are displayed, down to 3 optional tabs from 5 in the old layout.

    But really the news is mostly good, and there are MANY great new features. Here are the most frequently asked questions — and answers! [Read more...]

Technorati Tags: , , ,

Filed Under: Facebook Design, Platform Updates Tagged With: , , ,

The Best Options for Facebook Polls

February 14, 2012 By 2 Comments

So you want to use a poll on your Facebook Page?
To spark fan engagement, to get feedback, to promote your products — whatever the reason — Facebook polls are an effective and popular method for attracting fans and gathering information.

But what is the best way to host and present a poll? You should be judging the various polling options by the following criteria:

  • Is the application customizable?
  • Will the poll itself, as well as the poll results, be easy to find and visible to your fans?
  • Are there built-in Share features to spread the poll virally among Facebook users?

Below, I will explore the different Facebook Poll resources available.

FREE Facebook Poll Apps

From my research, it seems like many of the available free poll apps are lacking in either one or all of the aforementioned criteria.

Here is the best option that I found among apps built specifically for use on Facebook:

Poll by Kremsa

This app has a very simple interface, and the poll appears on your Facebook Page as a separate tab. However:

  • there are ads that appear on your tab. The ads are for Kremsa, the company that created the app.
  • Page Admins have no control over the poll’s appearance.

Create a poll for your Page here:

There are premium features available for a fee. You can pay to hide ads, advertise your poll, and keep the poll users on your Page tab rather than sending them to a canvas app.

The app has a Facebook Page where you can see a showcase of other Pages using the Poll App, and find support on the Help Tab.
[Read more...]

Technorati Tags: , , , , , , , , ,

Filed Under: Facebook, Facebook Strategies Tagged With: , , , , , , , , ,

HYPERlinks February 3, 2012: A Weekly Roundup of Links to Great Design, Web Tools and Services

February 3, 2012 By 2 Comments

Web Development and Design Resources for Web Developers

HYPERlinks: February 3, 2012

This week we have a wide range of cool links to share – from competitive coding to responsive notebooks to really nerdy plugins and CSS features.

And just for fun, because we love the internet:

“Every second one hour of video is uploaded to YouTube. Let’s visualize that.”

http://www.onehourpersecond.com/

Jenni Schwartz / Designer

Go Code Racer, Go!

http://coderace.me/

Pretend you are at one of Facebook’s Code-A-Thons and race to finish code challenges before your contenders while using special weapons to foil their process. Win awards, the right to gloat, and of course you may even learn a thing or two.

Who’s Hungry?

http://stylishwebdesigner.com/30-delicious-and-inspirational-restaurant-websites/

We are finally seeing a design shift in the restaurant industry for the better. View the link below to view 30 delicious and inspirational restaurant website designs. Most of the sites are showing large images of food to entice the potential customer.
[Read more...]

Technorati Tags: , , , , , , , , , , , , ,

Filed Under: Weekly Links Tagged With: , , , , , , , , , , , , ,
« Older Posts