In doing my research, it became clear that it’s a mini-controversy with ardent proponents on both sides of the issue. In fact, there is www.yes-www.org, a website that argues for including the WWW in URLs and no-www.org, a site that argues for “bare” or “naked” domains, i.e., NOT including the WWW in your site URLs.

Either way, you should pick one and stick with it!

WWW vs. non-WWW: The Arguments FOR and AGAINST

As I mentioned above, there are fairly passionate views about both sides of this issue, and each has its merits.

It should be made clear, however, that whatever your preference, the choice between WWW and non-WWW has NO impact on your website’s SEO. SEO DOES come into play if you don’t specify a Canonical URL which I discuss later in this article.

The Argument for using WWW

There are a couple of technical reasons why you might choose using the WWW over the non-WWW, as well as reasons related more to convention and personal preference.

From a technical perspective, there are several benefits to including the WWW.

• Ability to restrict cookies when using multiple subdomains. Cookies of a main domain (i.e. example.com) are sent to all subdomains: If you are going to have subdomains for other purposes (blog for instance), you may want to differentiate the sites and have a www prefix for the regular site.
• WWW actually MEANS something. As mentioned above, WWW is a hostname, and the hostname names the specific service being used a computer network; WWW names the web service for a domain.
• Using the WWW hostname allows for easy segregation in the file structure of your website. Everything in the “www” folder (and at the www.example.com domain) is directly related to serving the site to the public. This allows for simple root-level site organization, eg you could also have a dev folder and have a subdomain dev.example.com for your development site, etc.
• More flexibility with DNS. Your domain’s “Zone” file controls where traffic to your domain is directed and using the non-WWW version of your domain can complicate things. The ServerFault.com site has the technical explanations here and here.

If the above reasons for using WWW in your domain URLs don’t really apply to you, you may still want to use the WWW simply because it’s conventional to do so. On a business card, the WWW clearly conveys, This is our address on the World Wide Web.

People are used to looking for, and seeing, the WWW and that’s sufficient reason for many to stick to the convention.

NOTE: It’s interesting to observe that most sites set their Canonical URL to WWW. Just check out, say, http://macys.com — or almost any major site you can think of, typing in just the domain name WITHOUT the WWW and see how it redirects to the WWW version.

The Argument for non-WWW Domains

On no-www.org, they summarize their argument for NOT using WWW:: “Succinctly, use of the www subdomain is redundant and time consuming to communicate. The internet, media, and society are all better off without it.”

Of course, those are rather vague objections, but if you’re someone who thinks shorter is better, then perhaps the non-WWW approach will make you feel better. There are apparently no “technical” benefits to using the non-WWW approach, only that it reduces redundancy and is no longer needed (which isn’t really true, in many cases).

Either way, the key is to be consistent with your choice. And the way you ensure consistency is through setting up your website to declare its Canonical URL, via the methods described below.

The Canonical URL

Once you’ve made your decision regarding WWW vs. non-WWW, then it’s time to make sure that your site pages that are indexed in search engines ALL reflect your preferred domain.

What is a Canonical URL?

According to Wikipedia: “URL Canonization (aka URL Normalization) is the process by which URLs are modified and standardized in a consistent manner. The goal of the normalization process is to transform a URL into a normalized or canonical URL so it is possible to determine if two syntactically different URLs may be equivalent.”

Canonical URL and SEO

Although your choice of using either WWW or non-WWW for your site’s domain doesn’t, in itself, impact SEO, NOT having a Canonical URL can definitely affect your SEO!

Google specifically says “If you don’t specify a preferred domain, we may treat the www and non-www versions of the domain as separate references to separate pages.” And this can expose your website to duplicate-content issues, with both WWW and non-WWW versions of your pages being included in the search engine indexes.

Google Webmaster Tools article on Canonicalization: “To gain more control over how your URLs appear in search results, and to consolidate properties, such as link popularity, we recommend that you pick a canonical (preferred) URL as the preferred version of the page. You can indicate your preference to Google in a number of ways. We recommend them all, though none of them is required (if you don’t indicate a canonical URL, we’ll identify what we think is the best version).” [Emphasis added.]

