HyperArts Blog

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

Analisa — Wed, 18 Apr 2012 22:07:42 +0000

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.

Our task was to design a co-branded micro-site that achieved the following goals:

Clearly display instructions for entering the contest;
Connect the site’s Registration page with the Ubisoft UPlay database backend so that a user could Register their already uploaded Just Create videos via a simple form;
Video Gallery: Gather all registered video entries into a Video Gallery sortable by username, date and most popular;
Display each individual video on a separate player page;
Integrate Facebook Like and Send buttons, both for voting (and measuring video popularity) and viral sharing of the contest.

Our Approach to Design

Our team first met with Ubisoft to kick off the project. We discussed the importance of co-branding to reflect the two sponsors of the contest: Just Dance and Propel. We would be using assets from both brands and creating a micro-site that would clearly reflect the two brands.

We were encouraged to use the following two websites as inspiration for creating the dual aesthetic. As you can see, the brands have very different aesthetics. It was a fun challenge for our designer to find a way to combine and balance the two:

Just Dance 3 Site

Propel Zero Site

Our Approach to Development — Database Integration

Our programmer also had a unique challenge, namely, integrating the stand-alone site with the existing Ubisoft backend. It was crucial that we were able to detect a user’s Ubisoft UPlay username and password, which would be entered on the Registration page, in order to find their recently uploaded Just Create dance video in the Ubisoft UPlay database. This video would then be added to the microsite’s database, allowing it to appear in the Video Gallery.

To meet these goals we designed a microsite-specific database that contains all of the data necessary to display the entries on the microsite as well as link the entries to the Ubisoft UPlay account database. The microsite database is connected to the backend by a
custom-designed web service. Ubisoft IT personnel use the web service to add new entries to the microsite database, update entries after a successful registration, and monitor activity on the microsite. Throughout the project we worked closely with Ubisoft to ensure a smooth flow through all the steps and that the data processing was efficient and reliable.

Other features include using Facebook’s JavaScript API to detect a click on the Like button and update the database for the specified video.

Website Features

Home Page with video, instructions and co-branding.
Official Rules page.
Video Gallery with all entries. Users can sort entries by username, date and popularity. There is also basic Search functionality.
Individual Video Player pages for each video. Each video has a Facebook Like and Send button, for voting and sharing. Each video player page also features other videos to encourage browsing.
Registration page for users who have just uploaded their video via Ubisoft website.
Confirmation page for users who have successfully submitted a video to the contest.

To see more of our Web design projects and learn more about our services, view our Web Design Portfolio.

Technorati Tags: co-branding, database, development, Just Dance 3, microsite, Propel Zero, Ubisoft, web design

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

Tim Ware — Fri, 13 Apr 2012 15:27:57 +0000

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:

Note the smooth continuity of the Cover Photo and the Profile Picture.

So is Facebook Rolling Out a New Profile Picture Size, or….

Facebook is well known among developers for pushing out changes before fully testing them, seeing what breaks, and then making adjustments.

And then, sometimes a bug is just a bug… Some are already presenting the new 160px size as Facebook’s intention, although they admit they’re just making an educated guess.

Myself, I’m remaining agnostic on this one until I hear something from Facebook. Historically, when images on Facebook start behaving badly, it’s usually been a bug. BUT it can also indicate that something’s indeed afoot.

And thinking about it, the larger Profile Picture size does appear to be more appropriately scaled to the Cover Photo.

But when a design change is going to affect brands — very big (Ford or Fanta) and not so big — it seems Facebook has always provided a heads up, despite what I mention about their “push it out and see what happens” approach to testing.

This is affecting both Personal Profiles and Brand Pages

This inconsistency is happening on Timeline for Pages and Personal Profiles. Some say it began with Personal Profiles, but I don’t know if that’s true or not.

Peeking Under the Hood — the Underlying Source Code

I inspected the underlying code for both versions of the Profile Picture. The Profile Picture you upload at the required minimum size of 180 x 180px is resized in the HTML, with “height” and “width” values specified right in the tags. The images aren’t being resized with CSS.

When the Profile Picture is displayed at 160 x 160px, here’s the code:

Here’s the code (from Safari) when it’s displayed at 125 x 125px:

The Two Factors that Appear to Affect the Displayed Profile Picture Size

What is frustrating about this bug/rollout is that it’s wildly inconsistent. Two things appear to affect how you see the Profile Picture:

What browser you’re using: On Mac OS X — Chrome and Firefox display the Profile Picture at 160px. Safari displays it at 125px. On Windows, IE 8 and 9 both display the Profile Picture at 125px;
Using Facebook as Page or Profile: On Mac OS X Firefox, if I opt to use Facebook as my Page, rather than as my Personal Profile, the Profile Picture displays at the expected 125px. When using Facebook as my profile, it displays at 160px.

What should you do? Change your Profile Picture, or hold off?

My advice is to wait until either the bug resolves or Facebook announces this change.

If you’ve been using the Photoshop templates I provide in my Timeline for Pages Cover Photo / Profile Picture integration article, or in my Personal Profile Cover Photo / Profile Pic article, just know that if this change to 160px appears to be permanent, I’ll adjust the templates accordingly.

Stay Updated on This

I will definitely update this post with whatever information I learn.

Here is the bug report I posted on Wednesday, April 11, 2012.

And you can follow the lively discussion about this on the HyperArts Fan Page.

Share your experience in the comments

Feel free to share what your experience has been with this issue.

It seems that almost everyone is reporting something different!

Technorati Tags: Cover Photo, Facebook bug, Facebook Timeline, Profile Picture

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

Tim Ware — Thu, 05 Apr 2012 18:54:18 +0000

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 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.

The “Secure Browsing” option is selected by clicking on the arrow to the right of your picture in the top-right corner of Facebook when you’re logged in.

The path is: Account Settings > Security > Secure Browsing

What Secure-Browsing Users will See if you use HTTP for both URLs

Facebook forces you to enter a “Secure Page Tab URL” when you are creating your Page Tab application.

View our classic example of a Page Tab that tries to “fake” HTTPS by using “https://” for domain that doesn’t have an SSL Security Certificate. (Make sure you’re using “secure browsing” in your Facebook settings!)

However, you CAN enter either an “http://” URL into the “Secure Page Tab URL” field OR a “https://” URL even if the domain of that URL doesn’t actually have an SSL Security Certificate.

If You Use “HTTP” for both the “Page Tab URL” and “Secure Page Tab URL”

If you decide to just use the HTTP URL for both fields:

Facebook will open your tab for secure-browsing users but no content will be displayed! Secure-browsing users will just see an empty box.

If You Use “HTTPS” for the “Secure Page Tab URL” but the Page is NOT Secure

If you decide just to use “https://” for the “Secure Page Tab URL” but the Web page which you specify ISN’T secure (the domain doesn’t have an SSL Security Certificate):

Then secure-browsing Facebook users will still not see your tab content BUT the security warnings they see will depend on the browser they’re using.

Firefox
“This connection is Untrusted”

Internet Explorer
“Content was blocked because it was not signed by a valid security certificate”

Google Chrome
“This webpage is not available – The webpage at https://www.hyperarts.com/social-media/insecure/insecure.html might be temporarily down or it may have moved permanently to a new web address. Error 501 (net::ERR_INSECURE_RESPONSE): Unknown error.”

Safari
“Safari can’t verify the identity of the website ‘www.domain.com’”

The Takeaway: Make sure your Facebook Page Tab is Secure!

It makes no sense for you to create a Facebook Page Tab that millions of users won’t be able to see. The takeaway: Make sure you host your Page Tab index pages under a domain that has an SSL Security Certificate!

Additional Resources

Technorati Tags: Facebook Page Tabs, https, secure browsing, SSL

How to Create a Facebook App for your Timeline Page Tab

Tim Ware — Tue, 03 Apr 2012 03:39:16 +0000

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.

Click on the “+ Create New App” button in the upper-right corner:
In the pop-up dialog, enter the name of your App (you’ll see if it’s valid or not, right next to the box, in green):
After clicking “Continue”, you’ll be presented with the “Security Check” characters. Enter them and click “OK”.

Entering the “Basic” values for your App

