Utterly Boring dot com

Facebook Like Buttons with Dynamic URLs in PHP and JavaScript

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="http://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.

Posted by Jake on 04/27/10 @ 12:52 PM
Posted in Geekdom, Site Info | Permalink



1 Trackback

Reading Material from UtterlyBoring.com on 11/24/10 @ 04:25 PM:
I wouldn't expect much in the way of posting over the weekend, as I plan on unplugging and spending time with family as much as possible. That, and I'll be... (Read More)

What are you doing down here? Don't you have something better to do? Like Go Back To The Top of the page, or even see who created this site? This site is © 2001 - 2017 by the Utterly Boring folks at UtterlyBoring.com. Steal my content, as I probably did, too, just link to my site or the original site. Batteries not included. One size fits all. Not for off-road use. Not for internal use. Do not taunt Happy Fun Ball.