Guide to the New Facebook Page Design
Recently, Facebook rolled out a major overhaul of their Pages. We studied the new design extensively to see what was new and improved. In this guide, we will go through the Facebook page changes and their impact, from a design, usability and web development perspective.
Design Changes
Let’s go over some of the major design changes to the new Facebook Pages.
No More “Standard” Tabs
The standard tabs that we’re used to seeing in the top area are now gone. They’re accessible on the left hand side, under the profile picture. The brand page designs and interface is now in sync with the personal user profiles where tabs are accessible under the user’s profile photo.
Note: the new tabs will appear in the form of a list (there will be a maximum of 6 above the fold).
New Photo Strip
Like the new Facebook profiles, the new pages will have a Photo strip above the Wall (with the most recent photos you posted or tagged). When another brand or individual tags your company in a photo, that photo will appear in this section, giving your brand less control of the images shown. The downside: It’s now more essential to have someone monitor your Facebook Page regularly for inappropriate photos of your brand.
Profile Picture
The maximum size for the profile picture has been reduced from 200x600px to 180x540px.
User Interface Changes
Here are some functionality and interface changes on the new Facebook Pages.
Admin View of Wall (See Hidden Posts)
Users can now select the “Admin View” option (below the profile photo) and view Hidden Posts. In the example above, someone had spammed our wall with a magical diet post, which we then hid (we were also able to ban the user). To do this, on your own Wall, click the “X” at the top right corner of any post and select the option from the drop down that comes up.
Post as Your Brand
With this new powerful feature, you can now post on other Facebook Pages using your company’s Facebook Page. On the right-hand side, you’ll see a link that says, Use Facebook as [your brand name]. Click on that to start using this feature. You’ll then get this modal window:
This can be beneficial in driving traffic to your Facebook Page, but be careful not to abuse this, as the other Facebook Page moderators can block your post and ban you from their wall (and we assume that if that happens enough times, your Facebook Page might be closed down by Facebook). Keep conversations meaningful!
Your Brand Can “Like” Other Pages
You’ll notice, in the screenshot above, that your Facebook Page can “Like” other pages.
Note: your Likes will show up in your Facebook Page, and when you go to your home page (while logged in), your newsfeed will populate with feeds from the brands you’ve Liked.
Fans Count Has Changed
If you’re an admin of the Facebook Page, you’ll be able to click and see the names of the people who “Like” the page. From what we can tell, it’s in order from most recent “Likes”. That is to say, the first person that shows up on that list was the last person to click “Like” on your Page.
The most important change that we see is that non-admin users will not be able to view the username/profile of those who “Like” that particular brand. This functionality will only be made available to the administrators of the Page.
Categories
Now displayed on Facebook Pages is your organization’s category (which can be adjusted). We recently changed ours from “Local Business” to “Internet/Software”.
Development Changes
Let’s look at some web development/web technology related changes to Facebook Pages.
Facebook iframes Now on Tabs
From a web developer’s standpoint, this is the biggest and best change Facebook has rolled out. What does this mean? No more Facebook Markup Language (FBML)!
Any Facebook app developer will tell you about the challenges of using and learning FBML. It’s limited, choppy and doesn’t allow you to build those fully customized Facebook applications within a Facebook Page tab.
Functionality is limited in the Facebook Page tab because of FBML, which usually means anything robust will have to be developed as a full-blown Facebook application.
The most recent example is the one we created for HomeSense (that we couldn’t previously do on a Page tab). During the planning phases, we were hoping to rollout this app within a Page tab, but Facebook had delayed their iframe rollout from Q4 2010 to Q1 2011, so this type of app wasn’t possible within the Facebook Page. Today, it can easily be implemented thanks to the iframe rollout.
To use iframes, you need the most up-to-date layout. First and foremost: in order to use iframes, the page must be using the new Facebook Page layout. If you’re an admin of a Facebook Page, you can check the status of your page. It’ll look something like this:
Custom HTML and JavaScript
We conducted tests and found that HTML and JavaScript work flawlessly without restrictions on the iframes. More specifically, we were able to confirm that jQuery works perfectly as well.
However, we noticed some issues in the iframe display.
The iframe window height cannot be bigger than 800px. It seems that Facebook hard-coded this value (we viewed the Facebook HTML source code). When the iframe content is longer than 800px height, scrollbars show up in the iframe.
This also causes issues on some browsers, and adds another scrollbar on the main window (see below).
Facebook API for Facebook Pages
In the initial request parameters, they send us the following data:
page id: to know the source page where the tab is installed
locale: to know the viewing user language so we can show Spanish only or French only content to these users, rather than creating a new tab or making a bilingual tab
country: to know the viewing user’s country
Liked?: if the viewing user Liked the page; if not, we can show a “pre-like” conversion page encouraging them to hit the “Like” button to get access to page content
Admin?: to know if the viewing user is an administrator of the Facebook Page
Saving User Sessions
This part is important if you’re running contests or creating applications that are user specific. In our initial research, we found that we can save sessions without any problems. So when the user enters the Page tab and authenticates itself, he/she can return (in the same browsing session) again and we will not need to authenticate. This is something we couldn’t do before using FBML.
Summary
What does all this mean to you as an account manager, digital account representative, freelancer or social media expert? Likely, fewer blank stares from clients and a greater overall sense of control over their brand on Facebook.
With the changes scheduled to take full effect March 10, 2011, you should now be ready to take full advantage of the changes.
Here’s the summary of changes:
Profile photo now has a max size of 180x540px.
Display page category.
Photo strip shows most recent tagged or posted photos. They are randomized. Watch out for inappropriate photos tagged with your Facebook Page. The dimensions of thumbnails are 96x67px.
Admin view.
Filter wall posts by your Facebook Page only or by everyone.
Tabs are now on the left (under the profile photo) in the form of a list (maximum of 6 above the fold). Also, switch to Admin View to see hidden posts.
If you’re an admin, you can view the people who have “Liked” your brand. We noticed it’s in order of most recent Likes. If you’re not an admin, you can no longer view those who have “Liked” the brand page.
Your brand page can Like other pages. They’ll show up on your brand page.
Other changes not shown in the image above:
You can see a Newsfeed of updates from Liked Pages on your home page when using Facebook under your Facebook Page name.
Pages now support iframed tab applications.
Email notifications when users post or comment.
SEO Beyond Your Site
The most common initial SEO strategy is to follow best practices for building user-friendly, well-formed websites. Optimizing your content and HTML, using good web page titles and generating links to your website are all ways you can help search engines such as Google, Yahoo! and Bing index your site better and more accurately.
However, because of an updated Google search ranking algorithm (dubbed “Panda”) — which aims to reduce the efficacy of content farms with shallow content that often have artificially inflated backlinks and black hat search engine optimized content — the status quo has drastically shifted.
Google, along with other search engines, has gotten smarter and now includes social signals as a top ranking factor.
In order to succeed in this new search engine landscape, we must therefore look beyond our own website.
In this article, I’ll share some tips for using social media to help with SEO. The fundamental idea I want to convey is that these tips are good practices to begin with and, when applied correctly, will stand hand-in-hand with your social media engagement efforts. Just like with any successful search engine optimization plan, when you put your users’ interest first, good search engine rankings often follows.
The New Era of SEO
Google has made it clear that social signals are now an important part of SEO. I like breaking down social signals into two main categories: Virality and Social Media Presence.
Virality
Virality is when your content has a strong reach in the social media realm. Websites like TechCrunch, Mashable and The Oatmeal have strong virality because the content they publish — breaking news, controversial topics and humor — is sharable and well liked by social media users. These sites also have strong communities and loyal followers who are vocal and who love to share content.
Social signals defined in this category are thus a mode of voting. Each retweet, Facebook Like, Google +1, Digg upvote and so on can help search engines distinguish which links their users will likely prefer over another.
Social Media Presence
If your site is just starting out and hasn’t garnered a large base of fans yet, it will be an uphill battle to rank well with virality. However, creating and actively maintaining a presence in social media has proven to increase the authority of your website in the eyes of search engines.
You don’t have to produce viral content on a regular basis, but if your Facebook Page gets comments and your Twitter account gets mentions, then it’s good for your site.
If you’ve neglected social media as part of your site-growing strategy, SEO is a reason for you to start paying attention to it.
How to Optimize Beyond Your Site
Let’s talk about some strategies and tips for optimizing your site through social media.
Being the most popular right now, the obvious social media sites that we should talk about are Twitter and Facebook, so let’s begin there.
SEO Using Twitter
Google looks at specific elements from Twitter and Facebook to use as ranking signals, as discussed by Google’s head of webspam team, Matt Cutts, in this video.
For Twitter, Google looks into a Twitter profile’s biographical data such as links it mentions, its geographic location and the number of tweets, mentions and retweets it has.
The more a Twitter account is mentioned, the more authority Google will give it. Thus, a Twitter account with more authority tweeting about a web page on your site could have a bigger impact on your search engine rankings than one that doesn’t have as much authority.
Another important ranking factor is the keywords that surround a link contained in a tweet. For instance, SEOmoz, a highly-regarded SEO blog, reported an unexpected Twitter case study a while back that showed a single tweet being able to help generate a fourth spot Google ranking as well as 160 unique visits.
Because the tweet contained the words, “Beginers Guide”, even in its misspelled form, a Google search query of “beginner’s guide” ranked the post it was linking to in the first page of the search engine results on the day the tweet was made.
SEO Using Facebook
Facebook optimization is very similar to optimizing a regular website. Content should have SEO-friendly titles and text when being posted to a Facebook Page.
In terms of Bing, which has some different SEO requirements, the number of Facebook Likes and Facebook shares help organic rankings, as highlighted in a post on TechCrunch by Erick Schonfeld. In the post, Schonfeld says that Facebook could soon look at social signals to “identify experts related to various searches,” including those who aren’t part of your friend’s list.
Another benefit of having a Facebook Page and Twitter account is they take up space on the first page of Google search engine results when a search query mentioning your company is made. This can help replace spam and unrelated web pages that share the same keywords.
7 Ways to Get More Referrals for Your Web Design Business
A long time ago, I heard one businessman ask another, “What can I do to help you out?”
The man thought for a moment, and then said, “The best thing you can do for me is refer someone else my way.”
He was probably right. Because customers value the advice of people they know, referrals are often the best leads a business can get.
What’s the best way to get more referrals for your web design business? Here are seven strategies that have worked for me in the past.
1. Produce Better Work
It might sound simplistic and you might think that you’re already doing great work, but I can guarantee that if you actually spend some time today and dedicate yourself to getting better, then you will.
Better work means better results, and better results mean better clients.
If you want clients to rave about your work and spread the message far and wide, then you need to do work worth raving about.
2. Ask for Referrals
You would be surprised how often we miss opportunities simply because we don’t ask for them.
One solution that I have found to work well is to schedule “the ask” just like you would any other business activity. Develop a checklist of items that you complete for each project. These are important things that should occur with every project you take on — scheduling milestones, invoicing, etc. — and then add “asking for referrals” to the list.
Don’t make referrals a one-off task that you do when the mood is right. Always ask for them in an appropriate manner, and you’ll be pleasantly surprised by the results.
3. Look for Buying Symptoms
One reason many people don’t get as many referrals as they would like is that they don’t know that they should be asking for them.
Knowing how to get referrals for your business starts with understanding how your potential customers talk.
For example, what do people say when they go to the chiropractor? “My back hurts” or “I have lower back pain,” right? Those are the symptoms of someone who might buy from the chiropractor.
What are the symptoms of someone who might buy from you, a web designer? If you specialize in a certain type of client, what are those people saying before they get ready to buy?
Use the same phrases and words your clients will use, not industry jargon. If you know what potential clients say before they buy and how they say it, then you’ll be in a better position to find those people and ask for referrals.
4. Ask for Introductions, Not for Business
If there’s one thing that customers are cautious of, it’s desperation. If you seem desperate for business and willing to take on anyone, then the message you’re sending is that you must not be in high demand and/or aren’t very good at what you do.
You might be saying, “But wait, I thought you were supposed to ask for referrals?”
Yes, you are — and the best way to ask is to request for an introduction to someone new, not for someone who would buy from you right away.
5. Work in Exchange for Referrals
This may sound strange, but hear me out on this one.
Working for free and then getting a couple of excellent referrals out of the job can be a savvy move if you want to improve the type of clientele you work with. This is especially true if you are trying to get larger clients and you know one or two people who might be able to get you access to them.
There are two critical points to this strategy.
First, you can’t work for referrals all the time. Do it with well-connected clients once or twice, and you’ll be set. Referrals, after all, don’t pay the bills.
Secondly, there should be a clear understanding from the beginning that they are working with you in this capacity. They should know that they are expected to put you in touch with potential clients for the work you are doing.
6. Reframe Your Message and Enter New Areas of Business
Sometimes we focus so much on a specific niche that it feels like we know everyone in the industry and there just aren’t many more referrals to go around. If that’s the case, then it’s time to reach out to different customers.
For example, I just landed a referral recently because I branched out into a community that I hadn’t sampled before — freelance writers.
Don’t be afraid to stretch outside of your typical client base and ask if there are people you can help. It might be the perfect way to find another market that needs your services and generate a new stream of referrals.
7. Refer Other People Who Do Great Work
The strategy here is to build a network of professionals who refer each other’s services. For example, maybe you’re a UI designer and you know someone who’s great at Ruby on Rails and someone who’s great at PHP and someone who’s great at iOS app development.
Whenever it’s a good fit, you can refer a customer of yours to the appropriate person. In turn, a customer of theirs looking for a UI designer will be referred to you.
The result is that you extend your reach and have several people searching for new business instead of just one.
What about you? What are your best ways to get a referral? Share it with us in the comments.
Creating Websites Optimized for Google’s
Whether you’re in the process of building a new website or redesigning an existing site, it’s vital to build it with search engine optimization (SEO) in mind.
The king of search engines, as everyone knows, is Google, making up over 65.3% of all search traffic (in October 2011).
Google’s goal is simple: to give their users the most relevant, high-quality search engine results as accurately and quickly as possible. So in early-2011 Google introduced an update to their search engine algorithm, dubbed Panda, as part of the company’s continual pursuit of that goal.
For those of you who are unaware, the Google Panda update reportedly affected the rankings of almost 12% of all search results — more than any other update before.
Since then, Google has rolled out several other updates to Panda, dramatically changing how thousands of websites are ranked.
Those that were considered to be high-quality sites saw their rankings improve, while those of supposed low-quality essentially vanished from ranking at the top.
So now, the obvious question is this: How can we make websites that are seen as high-quality in the eyes of Google Panda?
Read the following tips to make sure your site is optimized for Google Panda.
Design for Engagement and User Experience
To put it simply, Googlebot is starting to view websites more and more like humans. Thus the design of a site is going to start playing a much larger role in how it’s ranked more than ever before.
The Panda update is looking closer at several metrics to see how engaging and user-friendly a web page is. Some metrics that help quantify engagement and user experience quality are:
Amount of time spent on the website
Bounce rate
Number of web pages per visit
Page response times
Conversion rates
These metrics give you a clue as to how good a website is in keeping visitors engaged. For example, a website with a high number of web pages per visit could mean that the visitor thinks the website is interesting and engaging.
Well-designed sites are typically more visually pleasing, easier to understand and often fare well in the metrics mentioned above than those with poor designs.
Thus, your goal is to craft a website with a great user experience that captivates your audience. In addition, make sure that the website is optimized for speed, as this also affects the user experience and the site’s usability. Remember that usability and SEO go hand in hand.
Focus on Content Quality
Google likes content. This is not a newfound idea, but it is one that is often neglected. You have to be dedicated to developing high-quality, original content.
Try to become an authority in your industry by writing content that visitors would want to bookmark, share or recommend.
Google specifically states what they look for in a high-quality site by providing you questions to ask yourself. Here are just a few questions they suggest you ask when you produce content:
Would you trust the information presented in this article?
Is this article written by an expert or enthusiast who knows the topic well, or is it more shallow in nature?
Does the article provide original content or information, original reporting, original research, or original analysis?
As you can see, a large emphasis in quality is being placed on the creation of content. This must be at the forefront of any design or website management duties.
Avoid Too Many Ads
Again, this goes back to designing with humans in mind. Having too many advertisements can make Google think the site exists just to serve ads rather than provide authoritative information.
Avoid Duplicate Content
Avoid having the same content being displayed on any pages. Each web page should have their own unique content specifically tied to what that page is about.
A web page should also have its own unique meta description and meta title attributes. For more information on this topic, read 5 Common SEO Mistakes with Web Page Titles.
Less is More
Over time, if a website is not regularly tended to, it can begin to have hundreds of pages that, many times, even the website manager is unaware of.
Google states that having a lot of poor quality pages on your site can bring down your rankings, even if you have plenty of high quality pages.
In these cases, it is best to consolidate to create a cleaner experience for the end user.
Ensure High-Quality Code
It is important to run your website through code quality assurance processes. Good markup hints that the quality of the website is also good. At the simplest level, you can just use the W3C Markup Validation Service to ensure your HTML complies with W3C standards.