Add a Facebook Like Button to Your Mobile Site

In the summer of 2010, Facebook announced that it had more than 150 million mobile users. At about the same time, surveys showed that the most popular use of the mobile web on iPhones, after checking e-mail,is to access Facebook to update friends, share interesting discoveries, and see what the people in your social group are up to.

With that much attention now being paid to Facebook, it makes sense that, after you’ve gone to all the effort of building a sparkling new iPhone or iPad site, you should take advantage of the opportunities Facebook offers to drive traffic and recruit new users to see what you’ve done.

Adding a Like button to your page enables users who enjoy your content to do your bragging for you — with just the click of a button. Facebook lets you easily generate the code you need in order to embed this button on your site. Simply use the Facebook configurator series of drop-down menus and text-entry.

To find the configurator section, navigate to the URL provided at the beginning of this section. The series of text boxes that you type information into, as well as the drop-down menus on this page are called the configurator by Facebook. By entering information into these text boxes and clicking on the drop-down menus to choose options, you will configure how the Like button will appear on your web page.

Configuring the Like button means that you are determining some of the characteristics of how it will look on your website, as well as choosing some of the functions that your users access by using this Like button.

Detailed instructions for generating the code appear below the configurator section. The only variable you need to pay special attention to is the Layout Style drop-down menu. In the standard configuration, the default width of a Like button is set to 450 pixels, which is probably too wide for a site that users view on an iPhone (although it’s just right for an iPad).

You can manually adjust the width of the button to 225 pixels or choose another option under Layout Style to generate code for a button that's 90 or 55 pixels wide (but doesn't include pictures). Experiment with the settings here to see which combination of sizes, fonts, and color scheme meshes best with your mobile site.