1. Create social media presences for your company

At minimum you should have a page on Facebook and Twitter. If you are a brick and mortar establishment, you probably have a Foursquare page already (created for you by your social media savvy customers.) If this is your first foray into social media, start slowly and ramp up. Choose one network and experiment, then add another and so on. Experiment, explore and have fun.

Major networks to consider:

• Facebook
• Twitter
• LinkedIn
• Google+
• YouTube
• Foursquare
• Yelp

2. Create custom tabs on Facebook!

The new Facebook Timeline for pages provides administrators the opportunity to promote their content easily on a much wider custom tab. There are a variety of custom tab solutions available, including My Tab which provides a fully customizable canvas for you to present your brand.

Some possible uses for tabs:

• Show your work
• Highlight non-timeline achievements
• Provide fans with coupons
• Run contests and giveaways
• Provide directions
• Show youtube videos

3. Use custom images for your custom tab!

Custom tabs are great if people open them, so make sure you find a compelling image or way to draw attention to the tab(s) you want people to interact with. You can replace the default tab image at the bottom right of the new Timeline header.

How to change the image:

• From your Admin Panel
• Click “Manage” -> “Edit Page”
• Next click, “Apps” then “Edit Settings” for the tab you wish to modify.
• Here you will find the ability to modify the Tab Name which appears under the image as well as a way to upload a new tab image.

4. Update your website!

Social networking sites may be all the rage, but it doesn’t diminish the importance of keeping your website current. Be sure to make your content fun and shareable. Top 10 lists, funny photos, and info-graphics are all great content that can be generated with some planning and will keep your visitors returning. SEO is still important but in the realm of social media, it matters less.

5. Have a large compelling photo on your content

The jury may be out on the long term value of Pinterest, but it’s clear its popular and continuing to gain traction. Pages without images are boring and can’t be pinned. Ensure you have at least one large, eye catching image on your page that users can ‘Pin’. The added benefit is that other social networks will use that image as well, so it’s a win-win. Oh, and a cute picture of a cat never hurts.

You can find lots of great photos for just a few dollars each at Shutterstock or Photos.com.

6. Make your content easy to share

Add share, tweet, like, and + buttons to your site! Don’t make it harder than it needs to be for people to share your content. Not up to making lots of changes? Use one of the all in one solutions like ShareThis or AddThis, both have easy to install plugins that will work with the major content platforms you are probably already using.

Since you made it this far, please share this post with others!

Some Resources:

• ShareThis
• AddThis

7. People access Facebook all the time – Post at different times!

When is the best time for you to share content in your social media channels? It’s different for every market and product. Generally, you’ll have a feel for when it’s best to share, but consider using applications to help you optimize your sharing cycle. Tools like Buffer and Hootsuite provide a way to schedule outbound content easily. Consider posting daily if you can, but don’t go to crazy, it’s easy for people to hide all your content, unfollow and unlike you.

Some Resources:

• Buffer
• Hootsuite

8. Read the comments (and respond!)

Social media works when it’s social (duh!) If your content streams are broadcast only, you might re-think why your doing it. It’s critical to engage with your audience. Who has the time right? You do, trust me, it’s not as daunting as you think. Smaller brands might only see 2-3 questions that need responses in a week. Consider creating a separate email address for notifications so they all go to one place without interrupting your regular email. Then check it once a day. You will likely need less than 30 minutes every day or two to keep up with everything that needs responses.

9. Evaluate the return on investment

Make sure your social media efforts are creating value for your company. This is challenging since it can be hard to measure how much revenue a single Tweet creates. Think of this as an advertising endeavor. Outline how much money/time you would spend for traditional advertising and instead spend that money/time on social media. If you aren’t seeing an increase in business, social media might not be the right channel to reach your customers. Dial back the social media efforts and try something else.

Some resources:

• Book: ROI of Social Media: How to Improve the Return on Your Social Marketing Investment
• Book: Social Media ROI: Managing and Measuring Social Media Efforts in Your Organization (Que Biz-Tech)
• Google Scholar Journal Articles

10. Reuse your existing content

