window.open('', '_self', '');
window.close();

Basically it reopens the window on itself, then immediately closes itself. Neat. Haven’t had any problems with it not working in other browsers, but I also haven’t super-widely tested it.

<script type="text/javascript" language="JavaScript">
// Break out of frames
if (top.location != location) {
    top.location.href = document.location.href ;
}
</script>

Basically, it just compares the current document (in this case your website) to the “top” document available in the browser. If your site has been loaded via the DiggBar then the “top” document will be Digg, so they will be different. When those 2 documents are different, it will automatically redirect the entire browser to your website. Done and done.

2008-12-26: Fixed a bug that caused the JS to overwrite details on a non-FB Connect comment as well. Also changed the fake email address that’s stored to include the user’s FB user ID.

In case you’ve been living under a no-technology-news rock for the last few weeks, you’ll know that Facebook Connect was released recently. I had been seeing/hearing a lot about it, including this video at Mashable, showing how to implement FB Connect in 8 minutes. So when my friend Morgan from BlownMortgage asked me if I’d be able to help him implement it on his new resume-editing site ResumeDonkey.com, I figured “how hard could it be” and said yes. Although it definitely didn’t take 8 minutes, I got it done, so I thought I’d post some details on the specific approach I used for ResumeDonkey.com.

Before I rolled my own solution, I took a good look at a few of the existing WordPress options including:

• The WP-FBConnect plugin, made by Facebook,
• Another WordPress plugin made by Sociable, and
• The Community Facebook Connect Plugin, by Jesse Stay

None of these worked quite how Morgan and I had discussed, so I decided to make my own, lightweight solution. Before editing any actual theme files, there’s some prep-work to be done, so:

1. Log into Facebook and then go and add the Facebook Developers Application
2. Click the big button at the top right to Set Up a New Application
3. Enter a name and agree to the terms (you read them all, right?)
4. On the next page, enter the base URL of your website in the “Callback URL” field. MAKE SURE you use the correct preference for your website as far as www. or no www. is concerned, and preferably enforce that on your website using a plugin or something. If you enter http://www.domain.com here, and someone accesses your site as http://domain.com, then your FB Connect integration will break and throw a warning about being on the wrong URL.
5. You can also set some sexy icons/logos to appear in the News Feed of people who comment on your blog, but I’ll let you handle that.
6. Get a copy of the “API Key” at the top of this page, you’ll need that later.

OK, now we need to register a “template bundle”, which will be used to post updates to the News Feed of people who comment on your blog.

1. Go to the list of your Facebook Apps and click on the app we just created on the left
2. Click “Create Feed Template” in the list of links on the right
3. Make sure your correct App is selected in the box, then click Next
4. In the “One Line Template” box, paste this exact text

   {*actor*} commented on the {*blog*} post {*post*}.

5. In the “Sample Template Data” box, paste this (make sure quote marks are still  quotes and not fancy curly-quotes)

   {"blog":"<a href='http://test.domain.com'>My Blog Name</a>", "post":"<a href='http://test.domain.com/post-url/'>Test Post Title</a>"}

6. Click Update Preview and make sure that you’re happy with the News Feed format (if not, change the One Line Template string)
7. Click Next
8. Now click Skip (and ignore/Okay any errors) until you get to the final page and then click “Register Template Bundle”
9. It will give you a Template Bundle ID, and you’ll want to get a copy of that, because we’ll need it later as well.

OK. Now you’ve got a registered and configured (roughly) App on Facebook, time to get dirty on your own blog. Create a file in the root of your domain and call it “xd_receiver.htm”, then copy the following code into it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>

Add the “fb” XML namespace to the header.php file in your theme. Mine ended up looking like this (in PHP):

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" <?php language_attributes(); ?>>

And also drop in a reference to jQuery if you don’t already use it in your theme. It’s bundled with WordPress so you can reference it like this (anywhere before the call to “wp_head()” in your header.php):

<?php wp_enqueue_script('jquery'); ?>

Then you’ll want to edit comments.php (assuming you’re using a relatively normal theme), and make some changes to add the FB Connect button. Find the part where a user would normally enter their name/email/URL and change it to look something like this:

<div id="comment-user-details">
<fb:login-button length="long" onlogin="update_user_details();"></fb:login-button>

<p style="clear:left;"><strong>Or enter your details below:</strong></p>

<p><label for="name">Name <?php if ($req) echo "(required)"; ?></label><br />
<input type="text" name="author" id="name" value="<?php echo $comment_author; ?>" size="50" tabindex="1" /></p>

<p><label for="email">Email Address <?php if ($req) echo "(required)"; ?></label><br />
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="50" tabindex="2" /></p>

<p><label for="url">Website</label><br />
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="50" tabindex="3" /></p>
</div>

Just above this block, you should also find the start of the <form> tag for posting a comment, you want to add the “onsubmit” attribute to it so that it looks something like this:

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform" onsubmit="update_form_values();">

The important parts there are that it’s all wrapped in a DIV or SPAN with id=”comment-user-details” and then obviously the <fb:login-button> stuff. Now further down (I went right down to the bottom of the comments.php file actually), add this code:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<style type="text/css">
#fb-user { border: 1px dotted #C0C0C0; padding: 5px; display: block; height: 48px; }
#fb-msg { float:left; }
.fb_profile_pic_rendered { margin-right: 5px; }
a.FB_Link img { float: left; }
</style>

