Facebook Like buttons are popping up all over the Web as a way for people to integrate a little bit of Facebook into their site. I thought it’d be a fun experiment to try on my site here, but I wanted a dynamic URL to pass. There are a ton of blogs out there for putting a Facebook “Like” button your pages using a dynamic URL with a bit of PHP trickery. Here’s the code I ended up using for this site:
<iframe src="https://www.facebook.com/plugins/like.php?href=<?php echo 'http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];?>&layout=button_count&show_faces=false&width=80&action=like&font=verdana&colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:22px" allowTransparency="true"></iframe>
However, on another site I’m working on getting this implemented on, I don’t have access to the raw code, and can’t use server-side scripting or variables. So I came up with a JavaScript solution that I’m sharing here as I couldn’t find an equivalent version online:
<SCRIPT LANGUAGE="JavaScript">
document.write("<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href="+document.URL+"&layout=button_count&show_faces=false&width=80&action=like&font=verdana&colorscheme=light\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:80px; height:22px\" allowTransparency=\"true\"><\/iframe>");
</SCRIPT>
It’s probably not the cleanest/best code in the world (I would never consider myself a programmer) and there are probably 100 different ways of doing this, but this worked for me and hopefully that will help somebody out there on the InterWebs (and feel free to “Like” this post — the button’s on the permalinked URL — just to see if it works). You also might want to adjust the width of the frame and the code a bit. I personally just wanted a small button with just the number of likes (and am considering even getting rid of that, tightening it up a bit).
And for my future reference, these two tools were very useful in doing this — escaping the code for posting here, and creating that document.write statement.
Note: I’m now using the add-this.com service for this, as it provides me better tracking and features than my code above does, but I’m leaving this here for reference.