Look through your logs and find which content has resonated well with users in the past. Did you write a blog post that garnered a lot of attention? Re-share that content now through your social media networks. If it is out of date, consider publishing a revised version referencing the original and providing commentary on what has changed. If you aren’t tracking your website traffic, you should be.

Some resources:

• Google Analytics
• Kiss Metrics
• WordPress provides post analytics too!

11. “Don’t Panic!

… and always carry a towel.” ~ Douglas Adams.

Seriously, people will say rude and mean things online about you and your brand. Don’t panic and don’t over react. Be thoughtful and considerate in your response (if one is even warranted).

“When angry count to ten before you speak. If very angry, count to one hundred.” ~ Thomas Jefferson.

If you are unfamiliar with the Adams quote, it’s from this book

12. Think before you post

Check your spelling and punctuation where appropriate. Be mindful of what you are posting and be careful when sharing opinions. While most of the world will never see what you post, they can read it later. Be sure you leave a digital trail you and your company would be proud of.

“Don’t tweet or blog anything you don’t want to see on a billboard,” ~ Scott Stratten

13. Topical and relevant content works best – plan ahead

In the US, few people are thinking about Thanksgiving in July. Be smart, consider creating an editorial calendar so you can plan some content in advance. If your US based and find photographs resonate well with your audience, buy your 4th of July fireworks images in June and have them ready to share when the time is right. This is another great use for applications that schedule your updates.

Choosing a good cover image is important. The image can be used to convey an emotion or key value that you would like associated with your brand. The following examples and analysis illustrate how three major brands are using the new Timeline to engage with their customers.

Starbucks

Starbucks has removed all words from their logo, allowing them to diversify their brand beyond coffee. However, they don’t want to lose the association with coffee. The Timeline Cover helps them to keep the association by showing coffee beans, firmly reminding visitors that they are still about coffee. The image also has a vintage effect on the left side. It makes the image appear older, reminding people that they’ve been doing this for a long time and are experienced.

Ford Mustang

Ford has taken a different approach with the Ford Mustang product page. Ford created a composite image to show a product detail but also convey power and speed through the use of a car smoking the tires. This hero shot of the product in action resonates with their target demographic, the aggressive look of the front end when it’s still and the taillights are all your friends will see when the car is in motion. They establish themselves as the front runner. They also cleverly use the grille and the iconic stallion as the profile picture, effectively merging the two.

Facebook

How does Facebook use the cover image? They chose to use a data visualization of the global connections between users. It shows the interconnectedness of the world and re-enforces not only their brand of being a network, but also demonstrates their scale in a visually compelling way. They also use blue to illustrate the connections, their corporate color, to further cement the brand.

What Can You Do?

These three brands have art departments to create images for their brands which most smaller companies do not. Brands and companies that lacking those resources can look to stock art and stock photos. Sites like photos.com provide a searchable database of great images that you can license.

For example, searching for “coffee beans” returns over 8,000 images that would all be suitable for a Facebook Cover! Photos.com offers all images in multiple resolutions. The “Web Plus” resolution, which runs about $5, will give you sufficient detail in a cover image. If your budget is a little tighter, Facebook will accept images that are as small as 399 pixels wide for cover images. These are typically around $2. Lastly, you can also use this art in your printed materials if you purchase the print version for $8 – a great way to provide a consistent image for your brand.

If you have some great imagery and want to explore how it might work on Facebook, AF-Design is providing a free PSD to help layout your Facebook Timeline.

Disclosure: The links to photos.com are affiliate links. AF-Design earns revenue from sales originating from this post.

Facebook will automatically transition all pages on March 30th. Page administrators are advised to be proactive in preparing for the transition now. AF-Design has created a Photoshop template to aid in the creation of Facebook design elements. Using this template, graphic designers will have the tools necessary to successfully present their brand on the new Facebook Timeline. The Timeline has three new elements which are similar to the elements of personal profile pages.

Cover Image: An image that takes over the top of the page. This image has two possible initial views when a user visits the page. Users who have smaller monitors or default browser size will see a shorter version of the cover image. These users need to scroll up to see the entire image. The design template provides a layer and guides for aligning your content to maximize the effectiveness of the page. This image should be 851×315 pixels. Facebook warns about placing promotional content or asking for on site actions such as Like, Share and so on.

