I just added a “Share on Facebook” link to each entry on my site. It’s more so I can easily post my entries to Facebook from my iPhone (no copy/paste…yet), but if you feel so inclined, you (my gentle readers) are free to use it as well.

When I was adding them, I discovered that the examples on the Facebook site don’t work quite right on WordPress index pages, because they rely on location.href and document.title, so any time you had a share link from an index page, it would link back to that index page rather than the individual entry you wanted. I fixed this by having the Javascript function take in the URL and title parameters, rather than grab them from the current page:

function fbs_click1(url, title)
{
    window.open('http://www.facebook.com/sharer.php?u='+url+'&t='+title,'sharer','toolbar=0,status=0,width=626,height=436');
    return false;
}

The link then becomes this in your index page or individual entry template:

<a title="Share this post on Facebook" onclick="return fbs_click1('<?php the_permalink();?>','<?php the_title();?>');" href="http://www.facebook.com/share.php?u=<?php the_permalink();?>" target="_blank">[link text or image]</a>

As I understand it, the reason why it’s better to put the popup code in the onclick attribute (rather than in the href attribute, e.g. <a href=”javascript:fbs_click1(…)”>) is so that browsers that do not have Javascript enabled can still use the link; it will just not be in a nice popup window.

This is all very simple, but was frustrating to do because I made a couple typos, and had to just stare at the code until I saw the problem (missing closing quote…boo). Is it even possible to debug Javascript?