Once past the Security Check, you’re presented with the Basic Settings for your Page Tab App, and this is the only screen where you need to do anything.

Your Facebook App ID

Below the name of your App, you’ll see the “App ID.” This value will be required when you’re setting up your Page Tab to integrate with Facebook’s Open Graph, most commonly for the Social Plugins, as well as loading the JavaScript SDK and preventing scrollbars on your tab.

Besides the “App Display Name”, the only other value you need to enter in this section is your email address.

Integrate your App as a “Page Tab”

Under “Select how your app integrates with Facebook”, you want to click on “Page Tab”:

Page Tab Values

Now you enter the specifics of where your Page Tab:

Page Tab Name: This is the name that will display below the Page Tab Image (aka “Custom Tab Image”) on your Page:
Page Tab URL: This is the full URL to your Page Tab’s index page. It can end in .php, .html, or .htm, and it doesn’t have to be named “index”;
Secure Page Tab URL: This is the same URL but using HTTPS. A secure URL is now required for Facebook Page Tabs. This means you must host your Page Tab’s index page, and all files referenced in it (images, stylesheets, JavaScripts), on a domain that has an SSL Security Certificate. See this post about HTTPS and Facebook. See also my article on inexpensive SSL options.
Page Tab Edit URL: Not applicable here;
Page Tab Image: This is the image that will represent your Page Tab below your Cover Photo (see the green “About HyperArts” Page Tab Image, above). Make sure your Page Tab Image’s dimensions are 111 x 74px. To upload your Page Tab Image (aka “Custom Tab Image”), click the “Change” link (circled above). You can change this at any time via your Page admin area;
Page Tab Width: You will want to select “Wide (810px)” — this is the width for Timeline for Pages custom tabs.

Once you’ve filled in the above options, click the “Save Changes” button, and you’re done!

Adding your Page Tab App to your Page

To add your new Page Tab App to your Page, you’ll need to enter this URL in your browser:

http://www.facebook.com/dialog/pagetab?app_id=YOUR-APP-ID&next=http://www.facebook.com

Make sure you enter your App ID where indicated in the URL. The “next” value is where you (or anyone) will be redirected after successfully adding the App to their Page.

Additional Resources

Technorati Tags: Custom Page Tabs, facebook applications, Facebook Timeline, Page Tabs

Timeline Cover Photos: Are You Breaking the Rules?

Analisa — Wed, 28 Mar 2012 00:12:49 +0000

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.”

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

It seems that Facebook wants Business Pages to feel less like ads and more like people — not as much of a promotion but an expression of a brand’s personality. Facebook’s Help Center specifically states the following:

“We’ve found that people have a better experience viewing your Page when they see a cover that’s as unique as your business, brand or organization.”
– Facebook Help Center

“Covers must not be false, deceptive or misleading, and must not infringe on third parties’ intellectual property. You may not encourage or incentivize people to upload your cover image to their personal timelines.”
– Facebook Help Center

Since Timeline became available, we have seen many early-adopter Pages that are NOT following the rules. Others seem to be aware of the restrictions but are pushing the boundaries trying to get around the specific guidelines. But there are also many Pages that seem happy to follow the rules. We gathered up some of the most interesting examples that fall into these categories…

(NOTE: Some of the following examples have since been changed to conform with Facebook’s guidelines.)

Breaking Badly

Take a look at the following examples of Pages that are clearly breaking the rules:

Corona

This Page breaks the “no call to action” rule and also refers to their custom tab.

Volvo

Volvo was breaking the rules very obviously at first, but they must have realized the mistake and you can see how their cover photo has since evolved:

#1: Arrow to custom tab icon with call to action “click”

#2: No more arrow, but still a call to action “click”

#3: No arrow and no call to action.

Have1.com

Their company and Page name is a URL, so are they breaking the no-URL rule?

Social Heavy

Oops! Gotta get rid of that URL. And to me it appears this Cover Photo is primarily text-based, another no-no.

Walking the Line

These Pages seem to know the rules and are working hard to stay just within the lines … or are they? Some of these reflect misinterpretations of the rules:

The Apprentice Show, NBC

They are not explicitly saying “click on the Like button” but the arrow is a graphical call to action.

Etsy

Sharing their website link in a clever way: with a photo of their URL in a banner. Is it cheating?

Yardsale

This new mobile app (available in the San Francisco Bay Area) is like a virtual yardsale — and a cooler version of Craigslist — but is their Cover Photo breaking the rules? They have taken a photo of their promo booth that features “sale” info and their website URL — but this is not a graphic they created, it’s just a photo! What do you think?

Armani

The clothing brand’s Cover photo asks Fans to “Watch it on our Timeline”…Is that a call to action? Plus a reference to a Facebook feature, no?

Top of the Class

These Pages have found creative and interesting ways to both promote their brand AND stay safe without breaking any of Facebook’s restrictions on Cover Photos:

Verizon

This broadband and telecommunications company has cleverly found a way to both promote products and engage their Fans: they have asked Fans to share photos taken with their camera phones, and are using those images as Cover Photos. Each photo has a caption that tells us the name of the customer AND their device.

Hearsay Social

This social media marketing company shows a graphic with Twitter, Google+, LinkedIn and Facebook icon to show that they offer particular services. They effectively reflect their brand and communicate a message.

Mariah Carey

The singer has found a sneaky way to promote her profile on Twitter and other social networks without including the rule-breaking URL in her photo. The only text is “/MariahCarey” accompanied by social media icons — which would help you find Mariah quickly on Twitter or YouTube.

MTV

MTV is promoting an upcoming television special by displaying the show name, air date and time.

Share Your Examples

We would love to see your creative examples. Post a link to your amazing PAGE Cover Photo — or be a snitch and share a link to a Cover Photo that you think is breaking the rules.

NOTE:
The rules that are discussed in this post are for Business Pages, not Personal Profiles. However, there are restrictions that can apply to your Personal Profile Cover Photos as well (read more about subject in this great post by Mari Smith).

Technorati Tags: advertising, brands, business pages, call to action, Cover Photo, Facebook, pages, restrictions, rules

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

Tim Ware — Wed, 14 Mar 2012 23:58:24 +0000

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

Ford Motor Company Masthead

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

Creating the Cover Photo and Profile Picture images in Photoshop

I have found that the best way to create the images for the Timeline masthead is in Photoshop, although your mileage may vary.

There are several things that make the integration of the two images tricky:

Aligning the Cover Photo and Profile Picture to create a seamless continuity between the two images;
Although the Profile Picture renders at 160 x 160px (with an additional 5px border), Facebook requires the image you upload be a minimum of 180 x 180px;
Your Profile Picture also functions as your icon, on all your Page posts on your own or other Facebook Pages, so it has to work both with your Cover Photo AND function as a stand-alone icon.

Make sure your Profile Picture works well as a thumbnail / icon for your brand!

It’s great to be creative with the Cover Photo / Profile Picture combination, but remember your Profile Picture does double-duty as your brand icon wherever you post comments.

Here is how the above three example Pages’ Profile Picture thumbnails display:

As you can see, the Ford thumbnail doesn’t render too well at the reduced size, whereas the HyperArts and Pragmatic Design thumbnails render better. (Although, I think the Pragmatic icon would look better if it wasn’t clipped at the top.)

Aligning the Cover Photo and Profile Picture to create a seamless whole

I have found that the best way to create your Facebook Timeline masthead is to create one image that includes both elements, so that you work out exactly how the two images will look when rendered on Facebook.

To make your life easier, I have created a Photoshop Timeline for Pages Cover Photo Template you can use to create your Cover Photo and Profile Picture for your Facebook Timeline Page.

NOTE: If you’re using this for your Personal Profile Timeline (as opposed to a Brand Page), use this Photoshop Template.

How to Use the Timeline Masthead Photoshop Template

Because of Faceboook’s requirement that the uploaded Profile Pic image be at least 180 x 180 pixels — which Facebook re-scales to 160 x 160 pixels, i.e., 88.88% of the original size), it’s best to create your entire masthead design at a width that, when re-scaled to 88.88% its size, will be 851px. This width is 958 pixels, and the total height — including Cover Photo and Profile Picture — is 450 pixels (Facebook enforces a minimum height of 399px for the Cover Photo), and those are the dimensions I’ve made the Timeline Masthead Template PSD.