Profile Picture: An image that represents you or your brand throughout Facebook. The image should be square and at least 125×125 pixels and fill the frame – Facebook will add any necessary borders automatically. Also note that Facebook uses scaled versions of this image throughout the site, specifically on stories you post to your Timeline and those stories that appear in Newsfeed. Experiment with scaling the image you selected and make sure it still looks “good” at 50×50 for the best user experience.

Favorite Application Icons: Images that convey meaning about important/featured applications on the profile. This is a great way to draw attention to your custom Facebook tabs and applications such Tweets and You Tube videos. These should be 111×74. Facebook will apply a stroke and rounded border to the image.

Download the Photoshop PSD of the Facebook Timeline page to get started.

After you have created your visual elements, return to your Facebook page and enter the preview mode for the new profile. In the preview mode, you can upload your creative and ensure everything looks the way you want.

NOTE: Once you publish your page – your default tab will NO LONGER WORK. While this may be a problem in the short term, this is something you should prepare for now. Facebook will transition all pages automatically. The best way to mitigate this is to add a post to your page that features the tab you want to highlight and Pin it. Pinning is done by hovering over the top right of your content, clicking the pencil and the click ‘Pin to Top.’

After uploading your new creative and making the necessary changes to your profile, and if you are ready to go live – click “Publish” and the new Timeline will show for all viewers!

Congratulations, you’ve successfully migrated to the new Page Timeline! Like us to stay up to date on the latest Facebook changes that affect your Page and your applications and share this post with your friends!

1) Timeline is the default landing page. A big change is that administrators will no longer be able to choose a tab as the default landing page. You can choose to keep your existing page design through March 30th, 2012 when Facebook will automatically upgrade all Pages.

2) Cover images! Not unlike the new cover image for Profiles, Pages can now leverage this large visual area to engage users with their brand.

3) Pinning important content. Page admins will be able to pin content to stay present at the top of their tabs. This is important for brands running contests and other promotions to be able to feature the content at the top of the Page for all users to see. Content pinned to the top of a page will stay persistent regardless of updates.

4) Tabs will continue to exist, but they’re changing. Administrators will have the ability to use a much wider canvas for the application – 810px wide in fact! That’s 250 more pixels of space for your content. AF-Design will be making updates to the My Tab application soon to support this wider canvas area.

5) You can still link directly to a custom tab. Before, to link to a tab, administrators would use a link like this:

http://www.facebook.com/application.development.design?sk=app_14167664298

Now, the link will be a little cleaner referencing the application namespace.

http://www.facebook.com/application.development.design/app_14167664298

AF-Design will keep you up to date with all the pending changes, be sure to like us to stay informed!

6) Bonus – you can now add a custom image to promote your tabs on the Timeline! If you have upgraded your page – create an image as 117×74 and click, “Manage” > “Edit Page” > “Apps” > “Edit Settings” > “Change” (Custom Tab Image) and upload your creative.

Pinterest, is a hot new startup that according to their site, “lets you organize and share all the beautiful things you find on the web.” Pinterest allows users to “pin” or share content to a board. Other users can then follow those pins and even repin the content to their own board. See an example Pinterest board about photography here. Ultimately rights holders are concerned that images are used and viewed without their permission.

To answer this criticism, Pinterest has proactively come up with a solution. By adding a simple HTML tag, site administrators can block the pinning tool from adding the content. Kudos to Pinterest for addressing the problem early.

<meta name="pinterest" content="nopin" />

This is a great simple solution, but is site specific in design. Following this to it’s inevitable conclusion, it would only be a matter of time before a series of tags emerge, each specific to a site. This requires rights holders to 1) monitor how different media outlets use their content and 2) be sufficiently savvy to edit their own HTML.

<meta name="pinterest" content="nopin" />
<meta name="facebook" content="noshare" />
<meta name="digg" content="nodigg" />
<meta name="twitter" content="notweet" />

The solution places an undue burden on site owners and content creators to be aware of how each site uses or re-uses content and then requires them to manage it. The web already has several tools for managing how content is used and shared online which Pineterst could use to reduce burden on site-owners while still respecting their intent. None of these are perfect though.