As you should know, “link popularity” and “duplicate content” loom very large in how your website’s pages rank in searches, so establishing and re-enforcing your Canonical URL is very important!

Additional Resources

• SEOmoz’s Rand Fiskin’s article on Canonical URLs
• Google Webmaster Tools Help: Preferred Domain (WWW or non-WWW)
• Article on WWW vs. non-WWW
• www.Yes-www.org: An argument FOR using www and More technical reasons for using www
• No-www.org: The arguments AGAINST using www
• Google Webmaster Tools article on Canonicalization

Technorati Tags: 301 Redirects, Canonical URL, Preferred Domain, seo, WWW vs non-WWW

Cover Photo / Profile Picture Tutorial + Downloadable Photoshop Template — For Brand Pages

This article will show you how to create an integrated Cover Photo and Profile Picture for your Facebook PAGE, and I’ve created a Photoshop Template for Facebook Brand Page Timelines to help you in this effort. Just follow the instructions below.

Want to create a Profile Picture / Cover Photo Integration for your Personal Profile?

There are some differences in the relationship between the Profile Picture and Cover Photo on Personal Profiles and Brand Pages. If you’re doing this for your Personal Profile Facebook page, read Photoshop Template for Facebook Personal Profile Timelines.

What is an Integrated Facebook Masthead Design?

When I say “integrated” masthead design, I mean a masthead where the Cover Photo (the big image) and the Profile Picture (the image inset on 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

Creating the Cover Photo and Profile Picture images in Photoshop

This tutorial will show you how to create an integrated Timeline masthead using Photoshop, and the Timeline Template I offer for download is in Photoshop format. If you use other image-editing software, the following instructions won’t fit. However, you should get the general idea and be able to apply it to your image-editing software of choice.

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 — it then CROPS your 180px image, 10px on each edge, to display the 160px image;
• Your Profile Picture also functions as your icon, on all your Page posts on your own or other Facebook Pages, so make sure that it works well in both roles, icon and part of the Timeline masthead.

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 together on your Facebook Timeline.

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.

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 crops 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. Note 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 BORDERS” 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 — and crop the image;

3) Export this Profile Picture image, either as a 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 for your Timeline masthead

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. Facebook will resize it to 851 x 315px, and display from the top of your image. So once your image is resized to 315px in height nothing below that will be displayed.

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