Let’s get started!

1) Download, unzip and open the template file in Photoshop. Notice the transparence where the Cover Photo and Profile Picture will go:

2) Create the main image for your masthead at 958 x 450px — or larger so you can experiment with different positions.

3) Drag your image into the Cover Photo Template, and move the template layer to be ON TOP of your image layer:

4) Add any additional graphic elements:

After you designed your masthead to your satisfaction, it’s time to export the Cover Photo and Profile Picture and upload them to Facebook.

Export the Profile Picture image as GIF, JPEG or PNG

1) With the layer called “TEMPLATE” selected, select the Magic Wand tool — set to “0″ tolerance, “contiguous” checked, and “Anti-alias” UNchecked — and click inside the Profile Picture (the inset box) area so that it’s selected (this will be 180 x 180px).

2) From the top menu, select: Image > Crop

3) Export the cropped image — your Profile Picture — as JPEG, GIF or PNG.

4) Undo (Mac: Command+Z; Windows: Control+Z) until you’re back to the full template image.

Export the Cover Photo image as GIF, JPEG or PNG

Now it’s time to export your Cover Photo.

1) Disable the “TEMPLATE BORDERS” layer;

2) Export your Cover Photo image — which, if you’ve done everything correctly, should be 958 x 450px.

Upload the images to your Facebook Timeline Page

Uploading your Cover Photo and Profile Picture to your Facebook Page is fairly straightforward, and chances are you’ve done this before. Here’s a quick rundown….

If this is the first Cover Photo you’ve created for your Page, just click on “Add a Cover” to locate it on your computer and upload it.

If you’re replacing an existing Cover Photo, just mouse over the Cover Photo and click “Change Cover”.

Repeat for the Profile Picture, mousing over it and selecting: Edit Profile Picture > Upload Photo.

If you’ve followed the above instructions to the letter, it should look just as you planned it.

View our example Timeline Page.

Share your creative work…

I’d love to see what you come up with using our template. Please share in the comments. Thanks!

Related Articles

Facebook Timeline for Pages – Frequently Asked Questions

Technorati Tags: Cover Photo, Facebook Timeline, Profile Picture

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

Analisa — Fri, 02 Mar 2012 18:09:11 +0000

“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.

Your Timeline is now a place for users to explore, to discover, and to really engage. Before I go into why this is true, let’s quickly review how the old Wall worked…

How the Wall used to work

On the old Wall, Page Admins and Fans could post text, images, videos and links, which appeared in reverse chronological order. Admins could moderate content, but when you posted a new status update it could only go to one place: the top of the Wall. Anyone visiting a Page could scroll down to see older posts, but at a point you would have to click “More posts” to see the next batch of old posts.

And all posts were stacked one on top of the other, creating a really long page. If you wanted to go back in time, say to a previous year, on the Wall, you were in for a looooong search.

Why Timeline is better for engagement

Now, with the introduction of Timeline, posts on the Wall are organized in a way that promotes historical exploration. And stories, or posts, are staggered to the right and left of a centered time-line (hence the name!)

This staggered layout means that you can see more stories at once, saving loading and viewing time. This is nothing new for those of us with Timeline on our Personal Profiles, but for Pages, this presents admins with some interesting opportunities.

Infinite Scrolling = Addicted to Scrolling

The new Timeline layout uses both masonry layout and infinite scrolling to create a seamless browsing experience. This, plus the Timeline date navigation on the right side of the page, makes it super easy for a user to stay on your Page for a long time, just exploring your content, easily navigating to different years with a single click in the Timeline navigation on the right.

I was excited to read, in this article about Pinterest, an analysis of why Facebook’s adoption of these two features in tandem (masonry layout + infinite scrolling) created an addictive browsing experience:

“It’s interesting to note that the Facebook News Feed, the epitome of website addiction, uses infinite scrolling. Further, the new Timeline pages now combine this technique with a two-column masonry style layout.”
–Joshua Johnson, designshack.net

How can Page Admins utilize this opportunity?

So, we have talked about why the Timeline is a nice layout, but what does that mean to Admins? Well, it’s really not enough that the layout is user-friendly — you also have to offer quality content if you want to keep fans on your Page. If you can combine unique and compelling content with the magical Timeline formula, you can actually curate a Page that attracts — and KEEPS — users.

Take advantage of highlighting, back-dating and milestone features

The most powerful and effective way that I have seen early adopters creating compelling content is by utilizing the highlighting, back-dating and milestone features of the new Timeline for Pages.

Highlighting a post will change it to a full-width format, rather than half-width like most stories. This is great if you are highlighting a photo or a video because they get much more room to shine.

Milestones are posts that highlight a moment or story in the history of your brand (or the world). You can add milestones to any point (date) in your Timeline. By default, milestones appear in the highlighted post format (wide).

Back-dating is essentially creating a milestone out of any previously published post, and these stories can be more than just images and text (learn more below).

How to create Timeline milestones

(Note: these screenshots are taken from the super-helpful Facebook Marketing Department’s video: learnfacebookpages.com)

1. Create Milestone from your Timeline composer. The “composer” is the box where you can create a status update or milestone.

2. Specify date, and pick a photo. Milestones must include a photo, but a story and location are optional.

3. Save milestone to your Timeline. Now users can find this story in your Timeline navigation.

Backdating Timeline posts:
If you want to include other types of media (video, links, albums, etc) in a past post on your Timeline, you can create the post as a normal status update, not a milestone, and then change the date of the post in the composer.

Examples of Pages with Timeline History

The following Pages have already filled their Timelines with loads of interesting milestones that tell storied about their brands. You don’t necessarily have to be a company with 100 years of history to do this — you just have to get creative!

Macy’s

The New York Times

People.com Magazine

Today Show

Ford Motor Company

Starbucks

Coldplay

Coca-Cola

Use Timeline to lead your Fans to your new content

So you added a bunch of milestones to your Timeline… How will people know to go look there? Here are a few cool ways that some of the Pages mentioned above are letting their Fans know about the new Timeline feature:

The New York Times pinned this post to the top of their Timeline:

Macy’s had another good idea – they actually asked Fans to help with the Timeline population, asking them to upload memories they shared with the brand onto the Timeline:

Hopefully this has given you some ideas — now YOU tell us, what sort of milestones can you add to YOUR business Page Timeline?

Technorati Tags: audience, content, engagement, Facebook, fans, milestones, new layout, New Timeline, pages, pinning, posts, reach, social media, timeline, user engagement

Facebook Timeline for Pages – Frequently Asked Questions

Tim Ware — Wed, 29 Feb 2012 23:03:47 +0000

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

Like Button does not refresh the page: FIXED! (03.07.12) Facebook Bug Report;

810px Timeline Apps not centered in containing div: FIXED! (03.07.12) Facebook Bug Report.

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:
- Like Button does not refresh the page: FIXED! (03.07.12) Facebook Bug Report;
- 810px Timeline Apps not centered in containing div: FIXED! (03.07.12) Facebook Bug Report.
If you’re experiencing problems, you might also check:
- Known Issues on Facebook Page
- Known Facebook Bugs — Report a Bug
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!

Frequently Asked Questions: Timeline for Facebook Pages

On the HyperArts Fan Page we’ve been fielding lots of questions — and getting answers from our fans — about Timeline for Facebook Pages. I am distilling the knowledge into a FAQ to help out.

Rollout details
- How much time do I have to change my Page to Timeline?
  
  Facebook says: “On March 30, 2012, all Facebook Pages will get a new design.” So Page Admins have about 30 days to re-do their Pages to accommodate the Timeline layout.
- Can I preview my Fan Page in Timeline before it goes live?
  
  YES. You are given an option to preview before publishing. And you can remain in Preview mode as you work on your Page to get it ready.
- How do I publish my Timeline Fan Page once I’m ready?
  
  When in Preview mode, you’ll see a “Publish Now” button. Click it!
Administration

One great feature of the new admin is that you can admin your Page without leaving the Page itself. The administration is displayed above the Page content. Admins can see all the Pages they admin, and preview any one, or all, of them by going to: https://www.facebook.com/pages/status.
- How do I edit my Timeline Facebook Page?
  
  At the top right of your Page, click the “Admin Panel” button: On the next screen, click the “Manage” tab at top right, then select “Edit Page”: This takes you to the Admin editing area you’re used to seeing.
