View Full Version : How to easily create a Facebook 'like' button on each page of your website

07-04-2011, 06:40 PM
I've been told by many reliable sources that getting people to 'like' your site on Facebook is a great way of increasing your site traffic and getting a site ranked higher on Google and other search engines.

However, it is hard work to get it implemented correctly. What you want is to have each page individually 'liked' rather than the site as a whole. To do that can take a lot of time-consuming fiddling around.

We've created a simple piece of Javascript that allows you to create a custom 'like' button on each page of your site. Because we've had some help from other members with some bits and pieces of Javascript coding, it only seems fair to share something in return.

You will need to get a Facebook Application ID from Facebook themselves. This is a unique Application ID for your domain. The easiest way to get one of these is to go to http://developers.facebook.com/docs/reference/plugins/like/ and enter the details for your domain. Then click on 'GET CODE' and copy the 15 digit number from #appId. You then paste this into the Javascript as shown below.

Adding the Facebook 'like' button to each page - changes to HTML
In the <head> section of your HTML, add the following piece of code:

<script type="text/javascript" src="SocialMedia.js"></script>
<script type="text/javascript">

FacebookSetup('Your page title goes here', 'image-to-show-on-Facebook.jpg');


At the point on the page where you actually want the 'Like' button to appear, you then add the following piece of code:

<script type="text/javascript">



The JavaScript
Now create a JavaScript file called SocialMedia.js:

var facebookAppID = "xxxxxxxxxx"

function FacebookSetup(title, image)
var url=window.location.host + window.location.pathname;
document.write("<meta property='og:title' content='" + title + "' />");
document.write("<meta property='og:type' content='article' />");
document.write("<meta property='og:url' content='" + url + "' />");
document.write("<meta property='og:image' content='" + hostname + "/images/" + image + "' />");
document.write("<meta property='og:site_name' content='" + sitename + "' />");
document.write("<meta property='fb:admins' content='" + facebookAppID + "' />");

function FacebookLike()
var facebook="http://www.facebook.com/plugins/like.php?href=" + url + "&amp;layout=standard&amp;show_faces=false&amp;width=250&amp;action=like&amp;font&amp;colorscheme=light&amp;height=35";

document.write("<iframe src=" + facebook + " scrolling=no height=35 frameborder=0 style=border:none; overflow:hidden; width:250px; height:35px; allowTransparency=true></iframe>");

Change the value in the variable facebookAppId on line one to your Application ID (as explained in the prerequisites section above).

What happens once you've implemented this?
Once you've implemented this, you should see a LIKE button on your page. If you are a Facebook user and have cookies set to always log you in, you'll find that when you click on this LIKE button, a link to your page will appear on your Facebook page, along with a thumbnail photograph as specified by you when you called FacebookSetup in your HTML code.

Other people who follow you on Facebook will then also have the link to your site appearing on their News Feed.

If you are not logged in when you click on the LIKE button, you will be prompted to log on to Facebook before the information appears on your News Feed.

What are the benefits of using JavaScript to do this, rather than writing the HTML code for each page?
Many sites have created a blanket site-wide 'LIKE' button and embedded it into their HTML. Whilst this is easy, it is limiting - the LIKE button always has the same title, the same picture and sends you to the same page on your website.

Of course, it is possible to write custom HTML for each page, but this can soon get messy and then becomes more difficult to maintain.

As an alternative, this JavaScript is simple and tidy.

The code makes it simple to create unique Facebook 'likes' for each page, with custom text and custom images. It also keeps your HTML tidy, thereby making it easy to maintain in the future.

Hope this helps, folks.