1. 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.
2. If you’re replacing an existing Cover Photo, just mouse over the Cover Photo and click “Change Cover”.
3. Repeat for the Profile Picture, mousing over it and selecting: Edit Profile Picture > Upload Photo.

   IMPORTANT: In order to retain the Profile Picture / Cover Photo integration you worked on, there’s one more step:

   Mouse over the new Profile Picture and click “Edit Profile Picture”
   You’ll then see a list of options: select “Edit Thumbnail”

   

   Then tick the box next to “Scale to Fit” (this will ensure your entire Profile Picture image is resized to 160 x 160px instead of being cropped by 10px on a side which is the Facebook default (seems it should have NOT been the default!):

   

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!

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

What is a Single Page Website?

A Single Page website (aka One Page website) consists of only a single HTML or dynamically generated page, and navigating to different sections of the site — which would normally take a user to a new page — just scrolls down the one page to that particular content’s section. The effect is pretty cool, sort of like being on an elevator and whizzing past the other site sections to arrive at your destination.

When is it Appropriate to have a Single Page Website?

For websites that are tightly focused on a single topic and don’t have a ton of content, a Single Page website can work nicely. For example, Mari Smith’s The New Relationship Marketing page, which we developed in 2011, is ONLY about her book, and the Single Page approach seemed appropriate in that case.

A Single Page site would be appropriate as the landing page for a PPC / Adwords ad, since these landing pages should have a single-topic focus and be optimized for just that one topic, the subject of your ad.

However, if your website doesn’t fit the above profile, then a Single Page may not be such a good idea, particularly if being found in searches is important to your business. Why? On-page SEO.

Why Single Page Websites Compromise your On-page SEO

“On-page” SEO is the Search Engine Optimization best practices you apply to the individual pages on your website — descriptive and keyword-rich title and meta tags, header tags, linking to other pages on your site using keyword-rich anchor text, and having your content organized in a strong semantic and informational hierarchy.

It is in this regard that the Single Site website fails (unless it fits the profile above).

SEO is a Page-by-Page Competition for Ranking

SEO is a page-by-page competition for ranking and when developing your website architecture (the structure of the directories and individual pages), it’s best practice to limit each page to a single topic, so that each page can be optimized for its unique subject matter.

For example, if your site is for a plastic surgeon, that surgeon may offer a number of specialty areas:

• Face and Neck Lift
• Cosmetic Eyelid Surgery
• Liposuction
• Nasal Surgery (Rhinoplasty)
• Abdominal Lipectomy (Tummy Tuck)
• Breast Augmentation

Each of the above practice areas should have its own page, so that each page (whether static or generated with dynamic server-side code) can be optimized for its particular subject, according to the SEO best practices mentioned above.

With Single Page Websites You Have Only a Single Title Tag and Meta Description Tag

These two tags are probably the single most important on-page SEO elements, conveying to the search engines the EXACT topic of each page. They are also displayed on a SERP (Search Engine Results Page) when one of your pages is listed:

The title tag content for the above page is the first, bolded blue text. The meta description tag is the text below the green URL of the page. Notice that they’re optimized for a very specific top, i.e., brow-life surgery.

You get only 60-63 characters for the title tag content and 155 characters for the meta “description” tag, so if you want your site optimized for more than one topic, you simply won’t have the room to leverage these most important on-page SEO elements.

A Single Page Website Means Only One Page in Google’s or Bing’s Index

Search engines will index all the pages of your website, providing multiple opportunities for your site to come up in searches. When your site consists of only one page, a single page is exactly what you’ll have indexed.

Conclusion: Be Cool, but Be Careful!

Personally, I really love many of the Single Page websites I’ve seen. It’s a visually appealing effect and if your site fits the appropriate Single Page profile, it’s a fine way to go.

But if your site has numerous topics and sub-topics, then I think it best to skip this approach and go the convention route of individual pages.

I welcome your thoughts about this subject in the comments!

Technorati Tags: one page websites, search engine optimization, seo, single page websites

While working on a responsive WooCommerce-driven e-commerce website for a HyperArts client, I hit a snag. We’re developing the site in WordPress on the Genesis Framework.

One of the requested features was to have a dynamic shopping-cart button in the navigation that updates when products are added to the cart.

WooCommerce provides the bit of PHP needed to make the shopping-cart button dynamic. That’s the easy part. The difficult part proved to be figuring out how to add that PHP button to the navigation.

How to Add Any PHP as a Navigation Item on WordPress Genesis Framework

In our case, the PHP we needed to add to the #nav navigation container was a WooCommerce shopping-cart button, but the information below applies to any PHP you might want to add as a navigation item on a WordPress site using Genesis Framework.)

Why We Wanted the PHP Inside the Navigation Container

If our site was a non-responsive website we could insert our bit of PHP anywhere (using Simple Hooks) and position it relatively or absolutely wherever we wanted.

But because we’re working on a responsive website, we needed this code to live inside the #nav container with the rest of the nav elements, so it can shift responsively.

How do you add elements to the #nav that aren’t regular Pages or Text Links?

First, note that in the Genesis Theme Settings, under the Navigation Settings, there is a checkbox for “Enable Extras on Right Side”. The options are: Today’s date, RSS feed links, Search form, and Twitter link.

That’s great, but I needed a choice for “custom PHP code.”

How to utilize the potential of that widget area with our custom content?

For this, I consulted Bill Erickson’s excellent blog post Adding Content to Genesis Navigation.

Bill recommends creating a filter that you put in your theme’s “functions.php” file, allowing you to add any HTML you want to the right side of the #nav container.

But how do I add PHP to that right side widget?

Create a sidebar!

The method I used was to modify Bill’s code slightly so that I was able to add a Genesis Sidebar through his filter, which would then allow me to add my code using a widget in the WordPress dashboard.

NOTE: If you’re not familiar with Genesis’ Simple Sidebars and how they work, I would recommend reading this post.

In the modified code below, you’ll see that I named my new Sidebar “Nav Right” and registered it as “Nav Right” in the Simple Sidebars plugin in Genesis.

Now I have a new Sidebar that exists on the right side of the #nav container, ready to have widgets dragged into it!

Here’s my modified code, which I put in my theme’s “functions.php” file:

add_filter( 'genesis_nav_items', 'our_fun_button', 10, 2 );
add_filter( 'wp_nav_menu_items', 'our_fun_button', 10, 2 );
function our_fun_button($menu, $args) {
$args = (array)$args;
if ( 'primary' !== $args['theme_location'] )
return $menu;
ob_start();
dynamic_sidebar('Nav Right');
$social = ob_get_clean();
return $menu . $social;
}<!--formatted-->

Now I have a sidebar in the WordPress dashboard:

Can’t put PHP into a standard Text Widget? Use the PHP Code Widget!

Download the PHP Code Widget. Once you’ve activated this plugin, you’ll be able to add it to your sidebar area just like you would any other widget, although you will have to wrap your PHP in <?php> tags.

As you see below, I was able to add my WooCommerce button PHP.

The WordPress Genesis Framework Rocks!

Genesis proves once again that is a flexible and kind-hearted beast.

Technorati Tags: genesis framework, WooCommerce, WordPress, wordpress programming

A jQuery Top Button for your Long Web Pages

Here’s how to implement a jQuery “Back to Top” button in your site’s footer that, when clicked, smoothly scrolls the page up to the very top:

1) Add the HTML to your website’s footer content

