Nicollet.Net

There have been three changes to the blog layout this week-end:

• Removed the calendar from the sidebar.
• Added a “Like” button to every post.
• Added a fan page badge to the sidebar, using the newly created Nicollet.net fan page :

Dear readers and subscribers : I know that you’re more than an user agent and IP address! If you like what you’re reading on this blog, please consider joining the facebook page: it’s a simple way to help others discover this blog, you will be kept up to date with frequent updates, and I will get to see your happy little faces

Anyway, below is a simple tutorial for adding Facebook capabilities to a website or blog, just in case.

Adding the “Like” button

The idea behind the “Like” button is that Facebook will keep track of who liked what page on the internet, based on the page’s address. By default, it shows how many people clicked the “like” button. If the friends of a visitor liked the post, these friends will be explicitly named. If nobody has liked the page, it cleverly displays a “be the first of your friends to like this page“. Oh, and you can choose to rename “like” to “recommend” if you think the former sounds stupid.

This button is implemented as an iframe. You can generate the HTML for a certain page by going here and entering the address of the page. You will end up with HTML that looks like this:

<iframe src="http://www.facebook.com/plugins/like.php
?href=http%3A%2F%2Fwww.nicollet.net%2F&amp;layout=sta
ndard&amp;show_faces=true&amp;width=450&amp;action=li
ke&amp;colorscheme=light&amp;height=80" scrolling="no
" frameborder="0" style="border:none; overflow:hidden
; width:450px; height:80px;" allowTransparency="true"
></iframe>

Hidden in this mess is the address of the page to be liked, which means you can generate it using your server. For instance, to get this nice button below every post, I edited my WordPress blog template to add this iframe at the bottom of every post, then replaced the URL address with some PHP code:

<?php echo urlencode(the_permalink()) ?>

It’s important to keep in mind that Facebook determines the number of “likes” based on the URL. So, make sure all “like” buttons for a given page use the same address (for instance, adding a “like” button to forum threads would involve using the link to the first page of the thread on all pages of the thread).

Creating a Facebook Page

This one is exceedingly simple. Go to the page creation form, fill in any required information, and go! If creating a professional page, you might want to create a Facebook account that is distinct from your private account, to use as a page administrator profile. Once the page is created, add a picture, fill in the info tab, and write a short text in the left sidebar. Then, start promoting the page.

Adding the Page Badge to your site

Actually, it’s called a “like box”, and again, there’s a clean creation form available. Fill in any required details, and copy-paste the generated HTML back on your site. The only difficulty here is figuring out your page number. It’s hidden in the URL of your page: for instance, you can find the Nicollet.Net page at

http://www.facebook.com/home.php?#!/pages/NicolletNet/133220253364964

The page number appears at the end of that address, so just copy-paste that value.