How to Install the Facebook Like Button on Your Business's Website
10 of 10 in Series: The Essentials of Creating a Facebook Page to Market Your Business
The Like link is generated automatically for you in Facebook posts, comments, and ads, and on your Facebook business Page. You can place the Like button on pages outside Facebook by generating HTML code and then inserting it into your website’s code so that it’s part of every blog post you make.
The following steps create code for a Like button.
Go to http://developers.facebook.com/docs/reference/plugins/like.
You’re on the page that generates the code for your Like button.
In the form, enter the URL of the web page where users will like your posts.
Type the complete URL of your website, including the http:// part.
Decide whether you want to include the Send button with your Like button.
We suggest that you select the box to include it.
Choose your layout style from the drop-down menu.
The three choices are standard, button count, and box count. You can click each one to see a preview.
Type in the width you want to use for your Like button.
Choose a width that complements the layout of your website or blog. The default size — 450 pixels — works for most sites.
Select the Show Faces check box if you want to show the Profile images of the people who like your post.
The faces show up on the standard button style only and appear next to the button. Having the faces of visitors’ Facebook Friends on a blog post helps build social trust and encourages them to like something if they see that their Friends have already liked it. Note that users see only the faces of their Friends, not of everyone who liked the post.
From the drop-down menu, choose which verb (Like or Recommend) you want to display in the button.
Some people suggest that you choose Like most of the time because it’s more widely recognized by Facebook users.
Choose the color scheme for your button from the drop-down menu.
Choose the font for your button from the drop-down menu.
Click Get Code.
A dialog box pop ups, displaying two code boxes. You can choose iFrames code or XFBML code.
XFBML code is more versatile, but you need to know how to use the JavaScript SDK. The XFBML code allows you to resize the button height dynamically — and, with a bit of code tweaking, to know in real time when someone clicks the Like button.
XFBML creates a comment box to allow people to add a comment to the like. You may have seen on other blogs that when you click the Like button, a little text field opens that gives you a chance to type a comment. If users do add a comment, the story published back to Facebook is given more EdgeRank!
Modifying code takes a little expertise. If you enjoy working with code and are a do-it-yourself kind of person, Facebook has some support and training.
If you aren’t concerned about the deeper analytics of tracking and just want people to like and share your posts on Facebook, you can configure the code from the preceding steps and copy either the XFBML or iFrames code that’s generated.
Copy the code you want.
Now you can place the code on your website or give the code to your webmaster to place on your site.
If talking code zips your Geek Meter up to Overwhelm level, pass along these instructions to your webmaster and ask him or her generate the code and place it for you.
Web Design & Development Glossary