<a class='go-to-top' href='#wrap' title='back to top'>Back to Top</a>

The HREF element will have to be the very first element after the opening <body> tag. In my case it was the #wrap div.

2) Add the styles for this Back to Top link. Tailor the following to suit your site (eg you’ll have to create your own button graphic).

a.go-to-top {
background: url('images/arrow-to-top.png') no-repeat center center;
width: 35px;
height: 35px;
position: absolute;
right: 30px;
bottom: 30px;
text-indent: -9999px;
font-size: 0;
cursor: pointer;
outline: 0;
}

To position the button more precisely in different viewports (browser screen widths), you can add the following rules to the appropriate breakpoints (the browser widths at which a responsive website reformats), and adjust accordingly:

a.go-to-top {
right: 15px;
bottom: 120px;
}

3) Add this script right before the closing </body> tag. I found that placing the script in the header caused a conflict with another jQuery script, requiring that I place it before the </body> tag. I included the first line which calls the jQuery library from Google even though a local jQuery library is already referenced in the header (the jQuery in the header was incompatible with this script).

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script>
$(function () {
$('.go-to-top').click(function () {
$('html,body').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>

You can see this back-to-top button in action in this responsive WordPress website we developed here at HyperArts.

(I’ve adapted this “back-to-top” functionality from this tutorial. I removed the fixed position of the button within the viewport, however, choosing instead to have it appear only in the footer.)

If you have any questions, feel free to ask in the Comments. Happy coding!

Technorati Tags: Drupal Programming, javascript, jquery, responsive, responsive design, responsive web design, web coding, wordpress programming

One of the really cool things about using Drupal as a CMS (aka “Content Management System) is that it has a rich community of developers who are constantly contributing to the heap of custom modules you can use to extend your site.

That’s right. Free code, yours for the taking.  By using Drupal, you essentially get hundreds of hours of development for free under an open source license to use as you wish.its

One such instance of free code is “SEO Checklist” an SEO module developed for Drupal that can improve your SEO performance with a quick install and very little configuration.

The SEO Checklist Module for Drupal

What is this magical module, pray tell? Well, of course, it’s the SEO Checklist Module!

Although this Drupal module doesn’t technically improve your SEO, it provides a really specific checklist through which you can go step-by-step to improve your SEO rank.

Many of the checklist items are simple, e.g. modules you can install, services you should sign up for like Google Webmaster Tools, and HTML validation.

A look under the hood of the Drupal SEO Checklist Module

Want a sneak peak? Here are a few screenshots.

Taking the steps to improve your search engine ranking

For your viewing pleasure, here’s a list of things that the Drupal SEO Checklist Module suggests that you do – and for which the module provides a handy checklist you can use to track your progress:

• Set up accounts with Google, Yahoo, Windows Live and Bing.
• Install, configure and enable the following modules:
  • Token
  • Page Title
  • Pathauto
  • Global Redirect
  • Redirect
  • Context Keywords
  • Meta tags quick
  • Scheduler
  • HTML Purifier
  • Google Analytics
  • Search 404
  • SEO Compliance
  • Site Verification
  • XML Sitemap
  • Site Map
  • AddThis
  • Service Links
  • Add to Any
  • Facebook social plugins integration
  • Follow
  • Mollom
  • Captcha
  • Antispam

• Enable clean urls
• Add meta tags to all your pages (easy to do in Drupal)
• Validate your site at http://validator.w3.org
• Check all your links at at http://validator.w3.org/checklink
• Submit your XML sitemap to Bing and Yahoo.
• Set up and configure Google Webmaster Tools.

Final thoughts about the Drupal SEO Checklist Module

And there you have it folks. This is of course just a quick overview. By installing this module, you can see the categories these tasks fall into and also review some of the extras that aren’t necessarily related to SEO, but are good to do for your Drupal site performance or security.

Remember, SEO improvement is an iterative process. Don’t be overwhelmed. Anything is better than nothing. Get the low hanging fruit off your list first, then start drilling down on the tougher nuts to crack. But of course, that’s another blog post entirely!

How about you? What are your thoughts? Is the SEO Checklist module missing anything? Please share!

And of course, if you like this article and wish to share, please retweet, “like” it, or share with your Facebook friends.

Casey Cobb is a partner and developer at Ricochet Consulting, Inc.

We replaced them with a Dell Precision M4600 Mobile Workstation that runs Windows 7 and two virtual machines.

Our Cross-platform, Cross-browser Testing Requirements

Prior to putting the new testing machine together, we first had to identify what we needed in order to test websites and HTML email on the various Windows OSs most used today. Here was our list:

Windows 7:

Outlook 2010, Windows Mail (Windows Live Mail).
In IE 9 test: Hotmail, Gmail, AOL, Yahoo, Microsoft Exchange (aka Outlook Web Access).
In Firefox test: Hotmail, Gmail, AOL, Yahoo, Microsoft Exchange (aka Outlook Web Access).

Windows Vista (Business Version):

Outlook 07, Windows Mail (Windows Live Mail).
In IE 8 test: Hotmail, Gmail, AOL, Yahoo, Microsoft Exchange (aka Outlook Web Access).
In Firefox test: Hotmail, Gmail, AOL, Yahoo, Microsoft Exchange (aka Outlook Web Access).

Windows XP:

Outlook 2003, Outlook Express 6, Thunderbird.
In Google Chrome test: Hotmail, Gmail, AOL, Yahoo, Microsoft Exchange (aka Outlook Web Access).
In IE 7 test: Hotmail, Gmail, AOL, Yahoo, Microsoft Exchange (aka Outlook Web Access).

The Right Laptop PC for the Job

Setting Up Multiple Windows Operating Systems – OS’s – on One Laptop PC

Our challenge was to get all of the Windows OS’s on one machine and have them run the essential software listed above.

The way to make this happen is to run the latest release of Virtual PC on a Windows 7 machine. According to this wikipedia article, the minimum system requirements to run Virtual PC are:

• Computer running Windows 7 (all editions except Starter)
• 1+ GHz processor (32- or 64-bit)
• 1.25 GB memory required, 2 GB recommended
• Additional 15 GB of hard disk space per virtual Windows environment recommended
• Optional: if the processor supports hardware-assisted virtualization technology such as AMD-V or Intel-VT, it will be used. Before March 19, 2010, such a processor was mandatory.

The Dell Precision M4600 Mobile Workstation

With this in mind, we chose the Dell Precision M4600 Mobile Workstation. This machine exceeded all the minimum requirements to run Virtual PC. It has:

• Windows 7 Professional with XP mode
• Dual Core 2.50GHz Intel Core processor that supports Intel-VT
• 8GB of memory
• 500GB of hard disk space

Virtual Machines

You’ll notice that the Dell computer came with something called “XP mode.” Windows XP Mode (XPM) “is a virtual machine package for Windows Virtual PC containing a pre-installed, licensed copy of Windows XP Professional with Service Pack 3 as its guest OS.” This takes care of the Windows XP environment we need for testing.

To run Windows Vista in a Virtual PC environment, we needed to acquire a full-licensed copy of Windows Vista Business edition ($108.99 at Amazon).

We also purchased Office Professional 2010 which includes the Outlook 2010 we need for testing on Windows 7. We already had licenses for Outlook 2007 and Outlook 2003.

After procuring these items, we moved quickly to the task of setting up the Virtual PCs. The Dell we bought already had Windows XP Mode installed. If you need to install Windows XP Mode, download the installer here and follow the steps below (Note: Windows XP Mode is only available in Windows 7 Enterprise, Windows 7 Professional, and Windows 7 Ultimate). The steps to installing Windows Virtual PC and Windows XP are:

To install Windows Virtual PC and Windows XP Mode

1. Download Windows Virtual PC and Windows XP Mode installers from the Windows Virtual PC Web site (http://go.microsoft.com/fwlink/?LinkID=160479).
2. Install Windows XP Mode by double-clicking the file WindowsXPMode_nn-NN.exe (where nn-NN is the locale code, for example, en-US) and then completing the wizard that opens.v
3. Install Windows Virtual PC by double-clicking either of the files Windows6.1-KB958559-x86.msu or Windows6.1-KB958559-x64.msu, as appropriate for your processor type.
4. Restart the computer.
5. Once the computer has restarted, click Start, click Windows Virtual PC, and then click Windows XP Mode.
6. Complete the wizard that opens. Be sure that you record the password provided during the setup process because you will need it to log on to the virtual machine.

(From http://technet.microsoft.com/en-us/library/ee681616(v=ws.10).aspx)

Installing Vista on Windows Virtual PC

To install our Windows Vista Business edition on the Windows Virtual PC, I followed steps 3-7 and steps 13-21 on this page (http://www.sevenforums.com/tutorials/8254-windows-virtual-pc-create-virtual-machine.html).

Installing Other Programs

While in each Operating System, virtual or otherwise, I proceeded to install programs from the install disks we had. For example, I installed Outlook 2007 on Windows Vista and Outlook 2003 on Windows XP. With the Office Professional 2010 disk, I installed the entire Office suite of apps, including Outlook 2010, on Windows 7.

Setting Up the Various Windows Internet Explorer, Firefox, Chrome and Safari Browsers

By default, Windows XP (SP3) comes with IE 7, Vista with IE 8 and Windows 7 with IE 9, so these browsers should already be installed on the machine. Recently, however, Microsoft started to automatically upgrade browsers to a higher version. To prevent Microsoft from doing this, you need to download and install the following toolkits from Microsoft:

• Toolkit to disable IE7 auto-update
• Toolkit to disable IE8 auto-update
• Toolkit to disable IE9 auto-update

I then proceeded to install the other browsers to test on the main OS and the virtual machines: Chrome, Firefox and Safari.

Let me know if you’ve come up with a different approach, or your thoughts on our approach!

Technorati Tags: cross-browser testing, Cross-platform testing, Email testing, Internet Explorer, Microsoft Vista, web coding, web development, Windows 7, Windows XP

However, when viewed and tested on Facebook (which places the page within an iFrame), the non-fan content is loaded whenever a validation error occurs, i.e., a required field isn’t filled in. So users would be left befuddled because the non-fan page invites them to “like” the page again and they have no idea that the info they just entered was invalid.

So how did I get the fan-only content to display when the user fails to complete required fields, so that the user sees the form and the validation errors?

I first looked into the conditional that loads the fan-gated page:

if ($like_status) {
echo "<!-- fan-gated content -->";
} else {
echo "<!-- non-fan content -->;
}


It appears that I needed something more than the $like_status variable to load the fan-gated content in a validation-error scenario. PHP sessions (tutorial on PHP sessions) seemed to be the answer. Starting a session to set my own variable was what was needed. So right after the opening PHP tag at the top of the file, I placed this:

session_start();
$_SESSION['form']='visited';


I went ahead and added this variable in the conditional:

if (($like_status) || isset($_SESSION['form'])) {
echo "<!-- fan-gated content -->";
}
else {
echo "<!-- non-fan content -->";
}


Voilà! The fan-only content now loads when a validation error is encountered.

Technorati Tags: Facebook, forms, php, tabs