<script type="text/javascript">
var fb_connect_user = false;
function update_user_details() {
fb_connect_user = true;
// Show their FB details
if (!jQuery('#fb-user').length) {
jQuery('#comment-user-details').hide().after("<span id='fb-user'>" +
"<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>" +
"<span id='fb-msg'><strong>Hi <fb:name uid='loggedinuser' useyou='false'></fb:name>!</strong><br />You are logged in with your Facebook account. " +
"<a href='#' onclick='FB.Connect.logoutAndRedirect(\"<?php the_permalink() ?>\"); return false;'>Logout</a>" +
"</span></span>");
}

// Refresh the DOM
FB.XFBML.Host.parseDomTree();
}

function update_form_values() {
if (fb_connect_user) {
profile = jQuery('#fb-user').find('.FB_ElementReady .FB_Link')[1]['href'];
user_id = profile.substring(profile.indexOf('?id=')+4);
jQuery('#url').val(profile); // FB profile URL
jQuery('#email').val(user_id+'@facebook.com'); // Can't get a real one from FB unfortunately. This saves their user id @facebook.com
jQuery('#fb-user').find('.FB_ElementReady .FB_Link').each(function(i){ if (i==1) { jQuery('#name').val(jQuery(this).text()); } }); // Gets their name from the DOM
setCookie('fb_connect', 'yes');
}
}

function setCookie(c_name,value,expiredays) {
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

function getCookie(c_name) {
if (document.cookie.length>0) {
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1) {
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}

FB.init("YOUR-FACEBOOK-API-KEY", "/xd_receiver.htm");
FB.Connect.ifUserConnected(update_user_details);
if (getCookie('fb_connect') == 'yes') {
setCookie('fb_connect', null);
FB.Connect.showFeedDialog(YOUR-TEMPLATE-BUNDLE-ID, {'blog':'<a href="<?php bloginfo('home') ?>"><?php addslashes(bloginfo('name')) ?></a>', 'post':'<a href="<?php the_permalink() ?>"><?php addslashes(the_title()) ?></a>'}, null, null, null, FB.RequireConnect.promptConnect);
}
</script>

For those of you paying any attention to what you’re copy-pasting, you would have noticed that there are 2 important things you need to replace in that last block of code. Go back now and replace “YOUR-FACEBOOK-API-KEY” and “YOUR-TEMPLATE-BUNDLE-ID” with the appropriate values from the beginning of this process. YOUR-FACEBOOK-API-KEY should be replaced with the 32-character string from the Facebook App config, and should include double-quotes around it in the code above. The YOUR-TEMPLATE-BUNDLE-ID should not have quotes around it.

Save everything and upload it (if you were working offline). If all has gone well, you should now get a FB Connect button on your comments (you need to log out of WordPress to see it), and when you click it, you should connect to FB, then be able to post a comment.

When a Facebook user comments on your blog now, their name will be loaded from Facebook, their profile URL will be used as their URL, and the email address will be recorded as “user@facebook.com” (their API doesn’t allow you to actually get it, to avoid spam I assume).

Enjoy.

I found a great breakdown over at quirksmode.org, but it didn’t actually work in Safari (2.0.2), so I found that out pretty quickly, because that’s what I’m working in. After a little playing around, I came up with the following modifications, which calculates the amount of chrome visible in the currrent window, and then takes that into account when resizing the entire window size.

I haven’t tested this on too much other than Safari and Firefox on a Mac, but I think it should be reasonably compatible with others.

// Viewable size you want once resized
x = 600;
y = 400;

// Now set the window size for different browser types
// all except Explorer
if (self.innerHeight) {
	// Figure out the measurements
	iX = self.innerWidth;
	iY = self.innerHeight;
	oX = self.outerWidth;
	oY = self.outerHeight;

	// And resize to match the desired target
	gX = oX - iX;
	gY = oY - iY;
	window.resizeTo(x + gX, y + gY)
}
// Explorer 6 Strict Mode
else if (document.documentElement && document.documentElement.clientHeight) {
	document.documentElement.clientWidth = x;
	document.documentElement.clientHeight = y;
}
// other Explorers
else if (document.body) {
	document.body.clientWidth = x;
	document.body.clientHeight = y;
}

Drag it to your bookmark toolbar, then click it, enter a street address (eg. ’2000 Bush St’) and hit ‘Ok’ to get an instant Google Map to that location in San Francisco (my current hometown).

map

Obviously editing this to work for different cities in the US would be trivial – knock yourselves out.

This small JavaScript function implements one of the cool functions available in PHP, making it easier to store things in an array, and then check to see if they’re in there later.

// Returns true or false based on whether the specified string is found
// in the array. This is based on the PHP function of the same name.
// Written by Beau Lebens
function in_array(stringToSearch, arrayToSearch) {
	for (s = 0; s < arrayToSearch.length; s++) {
		thisEntry = arrayToSearch[s].toString();
		if (thisEntry == stringToSearch) {
			return true;
		}
	}
	return false;
}