- How do I specify a default landing tab for non-fans?
  
  You can’t! This will be a pain point for Page admins, but at least the larger Custom Image Tabs provide an opportunity for a Call to Action;
- How do I edit the “About” section that appears under the Cover Photo?
  
  Go to the Edit page area (see above on how to now get there). In the left column, select “Basic Information” and add your content to the “About” field. Approximately 160 characters will be displayed (including spaces), depending on where line breaks. NOTE: If your Facebook Page is a Place Page (you’ve specified an address in your settings), the “About” content for your Timeline is the category, address, phone number, and hours — and it’s auto-generated. (You may also have to “claim” your Place Page to have the About show up this way. I’m not sure.)
- What is the earliest date that can be set in the Timeline?
  
  The starting date for your Timeline is the date of your brand’s founding. The earliest option is 1000 AD!
- How do I manage the four tabs under the Cover Photo?
  
  You can manage 3 of the tabs — the Photos tab can’t be changed or moved. See below for detailed instructions on curating these 4 tabs (Facebook calls them “Views” and the 111 x 74px image the “Custom Tab Image”).
- How do I UNLIKE a Page?
  
  This option is now under the arrow that’s to the right of the “Message” button: Just select the “Unlike” option.
Design, Display and Layout

As you’ll notice, the layout for Timeline for Facebook Pages is pretty much identical to Timeline for Personal Profiles, so you can read my detailed tutorial on customizing your Timeline Cover Photo and Profile Picture to get creative ideas.
- How do I add a Cover Photo to my Timeline?
  
  Just click the “Add a Cover” button:
  You can then select a cover from your Photos or from your computer. The Cover Photo should be 851 x 315px, but you can position a larger image by dragging it. The inset Profile Picture displays at 160 x 160px (although the image you upload must be at least 180 x 180px), plus a 5-pixel white border.
- Can I use the Cover Photo to advertise promotions and deals?
  
  NO. Facebook explicitly states “This space is not meant for promotions, coupons, or advertisements.” Read Facebook’s Help on “How should I choose a cover photo for my Page?”
- Can I customize the Custom Tab Images under the Cover Photo?
  
  YES! With Timeline for Facebook Pages you can create a custom image — 111 x 74px — for all tabs EXCEPT Facebook’s own apps (Photos, Notes, Events, Videos, Links), and you can have a maximum of 4 (including the Photos tab) displayed, with the rest hidden. IMPORTANT: Page admins will see ALL of their tabs revealed by clicking the arrow. Non-admins will see a maximum of 12 tabs (including Photos), with 4 displayed and 8 hidden.
  
  How to change the order of the Custom Image Tabs (aka “Views”)
  
  You can change the order of your Custom Tabs EXCEPT for the Photos tab which is fixed at the first position. Click the down arrow to the right of the displayed tabs (the number next to the arrow is how many tabs you have): Once this screen is open, you can mouse over each tab’s Custom Tab Image to:
  - Swap the position of one tab with another;
  - Remove a tab from the Favorites (all the apps, both displayed or viewed via the arrow);
  - Edit the tab’s settings;
  - Uninstall the app.
  To change which tabs show up in your top 4
  
  Click the arrow to the right of the top 4 tabs, then mouse over the tab in the top 4 you want to replace. Next, click the edit “pencil” icon and select the app you want to have appear in your top 4. Voila! You can use the above method to re-order all of the tabs on your Page.
  
  To change the Custom Tab Image
  
  As mentioned above, you can change the Custom Tab Image for all tabs EXCEPT the tabs for Facebook’s own apps.
  1. Click: Admin Panel > Manage > Edit Page > Apps;
  2. Click “Edit Settings”;
  3. Next to “Custom Tab Image” click “Change”.
  The page where you can upload a new image actually (at this time) opens in a new window or tab: On this page, click “Change” and select and upload your image. You can upload a 111 x 74px image to replace the one that’s there. The screen where you upload a new image is in a new tab or window, so after you’ve uploaded a new Custom Tab Image, close that window (or tab) to get back to your Edit screen where you then must click “Okay” to finish the process.
- How do I control the photo that appears in the “Photos” Custom Tab View?
  
  This has been a bit buggy at rollout, but I believe Facebook intends this to be the latest uploaded photo.
  Unfortunately, at this time there doesn’t appear to be any way to control which photo shows up in the 4-tab row, like you could with the old Photostrip (the 5 thumbnails under the Page name), where you could mouse over the displayed image which would then display an “x” which, when clicked, deleted the photo from the Photostrip.
  TIP Until Facebook introduces a way to curate the image for the Photos tab, if you upload an image but don’t want it to replace your Photos tab image, re-upload the image you DO want after the image you DON’T want.
Posting content to your Timeline Facebook Page

There are some great new features for posting status updates to your Page, including
- “Pinning to the top” — making updates “sticky” so that they remain at the top of your Wall;
- “Highlight” updates to give them more prominence by extending them to 2 columns.
Here are the details:
- How do I keep a status update at the top of my Page?
  
  This is called “pinning” a post, and you may recognize this feature from blogging where you can make a post “sticky” so that it always remains at the top of your feed. As shown above, click the “pencil” icon at the top right of your update, where you can select among the options to pin it to the top, change the date, hide it or delete it. You can un-pin a post at any time, but the maximum time you can pin it to the top of your Wall is 7 days. Strategy Tip: Come up with a weekly posting feature — Fan of the Week, Blog post of the week, or a question for your fans that stays up at the top each week — to promote engagement.
- How do I highlight a status update?
  
  The “Highlight” allows you to have your status update extend over two columns. As shown in the image above, just click the “star” icon to highlight the update; click it again to un-highlight it.
- Can I both highlight a post AND pin it to the top?
  
  Nope. One or the other, but not both!
Custom iFrame Tabs — WOW!

This is a big one for brands and may, perhaps, make up for losing the ability to set a default landing tab. Custom Tabs can now be displayed at a whopping 810px! The width can be specified in your app settings: You also have the option to keep the tab width to 520px. If you choose this option, your canvas page will display centered in the 810px area provided by Facebook. Whichever width you choose will be the width of the iFrame for your canvas page content. If your app is 520px, you’ll see something like this (note the canvas page is centered): And if your app is 810px, you’ll see something like this:

Where’s the Like Button on my custom tab?

If you don’t see a Like button on your custom tab, it’s because you’re already a fan.

Facebook’s intent with these wider tabs? Think: Your Website on Facebook…

Yes, with most of the Facebook chrome removed and all that screen real estate, you can now have a version of your website right in Facebook! This would keep users within Facebook by providing users with a more website-like experience, thus reducing the need to send people back to your actual website. OK, that may sound cynical, but think about it. The more users stay on Facebook, the more they see advertising, which is at the core of soon-to-go-public Facebook’s business model. I wouldn’t be surprised to see some advertising sneaking onto these lovely widened custom tabs.

A few other cool new Timeline for Pages features
- The “masthead” is replaced by a navigation bar when you scroll beyond it, solving the “below the fold” problem. The navigation bar remains at the top of the screen as you scroll down.: You can use this reduced navigation bar to sort posts, see custom tabs, and more.
- You can now send private messages to Pages. When on a Page, click the “Message” button below the Cover Photo to write and send your message. Of course, this could become a source of spam for admins, but they should be able to block abusers;
- You can back-date your posts by clicking on the “change date” icon in the dropdown menu on each post (under the “pencil” icon);
- Pages can add “milestones” with images, to any point on their timeline. Brands can use this to highlight important events and company history.
So that’s Timeline for Pages! We think it’s a great change (except for losing the default landing tab!). What do you think?

Additional Resources
Word count: 2338 Last edited by Tim Ware on March 26, 2012 at 10:22 am

Default Layout set in Theme Settings

Content-Sidebar
Sidebar-Content
Content-Sidebar-Sidebar
Sidebar-Sidebar-Content
Sidebar-Content-Sidebar
Full Width Content

Custom Body Class

Custom Post Class

This post is already public. Public post preview not available.