1) Robots.txt (and related robots headers) – http://www.robotstxt.org/
Used by the larger search engines to determine which URL’s should and should not be crawled.

2) Creative Commons – http://creativecommons.org/
A legal structure for the sharing of content in an open way.

3) Open Graph Protocol – http://ogp.me/
A machine readable methodology for describing content and objects online. Heavily used by Facebook and other social networks to provide “share” like functionality.

Instead, content producers should be able to provide limited rights to distribute the content online by specifying in which circumstances the content can be reused. For example, a photographer could permit re-sharing of an image to any site (for example Pinterest) only if the image provides a direct link to the page where it was sourced from. Pinterest can then decide with their legal team if their implementation meets the criteria of this usage. This could all be done through an extension of the Open Graph Protocol.

The protocol could be extended to include a permissions attribute (or attributes) that provide guidance on how the author intends for this content to be re-used. While this doesn’t remove the need for technical savvy, it does eliminate the need for rights holders to monitor how content is being used by the growing number of social media sites. Some potential permission examples:

• noshare – Sites are not permitted to store or share this content.
• opengraph – Sites are required to use content provided (verbatim) in the open-graph tags provided.
• cc_{license}_{attributes} – Provides machine readable usage restrictions based on the current Creative Common licensing structure. (example: cc_3.0_sa)
• link – provide page title and link (only)
• text – permit reuse of words
• image – permit reuse of images
• data – permit reuse of data (current temperature, weather etc)
• …

This list is hardly exhaustive and would need to be refined. Using the example of a photographer, they could add the following permissions tag to ensure that only the content they provide in the Open Graph tags they provide is used beyond their site. In this instance, the image might be run through a watermarking script or be shared at a lower quality.

<meta property="og:url" content="http://example.com/photography/fine_art_prints" />
<meta property="og:image" content="http://example.com/images/watermark/photo.jpg" />
<meta property="og:permissions" content="opengraph" />

The body best suited to further define this specification is the Open Graph Protocol working group.

Notice anything dishonest in this slide? I don’t, in-fact quite the opposite – I see the work of a smart graphic designer presenting the information in a way that makes their company look the best. Lets take a step back and consider the options.

Apple could have…

• … used a pie or bar chart to show total units shipped to date. Perhaps this would have been clearer, but certainly wouldn’t have made Apple as impressive looking – and remember this WAS a marketing event.

• … shown just their adoption numbers without Windows included. The fact that Apple is poking at Microsoft in this slide is part of the reason we’re still talking about it, it invoked a reaction which increases publicity.

• … shown the same adoption over time using units instead of percentage of installed base. Not unlike the first option, this would have been seen as lackluster and not painted Apple in such a positive light.

• … skipped this slide entirely.

Ultimately it comes down to this – regardless of what Apple does, it will be highly scrutinized. What is your takeaway?

Yesterday, Tim Cook introduced the world to a new and improved iPhone 4S. It’s been met with luke warm reviews and many jokes about how little it has been improved. I think most of the industry is wrong and here’s why: Siri.

Siri was first an artificial intelligence company – founded in late 2007 – that aimed to integrate all of the worlds API’s into a nice clean interface. It was well funded and it developed an awesome natural language interpreter that tech bloggers displayed some fanaticism over when it was revealed to the world. Then a few months later it was snapped up by Apple (April 2010) and has been largely silent – until now.

It turns out that people like Robert Scoble weren’t wrong. In fact Siri is an amazing technology. Not unlike the recent changes to the mouse navigation in OS X Lion, Apple is showing us the future of how we interact with machines in general. Users of other handsets, such as Andriod, can argue that Apple didn’t pioneer this concept – and they’re right – but Apple perfected it. Besides, this is really all very Star Trek, “Computer Siri, what is the weather in Cupertino?” However, unlike television fiction, this is real – and it’s here now.

