Add a Facebook Like Button to your Page
Note: this was posted August 2012, and things may have changed somewhat now.
In a previous post about adding social bookmark buttons to your site without JavaScript, the focus was on allowing visitors to share your page content with others.
Another popular button is the Facebook “Like” button. It’s perhaps somewhat overrated, but still, it’s popular, so knowing how to create these buttons is handy.
The Facebook developer pages enable you to create the necessary code via a (rather confusing) form—though I’ve seen plenty of people have trouble with this.
So rather than using those confusing forms, you can just make use of the code described below.
Firstly, though, there are two main uses of the Like button: 1) to encourage people to “Like” your Facebook page, and 2) to allow people to like a specific page on your site. Each scenario is detailed below.
A Like button for your Facebook page
Page Affairs has its own Facebook page at the URL www.facebook.com/pageaffairs
. I can add a button to my site that allows people to “Like” the Facebook Page Affairs page. (If people click this button, their Facebook friends will see that they “Like” this page, and the page itself will register the number of people who “Like” the page.)
To create the button, I can just add this code to my page:
<iframe src="//www.facebook.com/
plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpageaffairs
&send=false&layout=button_count&width=450&show_faces=false
&action=like&colorscheme=light&font&height=21"
scrolling="no" frameborder="0"
style="border:none;overflow:hidden;width:450px;height:21px;"
allowTransparency="true"></iframe>
Note the highlighted bit of code: it is the unique part of the Page Affairs Facebook URL. So if you wanted to add similar code for your own Facebook page, you’d change that bit accordingly. (For example, if your Facebook page’s URL is www.facebook.com/mypage
, you’d change the highlighted code above to mypage
.)
Here is the button that the code above produces:
There are various parameters and styles in there that you can play with—such as allowing the avatars (“faces”) of your “Likers” to be shown with the button, by changing show_faces=false
to show_faces=true
.
A Like button for your site’s page
If you’ve written something like a blog post, you may want to let people share a link to your page on Facebook by “Liking” it. To do so, you can add this code to your page:
<iframe src="http://www.facebook.com/
plugins/like.php?href=http://www.mysite.com/blog/mypost
&layout=standard&show_faces=false
&action=like&colorscheme=light"
scrolling="no" frameborder="0"
style="border:none; height:25px; width: 440px;"></iframe>
This code produces the following button:
The only variable is the highlighted code, which is the specific URL of the page to be “Liked”. However, it’s not always feasible to insert that unique URL into each page. (Often a blog uses a single template for each post, generating the URL automatically.)
Some content management systems (or CMSes, such as WordPress) have special code you can add to the code above to fetch the page URL dynamically. For example, you could use this code for WordPress:
<iframe src="http://www.facebook.com/
plugins/like.php?href=<?php the_permalink(); ?>
&layout=standard&show_faces=false&action=like
&colorscheme=light"
scrolling="no" frameborder="0"
style="border:none; height:25px; width: 440px;"></iframe>
For other CMSes, you’d have to work out the required code to fetch the current URL. But you can also use PHP—whether you are using a CMS or just static, hand-coded pages:
<iframe src="http://www.facebook.com/
plugins/like.php?href=<?php echo "http://mysite.com".$_SERVER['REQUEST_URI']; ?>
&layout=standard&show_faces=false
&action=like&colorscheme=light"
scrolling="no" frameborder="0"
style="border:none; height:25px; width: 440px;"></iframe>
In this case, you insert your domain name—http://mysite.com
—and PHP will do the rest—fetching the rest of the URL.
You just need to make sure that PHP is enabled on your page—the simplest way being to append .php to your page file instead of .html. However, if your pages already end with .html and can’t be changed, there are ways around that.