Make Redirect Active. (check to turn on)
Open redirect link in a new window.
Add rel=\”nofollow\” to redirect link.
Show the Redirect URL below in the link instead of this page URL. NOTE: You may have to use the FULL URL below!

Redirect URL:

(i.e., http://example.com or /somepage/ or p=15 or 155. Use FULL URL including http:// for all external and meta redirects. )

Type of Redirect: (Default is 302)

NOTE: For This Option to work, the page or post needs to be published for the redirect to happen UNLESS you publish it first, then save it as a Draft. If you want to add a redirect without adding a page/post or having it published, use the Quick Redirects method.

Page Title:
Description: Facebook has rolled out Timeline for Pages. Here’s everything you need to know about setting your fan page up to take advantage of the new features.
2 remaining
Keywords:
0 remaining
advanced

Excerpt

Excerpts are optional hand-crafted summaries of your content that can be used in your theme. Learn more about manual excerpts.

Send trackbacks to:
(Separate multiple URLs with spaces)

Trackbacks are a way to notify legacy blog systems that you’ve linked to them. If you link other WordPress sites they’ll be notified automatically using pingbacks, no other action necessary.

Already pinged:

http://techcrunch.com/2012/02/29/how-to-use-timeline-for-pages/

http://www.hyperarts.com/blog/facebooks-timeline-cover-photo-time-to-get-creative/

http://www.hyperarts.com/blog/facebooks-timeline-cover-photo-time-to-get-creative/

Name Value
Key
Value1
Key
Value594071157

Add New Custom Field:
Name Value
Enter new

Custom fields can be used to add extra metadata to a post that you can use in your theme.

Allow comments.
Allow trackbacks and pingbacks on this page.

Author

26 March, 2012 @ 10:21 by Tim Ware
26 March, 2012 @ 10:10 by Tim Ware
26 March, 2012 @ 10:10 [Autosave] by Tim Ware
19 March, 2012 @ 15:52 by Tim Ware
19 March, 2012 @ 15:42 by Tim Ware
19 March, 2012 @ 15:40 by Tim Ware
14 March, 2012 @ 17:12 by Tim Ware
14 March, 2012 @ 9:01 by Tim Ware
9 March, 2012 @ 11:46 by Tim Ware
9 March, 2012 @ 11:45 by Tim Ware
8 March, 2012 @ 10:14 by Tim Ware
8 March, 2012 @ 10:11 by Tim Ware
8 March, 2012 @ 10:10 by Tim Ware
7 March, 2012 @ 9:01 by Tim Ware
7 March, 2012 @ 8:59 by Tim Ware
6 March, 2012 @ 11:09 by Tim Ware
6 March, 2012 @ 11:08 by Tim Ware
6 March, 2012 @ 11:04 by Tim Ware
5 March, 2012 @ 20:17 by Tim Ware
4 March, 2012 @ 12:40 by Tim Ware
4 March, 2012 @ 11:21 by Tim Ware
4 March, 2012 @ 11:12 by Tim Ware
4 March, 2012 @ 11:11 by Tim Ware
4 March, 2012 @ 11:09 by Tim Ware
4 March, 2012 @ 11:07 by Tim Ware
4 March, 2012 @ 11:05 by Tim Ware
4 March, 2012 @ 11:03 by Tim Ware
3 March, 2012 @ 19:29 by Tim Ware
3 March, 2012 @ 19:28 by Tim Ware
3 March, 2012 @ 18:40 by Tim Ware
3 March, 2012 @ 10:53 by Tim Ware
3 March, 2012 @ 10:34 by Tim Ware
3 March, 2012 @ 10:33 by Tim Ware
3 March, 2012 @ 10:31 by Tim Ware
3 March, 2012 @ 10:31 by Tim Ware
3 March, 2012 @ 10:30 by Tim Ware
3 March, 2012 @ 10:29 by Tim Ware
3 March, 2012 @ 10:18 by Tim Ware
3 March, 2012 @ 10:15 by Tim Ware
3 March, 2012 @ 8:56 by Tim Ware
3 March, 2012 @ 8:55 by Tim Ware
2 March, 2012 @ 11:11 by Tim Ware
2 March, 2012 @ 10:02 by Tim Ware
2 March, 2012 @ 10:01 by Tim Ware
2 March, 2012 @ 8:20 by Tim Ware
2 March, 2012 @ 8:18 by Tim Ware
2 March, 2012 @ 8:17 by Tim Ware
2 March, 2012 @ 8:11 by Tim Ware
2 March, 2012 @ 8:06 by Tim Ware
2 March, 2012 @ 7:53 by Tim Ware
2 March, 2012 @ 7:51 by Tim Ware
2 March, 2012 @ 7:49 by Tim Ware
2 March, 2012 @ 7:48 by Tim Ware
1 March, 2012 @ 20:50 by Tim Ware
1 March, 2012 @ 20:48 by Tim Ware
1 March, 2012 @ 19:39 by Tim Ware
1 March, 2012 @ 18:15 by Tim Ware
1 March, 2012 @ 18:14 by Tim Ware
1 March, 2012 @ 18:13 by Tim Ware
1 March, 2012 @ 16:58 by Tim Ware
1 March, 2012 @ 16:50 by Tim Ware
1 March, 2012 @ 16:04 by Tim Ware
1 March, 2012 @ 16:03 by Tim Ware
1 March, 2012 @ 15:56 by Tim Ware
1 March, 2012 @ 13:17 by Tim Ware
1 March, 2012 @ 13:05 by Tim Ware
1 March, 2012 @ 12:54 by Tim Ware
1 March, 2012 @ 12:53 by Tim Ware
1 March, 2012 @ 12:34 by Tim Ware
1 March, 2012 @ 12:19 by Tim Ware
1 March, 2012 @ 12:18 by Tim Ware
1 March, 2012 @ 11:59 by Tim Ware
1 March, 2012 @ 11:29 by Tim Ware
1 March, 2012 @ 11:26 by Tim Ware
1 March, 2012 @ 11:25 by Tim Ware
1 March, 2012 @ 11:15 by Tim Ware
1 March, 2012 @ 9:20 by Tim Ware
1 March, 2012 @ 9:02 by Tim Ware
1 March, 2012 @ 8:59 by Tim Ware
1 March, 2012 @ 8:47 by Tim Ware
1 March, 2012 @ 8:27 by Tim Ware
29 February, 2012 @ 21:17 by Tim Ware
29 February, 2012 @ 21:09 by Tim Ware
29 February, 2012 @ 21:06 by Tim Ware
29 February, 2012 @ 19:49 by Tim Ware
29 February, 2012 @ 19:48 by Tim Ware
29 February, 2012 @ 18:02 by Tim Ware
29 February, 2012 @ 18:01 by Tim Ware
29 February, 2012 @ 17:58 by Tim Ware
29 February, 2012 @ 17:51 by Tim Ware
29 February, 2012 @ 17:50 by Tim Ware
29 February, 2012 @ 17:44 by Tim Ware
29 February, 2012 @ 17:20 by Tim Ware
29 February, 2012 @ 17:10 by Tim Ware
29 February, 2012 @ 17:01 by Tim Ware
29 February, 2012 @ 16:24 by Tim Ware
29 February, 2012 @ 16:11 by Tim Ware
29 February, 2012 @ 16:03 by Tim Ware
29 February, 2012 @ 16:03 by Tim Ware
29 February, 2012 @ 16:03 by Tim Ware
29 February, 2012 @ 16:02 by Tim Ware
29 February, 2012 @ 15:54 by Tim Ware
29 February, 2012 @ 15:53 by Tim Ware
29 February, 2012 @ 15:52 by Tim Ware
29 February, 2012 @ 15:48 by Tim Ware
29 February, 2012 @ 15:47 by Tim Ware
29 February, 2012 @ 15:43 by Tim Ware
29 February, 2012 @ 15:35 by Tim Ware
29 February, 2012 @ 15:35 by Tim Ware
29 February, 2012 @ 15:25 by Tim Ware
29 February, 2012 @ 15:09 by Tim Ware
29 February, 2012 @ 15:09 by Tim Ware
29 February, 2012 @ 15:07 by Tim Ware
29 February, 2012 @ 15:06 by Tim Ware
29 February, 2012 @ 14:58 by Tim Ware
29 February, 2012 @ 14:51 by Tim Ware
29 February, 2012 @ 14:49 by Tim Ware
29 February, 2012 @ 14:33 by Tim Ware
29 February, 2012 @ 14:33 by Tim Ware
29 February, 2012 @ 14:32 by Tim Ware
29 February, 2012 @ 14:32 by Tim Ware
29 February, 2012 @ 14:30 by Tim Ware
29 February, 2012 @ 14:30 by Tim Ware
29 February, 2012 @ 14:26 by Tim Ware
29 February, 2012 @ 14:25 by Tim Ware
29 February, 2012 @ 14:16 by Tim Ware
29 February, 2012 @ 14:16 by Tim Ware
29 February, 2012 @ 14:15 by Tim Ware
29 February, 2012 @ 14:14 by Tim Ware
29 February, 2012 @ 14:13 by Tim Ware
29 February, 2012 @ 13:18 by Tim Ware
29 February, 2012 @ 13:16 by Tim Ware
29 February, 2012 @ 13:16 by Tim Ware
29 February, 2012 @ 13:11 by Tim Ware
29 February, 2012 @ 12:58 by Tim Ware
29 February, 2012 @ 12:56 by Tim Ware
29 February, 2012 @ 12:55 by Tim Ware
29 February, 2012 @ 12:44 by Tim Ware
29 February, 2012 @ 12:39 by Tim Ware
29 February, 2012 @ 12:37 by Tim Ware
29 February, 2012 @ 12:37 by Tim Ware
29 February, 2012 @ 12:34 by Tim Ware
29 February, 2012 @ 12:34 by Tim Ware
29 February, 2012 @ 12:34 by Tim Ware
29 February, 2012 @ 11:57 by Tim Ware
29 February, 2012 @ 11:57 by Tim Ware
29 February, 2012 @ 11:56 by Tim Ware
29 February, 2012 @ 11:55 by Tim Ware
29 February, 2012 @ 11:48 by Tim Ware
29 February, 2012 @ 11:41 by Tim Ware

Tim Ware
hyperarts.com/blog/
tim@hyperarts.com
192.168.123.103
Submitted on 2012/05/10 at 2:48 pm

Yes, you can still fan-gate Facebook custom page tabs. This tutorial should help.
Kathleen O’keefe- Kanavos
facebook.com/kathleen.o.kanavos
66.74.24.181
Submitted on 2012/05/10 at 11:51 am

I have interconnected my Timeline pg to my profile pg, LinkedIn &Twtter so that I can SHARE from Timeline for max reach. I LOVE that ability!!The problem is that sometimes when I hit the share button on Timeline a box will pop up saying “share on your wall” and then it goes to my profile pg which is what I want, but more often than not “share on your timeline” will pop up which is rediculous, because why would I want to share where I already am???It rather defeats the purpose of sharing. The inconsistency is annoying. Any suggestions?
Tim Ware
hyperarts.com/blog/
tim@hyperarts.com
192.168.123.103
Submitted on 2012/05/01 at 9:36 am | In reply to Wael Salman.

I can’t tell you why this is happening.
Wael Salman
facebook.com/profile.php?id=100001102716735
213.57.247.253
Submitted on 2012/05/01 at 7:13 am

Hi

I have like 10 Facebook fan pages that I have just created – No likes yet , however I am trying to edit – change permissions , and add about , etc details. Whenever I change and press Save – nothing happens …Can someone tell me what is the problem??
Should I wait until I get number of likes and then can edit it??
Tim Ware
hyperarts.com/blog/
tim@hyperarts.com
192.168.123.103
Submitted on 2012/04/24 at 12:25 pm | In reply to Rao Afzal.

You can’t hide the tab. You can move the Custom Tab Image from the top four so that the user has to click the arrow to see it. Or you can remove the tab from the navigation via your Page Admin area.
Rao Afzal
facebook.com/people/Rao-Afzal/1281095397
182.182.105.31
Submitted on 2012/04/24 at 12:03 pm

how can i hide fan page content tab in new time line version of facebook?
Tim Ware
hyperarts.com/blog/
tim@hyperarts.com
192.168.1.104
Submitted on 2012/04/22 at 10:38 am

If you use “overflow: hidden” for the body of your index page, you won’t have scrollbars — and thus will not see any content that exceeds the height you specify.
buy facebook fans
pimpmyfans.com/
buyfacebookfans172012@yahoo.com
117.199.129.52
Submitted on 2012/04/19 at 4:55 am

Facebook profiles are pretty simple. What make your page different from the others are the unique stories you share, the different photos uploaded and other information you feel like sharing online. This is all right for individual Facebook users. However, this can be a little too bland for a business that plans to use it in the marketing efforts.
Tim Ware
hyperarts.com/blog/
tim@hyperarts.com
192.168.123.103
Submitted on 2012/04/17 at 12:57 pm | In reply to Brooke Bates.

I’m not sure where you’d complain, Brooke. As I said, Hugh Briss’s Cover Photo on his Personal Profile has content that’s not permissible on a Brand Page Cover Photo, but that means it’s not a violation of Facebooks rules around this.
I suppose you can turn someone in if you want. Myself, I’m just not that upset about what others do on their Cover Photos.
Brooke Bates
facebook.com/people/Brooke-Bates/34003932
64.186.52.20
Submitted on 2012/04/17 at 12:20 pm | In reply to Tim Ware.

Is there a way to report violators to the FB police without being the bad guy? Sounds petty, I know, but it irks me to see companies use blatantly promotional cover images when my company is trying so hard to follow the rules!

Show more comments

Thank you for creating with WordPress.

Version 3.3.2
https://developers.facebook.com/bugs/create” title=”Report a Facebook Bug” target=”_blank”>Report a Bug

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!

Frequently Asked Questions: Timeline for Facebook Pages

On the HyperArts Fan Page we’ve been fielding lots of questions — and getting answers from our fans — about Timeline for Facebook Pages. I am distilling the knowledge into a FAQ to help out.

Rollout details

How much time do I have to change my Page to Timeline?

Facebook says: “On March 30, 2012, all Facebook Pages will get a new design.” So Page Admins have about 30 days to re-do their Pages to accommodate the Timeline layout.
Can I preview my Fan Page in Timeline before it goes live?

YES. You are given an option to preview before publishing. And you can remain in Preview mode as you work on your Page to get it ready.
How do I publish my Timeline Fan Page once I’m ready?

When in Preview mode, you’ll see a “Publish Now” button. Click it!

Administration

One great feature of the new admin is that you can admin your Page without leaving the Page itself. The administration is displayed above the Page content.

Admins can see all the Pages they admin, and preview any one, or all, of them by going to: https://www.facebook.com/pages/status.

How do I edit my Timeline Facebook Page?

At the top right of your Page, click the “Admin Panel” button:

On the next screen, click the “Manage” tab at top right, then select “Edit Page”:

This takes you to the Admin editing area you’re used to seeing.
How do I specify a default landing tab for non-fans?

You can’t! This will be a pain point for Page admins, but at least the larger Custom Image Tabs provide an opportunity for a Call to Action;
How do I edit the “About” section that appears under the Cover Photo?

Go to the Edit page area (see above on how to now get there). In the left column, select “Basic Information” and add your content to the “About” field. Approximately 160 characters will be displayed (including spaces), depending on where line breaks.

NOTE: If your Facebook Page is a Place Page (you’ve specified an address in your settings), the “About” content for your Timeline is the category, address, phone number, and hours — and it’s auto-generated. (You may also have to “claim” your Place Page to have the About show up this way. I’m not sure.)
What is the earliest date that can be set in the Timeline?

The starting date for your Timeline is the date of your brand’s founding. The earliest option is 1000 AD!
How do I manage the four tabs under the Cover Photo?

You can manage 3 of the tabs — the Photos tab can’t be changed or moved. See below for detailed instructions on curating these 4 tabs (Facebook calls them “Views” and the 111 x 74px image the “Custom Tab Image”).
How do I UNLIKE a Page?

This option is now under the arrow that’s to the right of the “Message” button:

Just select the “Unlike” option.

Design, Display and Layout

As you’ll notice, the layout for Timeline for Facebook Pages is pretty much identical to Timeline for Personal Profiles, so you can read my detailed tutorial on customizing your Timeline Cover Photo and Profile Picture to get creative ideas.

How do I add a Cover Photo to my Timeline?

Just click the “Add a Cover” button:

You can then select a cover from your Photos or from your computer. The Cover Photo should be 851 x 315px, but you can position a larger image by dragging it. The inset Profile Picture displays at 160 x 160px (although the image you upload must be at least 180 x 180px), plus a 5-pixel white border.
Can I use the Cover Photo to advertise promotions and deals?

NO. Facebook explicitly states “This space is not meant for promotions, coupons, or advertisements.”

Read Facebook’s Help on “How should I choose a cover photo for my Page?”

Can I customize the Custom Tab Images under the Cover Photo?

YES! With Timeline for Facebook Pages you can create a custom image — 111 x 74px — for all tabs EXCEPT Facebook’s own apps (Photos, Notes, Events, Videos, Links), and you can have a maximum of 4 (including the Photos tab) displayed, with the rest hidden.

IMPORTANT: Page admins will see ALL of their tabs revealed by clicking the arrow. Non-admins will see a maximum of 12 tabs (including Photos), with 4 displayed and 8 hidden.

How to change the order of the Custom Image Tabs (aka “Views”)

You can change the order of your Custom Tabs EXCEPT for the Photos tab which is fixed at the first position.

Click the down arrow to the right of the displayed tabs (the number next to the arrow is how many tabs you have):

Once this screen is open, you can mouse over each tab’s Custom Tab Image to:
- Swap the position of one tab with another;
- Remove a tab from the Favorites (all the apps, both displayed or viewed via the arrow);
- Edit the tab’s settings;
- Uninstall the app.
To change which tabs show up in your top 4

Click the arrow to the right of the top 4 tabs, then mouse over the tab in the top 4 you want to replace.

Next, click the edit “pencil” icon and select the app you want to have appear in your top 4. Voila!

You can use the above method to re-order all of the tabs on your Page.

To change the Custom Tab Image

As mentioned above, you can change the Custom Tab Image for all tabs EXCEPT the tabs for Facebook’s own apps.
1. Click: Admin Panel > Manage > Edit Page > Apps;
2. Click “Edit Settings”;
3. Next to “Custom Tab Image” click “Change”.
The page where you can upload a new image actually (at this time) opens in a new window or tab:

On this page, click “Change” and select and upload your image. You can upload a 111 x 74px image to replace the one that’s there.

The screen where you upload a new image is in a new tab or window, so after you’ve uploaded a new Custom Tab Image, close that window (or tab) to get back to your Edit screen where you then must click “Okay” to finish the process.
How do I control the photo that appears in the “Photos” Custom Tab View?

This has been a bit buggy at rollout, but I believe Facebook intends this to be the latest uploaded photo.

Unfortunately, at this time there doesn’t appear to be any way to control which photo shows up in the 4-tab row, like you could with the old Photostrip (the 5 thumbnails under the Page name), where you could mouse over the displayed image which would then display an “x” which, when clicked, deleted the photo from the Photostrip.

TIP Until Facebook introduces a way to curate the image for the Photos tab, if you upload an image but don’t want it to replace your Photos tab image, re-upload the image you DO want after the image you DON’T want.

Posting content to your Timeline Facebook Page

There are some great new features for posting status updates to your Page, including

“Pinning to the top” — making updates “sticky” so that they remain at the top of your Wall;
“Highlight” updates to give them more prominence by extending them to 2 columns.

Here are the details:

How do I keep a status update at the top of my Page?

This is called “pinning” a post, and you may recognize this feature from blogging where you can make a post “sticky” so that it always remains at the top of your feed.

As shown above, click the “pencil” icon at the top right of your update, where you can select among the options to pin it to the top, change the date, hide it or delete it.

You can un-pin a post at any time, but the maximum time you can pin it to the top of your Wall is 7 days.

Strategy Tip: Come up with a weekly posting feature — Fan of the Week, Blog post of the week, or a question for your fans that stays up at the top each week — to promote engagement.
How do I highlight a status update?

The “Highlight” allows you to have your status update extend over two columns. As shown in the image above, just click the “star” icon to highlight the update; click it again to un-highlight it.
Can I both highlight a post AND pin it to the top?

Nope. One or the other, but not both!

Custom iFrame Tabs — WOW!

This is a big one for brands and may, perhaps, make up for losing the ability to set a default landing tab.

Custom Tabs can now be displayed at a whopping 810px! The width can be specified in your app settings:

You also have the option to keep the tab width to 520px. If you choose this option, your canvas page will display centered in the 810px area provided by Facebook.

Whichever width you choose will be the width of the iFrame for your canvas page content.

If your app is 520px, you’ll see something like this (note the canvas page is centered):

And if your app is 810px, you’ll see something like this:

Where’s the Like Button on my custom tab?

If you don’t see a Like button on your custom tab, it’s because you’re already a fan.

Facebook’s intent with these wider tabs? Think: Your Website on Facebook…

Yes, with most of the Facebook chrome removed and all that screen real estate, you can now have a version of your website right in Facebook!

This would keep users within Facebook by providing users with a more website-like experience, thus reducing the need to send people back to your actual website.

OK, that may sound cynical, but think about it. The more users stay on Facebook, the more they see advertising, which is at the core of soon-to-go-public Facebook’s business model.

I wouldn’t be surprised to see some advertising sneaking onto these lovely widened custom tabs.

A few other cool new Timeline for Pages features

The “masthead” is replaced by a navigation bar when you scroll beyond it, solving the “below the fold” problem. The navigation bar remains at the top of the screen as you scroll down.:

You can use this reduced navigation bar to sort posts, see custom tabs, and more.
You can now send private messages to Pages. When on a Page, click the “Message” button below the Cover Photo to write and send your message. Of course, this could become a source of spam for admins, but they should be able to block abusers;
You can back-date your posts by clicking on the “change date” icon in the dropdown menu on each post (under the “pencil” icon);
Pages can add “milestones” with images, to any point on their timeline. Brands can use this to highlight important events and company history.

So that’s Timeline for Pages! We think it’s a great change (except for losing the default landing tab!). What do you think?

Additional Resources

Technorati Tags: Facebook, Facebook marketing, fan pages, timeline

The Best Options for Facebook Polls

Analisa — Tue, 14 Feb 2012 20:49:48 +0000

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.

Example: British Sub Aqua Club

Takeaway: While I think that the British Sub Aqua Club did the best that they could with the poll, I think this poll app is lacking in the design department:

The tab feels really cluttered with lots of options and links;
The questions themselves are not prominent enough;
The Sharing feature (“Publish my Vote”) is not very enticing.

Facebook Polling Options that offer Facebook Integration

Vizu Polls is a free Web poll service that lets you embed your poll onto a Facebook Page. Read more about how to easily add polls from Vizu to Facebook.

Zoomerang offers a basic account for free. Signup and start creating polls that can be embedded on your website. Zoomerang polls are also available on Facebook.

Check out this comprehensive list of 18 Web-poll platforms and apps, some of which also offer Facebook integration.

Facebook Questions — a Great Polling Option

We first wrote about Facebook Questions when it first appeared in early 2011.

Unlike other free poll apps, it does not have ads. The interface is clean, consistent with the Facebook look and feel, and is pretty intuitive. Of course, it’s not customizable at all, but it’s built right into your Page.

The best thing about Facebook Questions is its inherent viral nature. When your fans participate in a poll via Questions, their action will appear on their profile and in their friends’ News Feeds. Their friends can participate, as well, so you will draw attention to your Page through your Fans.

It’s easy to try out Facebook Questions. You can follow the instructions in our previous blog post, or read more about the app in Facebook’s Help Center.

Personally, I think Facebook Questions is the best free poll option available on Facebook.

Paid Poll Options — Some Commercial Polling Apps for Facebook

If you want more features than Facebook Questions offers, you can pay for polls with more options for customization.

Polldaddy. You have to pay for the Poll Daddy service first, then you can use their Facebook app to create polls for your Facebook Page.

Here is a blog post that explains how to add a Polldaddy survey to your Facebook Page (with video).

Involver

Involver offers a poll app to users at their “Professional” subscription level and above. See their pricing options here.

Wildfire

One of the big Facebook app companies, Wildfire offers a wide variety of products, one of which they call “Trivia and Quizzes.” You do have to pay a daily fee on top of the flat rate for their promotion apps. You can see their pricing options here.

Custom Facebook Polling Apps

The other Facebook polling option, if you are willing to spend the money, is to hire an agency to build you a custom polling application. This would give you the maximum level of customization. You would want to include Share functionality so that participants could pass the poll along to friends, something any capable Facebook shop — like HyperArts! — could handle.

One of the best examples that I have seen is on the 2012 Matters Facebook Page.

The Poll lives on a custom tab where you can pick “the issues that matter most to you” by clicking and dragging icons into your map area:

Then users can share their poll/survey results on their Walls. In this case the poll was about meaningful topics, so users are probably much more likely to share their results with their friends. Making Sharing really easy is an important part of custom poll building. Make sure that you talk to your developer about this step when planning a custom poll app.

Takeaway: While it may be more expensive then the other options in the short term, paying for a custom app may actually be cheaper in the long run. The other paid-app services often charge a flat fee PLUS a daily or monthly fee for the length of your survey. Custom apps can often be re-used or re-purposed by your developer for future use.

Of course, if you don’t want to spend any money on a Facebook poll, you can just ask questions of your Fans on your Facebook Page Wall or via the Facebook Questions app!

Tell us, what is your favorite way to survey your Facebook Fans?

Technorati Tags: apps, custom tabs, Facebook, involver, poll, polldaddy, share, survey, viral, wildfire

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

Analisa — Fri, 03 Feb 2012 18:57:45 +0000

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.

Eliminate HTML Email Nightmares

http://www.emailonacid.com/

So, you’ve come up with a beautiful HTML email design that you’re happy with. Woo hoo! Before you start mailing it out, you’re going to need to test it. With Email on Acid, you can preview your email in 48 variations of the most popular email clients and mobile devices. Their code validation and analysis tools will help you identify rendering issues – fast! Please note, we do not recommend taking acid while using this application.

Bill Dailey / Project Manager & Programmer

Using an .htaccess on your Apache server

http://net.tutsplus.com/articles/news/htaccess-files-for-the-rest-of-us

If you host your website on an Apache-based webserver, you may have seen a file called .htaccess in various directories on your server. This file can be modified to do all kinds of cool things – redirecting old page to new ones, restricting access to files, and custom error pages. This article from TutsPlus will get you started.

Allowing your images to be responsive

http://24ways.org/2011/adaptive-images-for-responsive-designs

You may have heard all the buzz lately about “responsive” web design — allowing your website to adapt so that it looks great on any screen size. One of the most challenging aspects of creating a responsive design is scaling images to different sizes. This article from 24ways has some great techniques that should help make your images look awesome.

Fun with QR Codes

http://speckyboy.com/2012/01/26/creative-uses-for-qr-codes

A hot trend over the last few months has been QR (Quick Response) codes, which allow you to scan the code with your smart phone to be taken to a website. This fun article takes a look at some more creative uses of QR codes out in the wild.

Daniel Dy-Liacco / Front-end Developer

Gridpak – The Responsive Grid Generator

http://gridpak.com/

Gridpak is an online responsive grid generator that is “the starting point for your responsive projects.” The resulting download contains PNGs of each grid you created, CSS files that are IE8+-compatible but also contain more experimental CSS properties such as media queries, and a JavaScript file that allows you to toggle your grid on and off in a browser.

Responsive Design Sketchbook

http://appsketchbook.com/products/responsive-design-sketchbook

As invaluable as Gridpak may be in starting a responsive project, some of us like sketching things out first. This 50-page sketchbook priced at $12.95 helps make this easy. Each page in this sketchbook provides multiple grids for thumbnail sketches of various viewports and a grid showing break point indicators.

HTML5 Please

http://html5please.us/

Itching to dive into HTML5 and CSS3 but you’re not sure which features are ready for primetime? This site tells you what they are and how to use them.

Rachel Tietjen / WordPress Programmer

Tutorial: Adding Fields to the WordPress Media Gallery

http://www.billerickson.net/wordpress-add-custom-fields-media-gallery/

Learn how to add custom fields to the media uploader in WordPress that allow you to attach additional meta data to images and other media. The examples in this tutorial show you how to add linked captions and how to specify which images you want to use in your gallery. Super useful ways to extend the gallery functionality!

PLUGIN: Additional Image Sizes

http://wordpress.org/extend/plugins/additional-image-sizes-zui/

Create additional image sizes (in addition to the predefined WordPress defaults: thumbnail, medium and large) for your WordPress site/blog. It will also re-size the predefined WordPress sizes if the size(s) in Settings > Media have been edited. This is great if you (or a not-too-tech-savvy client) want to be able to add an image of a specific size to a page or post using the media uploader, it will add your new custom size option to the uploader window.

Tutorial on How to Create CSS Box Shadows (box-shadow)

http://www.css3.info/preview/box-shadow/

This may be old news for some people, but here’s a tutorial with examples on all of the different ways to implement the box-shadow style, one of CSS3′s awesome features!

Share your cool web links in the comments!

Technorati Tags: box-shadow, coding, CSS, htaccess, HTML, HTML5, javascript, plugins, QR codes, responsive, responsive design, web design, WordPress, WordPress Plugins

HyperArts Blog

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

Project Overview

Our Approach to Design

Our Approach to Development — Database Integration

Website Features

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

So is Facebook Rolling Out a New Profile Picture Size, or….

This is affecting both Personal Profiles and Brand Pages

Peeking Under the Hood — the Underlying Source Code

The Two Factors that Appear to Affect the Displayed Profile Picture Size

What should you do? Change your Profile Picture, or hold off?

Stay Updated on This

Share your experience in the comments

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

The “Secure Browsing” Option for Facebook

What Secure-Browsing Users will See if you use HTTP for both URLs

If You Use “HTTP” for both the “Page Tab URL” and “Secure Page Tab URL”

If You Use “HTTPS” for the “Secure Page Tab URL” but the Page is NOT Secure

The Takeaway: Make sure your Facebook Page Tab is Secure!

Additional Resources

How to Create a Facebook App for your Timeline Page Tab

Creating your Facebook App

Entering the “Basic” values for your App

Your Facebook App ID

Integrate your App as a “Page Tab”

Page Tab Values

Adding your Page Tab App to your Page

Additional Resources

Timeline Cover Photos: Are You Breaking the Rules?

Oh, The Possibilities!

New Rules

Breaking Badly

Corona

Volvo

Have1.com

Social Heavy

Walking the Line

The Apprentice Show, NBC

Etsy

Yardsale

Armani

Top of the Class

Verizon

Hearsay Social

Mariah Carey

MTV

Share Your Examples

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

Cover Photo / Profile Picture Tutorial + Downloadable Photoshop Template

Creating the Cover Photo and Profile Picture images in Photoshop

Make sure your Profile Picture works well as a thumbnail / icon for your brand!

Aligning the Cover Photo and Profile Picture to create a seamless whole

How to Use the Timeline Masthead Photoshop Template

Export the Profile Picture image as GIF, JPEG or PNG

Export the Cover Photo image as GIF, JPEG or PNG

Upload the images to your Facebook Timeline Page

Share your creative work…

Related Articles

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

A whole new world: Facebook Timeline

Timeline’s New Features — Better Fan Engagement

Curating Your Content Spatially AND Temporally

How the Wall used to work

Why Timeline is better for engagement

Infinite Scrolling = Addicted to Scrolling

How can Page Admins utilize this opportunity?

Take advantage of highlighting, back-dating and milestone features

How to create Timeline milestones

Examples of Pages with Timeline History

Use Timeline to lead your Fans to your new content

Facebook Timeline for Pages – Frequently Asked Questions

Frequently Asked Questions: Timeline for Facebook Pages

Rollout details

How much time do I have to change my Page to Timeline?

Can I preview my Fan Page in Timeline before it goes live?

How do I publish my Timeline Fan Page once I’m ready?

Administration

How do I edit my Timeline Facebook Page?

How do I specify a default landing tab for non-fans?