Scheduling meetings, finding the weather and those sorts of applications are a great start. What’s truly amazing will be when it replaces the keyboard & mouse entirely. Okay, I know that’s a little extreme, but is it really so hard to imagine? Apple has been working on killing the mouse already – promoting an external touchpad Magic Trackpad getting us all comfortable with multi-touch gesturing. Why couldn’t some future version of Apple’s desktop OS have Siri baked right in? “Siri, send a screenshot to Tom” and our faithful digital assistant just does it, snapping the current screen and sending it to Tom. Siri might even ask me if we want to provide any more to the message first. This is hardly pushing the limits of what Apple demoed yesterday.

So, while much of the tech media continues to discuss whether A5 Dual Core processors, 8 mega-pixel cameras, and small screens make the iPhone 4S underwhelming for consumers, remember the star of yesterday’s show wasn’t hardware, it was a software assistant named Siri. The real change is supplementing multi-touch interfaces with voice, further reducing our dependency on pointer devices and keyboards – virtual and physical. In 2007, Apple showed us the joys of touch interfaces. They weren’t the first, they were just the first to do it well. Likewise they’re not first with voice, they’re just the first to do it well and Apple has shown us a glimpse into the future of computing.

Forward looking for Facebook this year means (re)discovering your past. Already industry insiders are predicting a new round of applications that will focus on helping you complete your timeline. You can imagine apps that load in your wedding photos from before the launch of Facebook. I’m not as bullish in this realm but if you’re a developer, don’t let that stop you! Timeline is the new profile and any chance to be part of that conversation is a win for developers. Below you can get a taste of the new profile.

In order to make the most sense of the chaos that can now be shared on Facebook, they hired Nicholas Feltron, a graphic designer from New York who has studied, perfected and made art of presenting large data sets. Facebook, with the help of Feltron, is working to make even our most mundane details – such as the music we listen to – interesting to those who happen upon our profiles. Facebook will elevate our preferences and tastes over time, but we’re getting ahead of ourselves.

Facebook has also made some changes to the Open Graph which will allow developers to publish even more content about what you are doing seamlessly and automatically without annoying popups! This seamless sharing enables a new category of applications Facebook is calling “Lifestyle Apps.” For example, an app such as Spotify will share the music that you’ve been listening to and playlists you create and then aggregate that information over time. I’ve only started using Spotify again after the Timeline announcement so my data isn’t very interesting yet, but you can see what this will look like below.

Any and every site that allows people to contribute, consume or explore what we do, interact with, attend or can be represented digitally should be integrating the new Open Graph changes as quickly as possible. Past data suggests that people are always hungry to personalize their Facebook profiles and the coming changes will allow them to do that once again.

As this rolls out over the next few months, expect data visualization to become the forefront of development. Currently there are five different widgets available, all mostly list based that developers can choose to provide data for, but it’s reasonable to expect that number to increase as Facebook considers how to create different visualizations such as maps, pie charts and bar graphs and probably more.

A dizzying array of partners are part of the new Timeline launch and have already integrated their products. Most are in music and video. Surprisingly, there were not very many gaming companies represented as launch partners in the keynote slides. The biggest names in gaming were of course present, but that’s only a handful of companies. For example, when compared to the number of audio or video applications that were part of the partner launch, the representation of gaming companies seemed lackluster.

For those who were upset by the changes to the newsfeed in advance of F8, the Ticker is the new focal point for the realtime information stream we’re all slowly getting addicted to – more on that in a minute. Sticking with the Spotify audio example, a new type of newsfeed aggregation will start appearing. If two or more of your friends happen to be listening to the same song – or artist – in Spotify, you’ll see the story in your top news. Facebook took it one step further though – allowing integration into applications on your desktop. These new aggregation stories come complete with links to the songs, albums etc enabling users to begin playing those tracks in Spotify. Being a company with smart engineers, Facebook likely took into account the echo chamber effect – so expect that the newsfeed will be filled with a steady stream of varying content. This example shows that Robert Scoble and I had both listened to a track by Deadmau5 recently.

So where do we look for the constant stream of activity from our friends? Ticker is the name for the new real time activity feed that appears on the top right of all pages. Much like the aggregated news stories, you can – with a single click – choose to listen to a song that your friend is currently listening to. Information junkies can now get their Twitter like stream of conciousness feed directly in Facebook too. This feed has everything from music, movies, photos, comments and more. Watch this space and expect it’s volume to grow over the next few weeks. This constant stream of data will likely provide an opportunity for developers to create alternative newsfeed applications by distilling this raw feed of information.

