Add a Facebook like button to your webpage

Facecook logoIt is likely that Facebook is an important part of your communication strategy. Creating a Facebook page for your company or group is easy and lets you tap into one of the most active communities on the web. A great way to get some additional visibility is to allow people to ‘like’ your page and you can put a button onto your web page, your visitors can then add you to their list of likes instantly.

Facebook provide a tool to create all the HTML code that you need to add to your website. I have a Facebook page for Peoples Geek and we will use that as an example.

Step by step instructions for creating your Facebook like button

1. Go to your Facebook page (you will need to be an administrator of the page)
First step to creating a like button is to go to your facebook page as an administratorHere is an example of what I see, this is the Wall view and you can see there is a Get Started view at the top of the left hand column of views, There is also a URL across the top of the page that you will need to copy now. In my case it is http://www.facebook.com/pages/Peoples-Geek/135480093185494
(If your screen looks different you may have the older version of Facebook pages – see the end of this post for more info)

2. Select the Get started view and then select the Add Like Box from the third option
Use the getting started page and the add like box button

3. Modify the standard like box with your pages details. Replace the standard Choose your options for the Facebook like box on your websiteURL in the Facebook Page URL box with the one you copied earlier in step 1, when you click in one of the other option boxes on the screen the sample like box will update to show your site. There are options to change the width, background color (two choices), whether you show faces for those who already like your site, the newsfeed from your page and the ‘Find us’ header. Make the selectons that are approprate for your website.

4. When you are happy with the look of the sample, click the ‘Get Code’ button. You will get two choices for code – the standard HTML iframe or the slightly more complex XFBML, the iframe is sufficient for most uses but your final choice will depend on exactly how you want to use this button – of course I would be happy to help you work out what is best for you. Here are the examples generated for the Peoples Geek page

iframe

<iframe src=”http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FPeoples-Geek%2F135480093185494&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=62″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:292px; height:62px;” allowTransparency=”true”></iframe>

XFBML

<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like-box href=”http://www.facebook.com/pages/Peoples-Geek/135480093185494″ width=”292″ show_faces=”true” stream=”false” header=”true”></fb:like-box>

The final facebook like box on the Peoples Geek website

5. Insert the code of your choice into your website and ‘ta da’ instant link to facebook and ability for visitors to like your page. You should be able to see exactly this box to the right hand side of this post if you are on www.peoplesgeek.com. Try it out and like my facebook page then click on the link and visit.

These screenshots and instructions are based on the upgraded Facebook Page – this has links across the left hand side of the page rather than the traditional tabs across the top. All pages will be converted to this format soon (just like our personal pages moved to the new format). There are a number of great articles on the new functionality of the redesigned pages

Your facebook page is an important part of the way you tell your visitors and fans about your site and is a great way of keeping people informed.

Here’s to liking each other,

Brian
your ‘peoples geek’

This entry was posted in Design and tagged , , , . Bookmark the permalink.