Facebook is continuing it’s march towards transparency and openness. Privacy advocates will probably not be placated by the changes to the permissions dialogs that aim to make the process of permitting applications to access your information and embed their information on your new Timeline any clearer. However, savvy users will appreciate the cleaned up interface and the preview of what Timeline integrations will look like. This will likely be an area which will require further user education for the non-savvy users. Expect to hear more from Facebook about privacy soon.

So what was it actually like at F8? Highly polished. Everything from the compostable utensils at lunch to hack areas, music integration, giant data visualization walls and more – to put it in a nutshell it was exciting. Facebook and Mark Zuckerberg are growing up and it shows. You will continue to find more technical information over the next few weeks here.

A parting thought and some insight into Facebook’s semantic ambitions. This is a terrible photograph of a beautiful poster that was given out at F8, “Eventually Everything Connects” – Charles Eames

Graph images and Charles Eames poster are photographs of swag distributed at F8.

1. An Offer
2. Images
3. Text

You have your offer already, so lets move onto your images. The most compelling landing pages have large, bold, bright and colorful images. If you’re not already in possession of such a photo, you can search the web for one. Be mindful of copyright restrictions and give credit where credit is due!!! We like Flickr as it includes filters for Creative Commons photos – including ones permitted for business uses and ones that can be adapted. These make great starting points for your background. Be sure to enable these in the Advanced Search settings.

You can also purchase an image for just a few dollars from many stock art websites. Searching for ‘Beer’ yields thousands of images, including this one by BlackHawkTraffic. It’s a great photo, but by itself won’t work the landing page, it will need to be cleaned up a little to optimize it for Facebook. It’s currently too wide. You can get a high resolution copy of most images by clicking “Actions” then “View all Sizes”. Facebook only provides 520 pixels of width for tabs so don’t get too carried away with the download size.

Load the image in your favorite image editor and scale it to 520 pixels wide. The height isn’t critical but keep in mind many users won’t see the whole image at once if it’s more than 600 pixels tall. If you want to add any text, now is the perfect time to do so. However, If you expect to change the language with any frequency, it makes the most sense to define an area on the image for text and make sure that it has an even tone that we can apply a contrasting color against. We’re going to add a copyright/credit line to our image and then use text to show the actual offer for our customers.

Usually adding a rectangle with a feathered edge of a solid color and then bumping the opacity down to ~60-80% to let the original show through a little but providing a consistent tone is sufficient. This particular photo doesn’t really need it but many will – the next image illustrates the concept a little better. It’s also a great idea to give credit to the original photographer directly on the image so if someone “borrows” it from you – they still get credit. You can see the final image we created below. Notice we basically essentially just cropped the image width.

Now we’ll need our reveal content image. It’s perfectly fine to use the same image on both versions of your tab – liked and unliked – but you don’t have to and we’re illustrating that here. In this case, we’ll use a plate of nachos as our second image. Just like the first image, we’ll want to resize it, provide an area for text and add attribution to the original photographer. This image really illustrates how important the opaque area is for increasing the legibility of the text we add over it.

Now we need to put it all together. This is where HTML and CSS come in. Your images can be saved at a number of locations, including Flickr, but it’s best if the service you use supports HTTPS to avoid having users see a browser warning. You can sign up for web-hosting and have an SSL certificate installed or leverage your existing website – the options really are endless. If you are unable to locate a service you are happy with, you can sign up for the Basic Plan ($15/mo) and AF-Design will host the images for you. Our systems are designed to operate at Facebook scale which is important if you expect a large audience. For this example, we’ll assume you go the free route. You can upload your images to your web server and should be able to access them directly in your browser. It’s recommended you use a unique folder for all Facebook related work so it doesn’t interfere with any other tools you are using. We uploaded our images as http://af-design.com/facebook_images/welcome.jpg and http://af-design.com/facebook_images/reveal.jpg your urls will be different.

Now, navigate to the reveal tab editor for your page: http://apps.facebook.com/reveal_tab/

Select the page you wish to add your content to and then click “Edit Tab Content” as shown above. This will load the editor. You can add the following content into the Default which will give you a background image and a CSS positioned text area where you’ll add your copy. Finally, you’ll see we’ve added a like button to jazz it up a little. Feel free to copy this code to get started.

<style type="text/css">
   #textarea { color: #ffffff; position: absolute; top:50px; left:15px; width: 280px; }
   #textarea h1 { color: #f4c24f; font-size: 18pt; }
   #textarea h2 { color: #ffffff; margin-bottom:10px;}
   div.spacing { margin:30px; }
</style>
<div id="background">
   <img src="http://af-design.com/facebook_images/welcome.jpg" />
</div>
<div id="textarea">
   <h1>$5 Off Appetizers</h1>
   <div class="spacing"><fb:like /></div>
   <h2>Take $5 off any<br />appetizer</h2> 
   <h2>You can use the code you receive<br />the very next time you come!</h2>
   <h2>Just for liking this page!</h2>
   <p>Limit one per visit per party and all of the usual void where prohibited etc legalese.</p>
</div>
<p>Any text you put here will be below the image.</p>

Let’s walk through this code so you understand what’s going on.

First we define some styles for how we want to display the content. My Tab does a great job of matching the Facebook defaults, but that’s not necessarily what we want here. We’re using a dark background, so we need the text to be a lighter color to provide sufficient contrast to be visible. The first section <style> handles this. The notation #textarea tells the browser to apply these changes to anything within the <div id=”textarea”> element. We tell the browser to: Set the default text color to white, constrain the text area to 280 pixels wide and to position the image 50 pixels down and 15 pixels to the right of the top left corner of the page. Next we define some tweaks to the h1 and h2 tags which give us larger, bolder text. We also tweaked the color a bit further on the H1 to leverage the yellow color in the image. These small tweaks can make all the difference to your users.

Now outside of the style block we get into the two divs. The first div, positions the image on the page, the second is the actual text we’ll display on the image. Notice the code <div class=”spacing”><fb:like /></div>? This is the actual like button we’ll show for this page. The spacing class – as defined in the style block – just gives some room around the button to make it stand out a little more. The rest should be self explanatory.

If you add this to the default editor and click “Save” you should be able to visit your page and see the actual tab.

Now let’s do this again, but this time for the hidden content. In the editor, select, “Reveal Content” and paste this HTML.

<style type="text/css">
   #textarea { position: absolute; top:70px; left:75px; width: 350px; }
   #textarea h1 { margin-bottom:10px; font-size: 22pt; }
   #textarea h2 { margin-bottom:10px;}
</style>
<div id="background">
   <img src="http://af-design.com/facebook_images/reveal.jpg" />
</div>
<div id="textarea">
   <h1>$5 Off Appetizers</h1>
   <h2>Thanks for liking us 
      <fb:name uid="loggedinuser" linked="false" useyou="false" firstnameonly="true"></fb:name>!</h2> 
   <h2>You can use the code: FIVE-OFF the very next time you come!</h2>
   <p>Limit one per visit per party and all of the usual void where prohibited etc legalese.</p>
</div>

If you have previously like this page, you will now see this content!

If you haven’t, go ahead and click the Like button now. You’ll notice a couple of similarities between this and the default content we added before. First, we use the same placement process to get the text over the image. We also made some adjustments to the CSS styles to make the text darker than the default. Now for the cool part (and this can work on the default text too… we display your name! If you choose to use this approach on the default tab, it’s recommended you include some default text as shown below so that even users who are not logged into Facebook can see the tab. Changing adding ‘friend’ below ensures that any sentences we compose with this method still make sense if the user’s name can’t be substituted.

<fb:name uid="loggedinuser" linked="false" useyou="false" firstnameonly="true">friend</fb:name>

You can see a working demonstration of this on AF-Design’s page. Be sure to like it!

Get started with this icon

Get started with this icon

Get started with this icon

These three FANTASTIC icons are from the Silk Icon Set. If you are looking for more than a customized tab, we offer applications for YouTube and Twitter as well. See all of our applications on Facebook.