Beau Lebens Facebook Connect

I have going back and forth w/ Beau Lebens today after reading his How To blog post on Dented Reality discussing his variation of the Facebook Connect application and after testing it today, it’s a very clean plug-in and it seems to work very smoothly.

In his blog post he also outlines all of the requirements to get everything working correctly and provides some source code examples as well. He basically rolled his own solution and has it running on Resume Donkey, check out his blog post below:

2008-12-23: There were a number of problems with the code samples in this post previously due to some WordPress formatting problems. They are all corrected now, and you should be able to follow through this post and get this working on your own blog quite easily.

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:

Log into Facebook and then go and add the Facebook Developers Application

Click the big button at the top right to Set Up a New Application

Enter a name and agree to the terms (you read them all, right?)

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.

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.

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.
Go to the list of your Facebook Apps and click on the app we just created on the left

Click “Create Feed Template” in the list of links on the right

Make sure your correct App is selected in the box, then click Next
In the “One Line Template” box, paste this exact text
 1: {*actor*} commented on the {*blog*} post {*post*}.
In the “Sample Template Data” box, paste this (make sure quote marks are still quotes and not fancy curly-quotes)
 1: {"blog":"&lt;a href='http://test.domain.com'&gt;My Blog Name&lt;/a&gt;", "post":"&lt;a href='http://test.domain.com/post-url/'&gt;Test Post Title&lt;/a&gt;"}
Click Update Preview and make sure that you’re happy with the News Feed format (if not, change the One Line Template string)

Click Next

Now click Skip (and ignore/Okay any errors) until you get to the final page and then click “Register Template Bundle”

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:
 1: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
 2: &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 3: &lt;head&gt;
 4: &lt;title&gt;Cross-Domain Receiver Page&lt;/title&gt;
 5: &lt;/head&gt;
 6: &lt;body&gt;
 7: &lt;script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"&gt;&lt;/script&gt;
 8: &lt;/body&gt;
 9: &lt;/html&gt;
Add the “fb” XML namespace to the header.php file in your theme. Mine ended up looking like this (in PHP):
 1: &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" &lt;?php language_attributes(); ?&gt;&gt;
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):
 1: &lt;?php wp_enqueue_script('jquery'); ?&gt;
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:
 1: &lt;div id="comment-user-details"&gt;
 2: &lt;fb:login-button length="long" onlogin="update_user_details();"&gt;&lt;/fb:login-button&gt;
 3:
 4: &lt;p style="clear:left;"&gt;&lt;strong&gt;Or enter your details below:&lt;/strong&gt;&lt;/p&gt;
 5:
 6: &lt;p&gt;&lt;label for="name"&gt;Name &lt;?php if ($req) echo "(required)"; ?&gt;&lt;/label&gt;&lt;br /&gt;
 7: &lt;input type="text" name="author" id="name" value="&lt;?php echo $comment_author; ?&gt;" size="50" tabindex="1" /&gt;&lt;/p&gt;
 8:
 9: &lt;p&gt;&lt;label for="email"&gt;Email Address &lt;?php if ($req) echo "(required)"; ?&gt;&lt;/label&gt;&lt;br /&gt;
 10: &lt;input type="text" name="email" id="email" value="&lt;?php echo $comment_author_email; ?&gt;" size="50" tabindex="2" /&gt;&lt;/p&gt;
 11:
 12: &lt;p&gt;&lt;label for="url"&gt;Website&lt;/label&gt;&lt;br /&gt;
 13: &lt;input type="text" name="url" id="url" value="&lt;?php echo $comment_author_url; ?&gt;" size="50" tabindex="3" /&gt;&lt;/p&gt;
 14: &lt;/div&gt;
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:
 1: &lt;form action="&lt;?php echo get_option('siteurl'); ?&gt;/wp-comments-post.php" method="post" id="commentform" onsubmit="update_form_values();"&gt;
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:
 1: &lt;script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"&gt;&lt;/script&gt;
 2: &lt;style type="text/css"&gt;
 3: #fb-user { border: 1px dotted #C0C0C0; padding: 5px; display: block; height: 48px; }
 4: #fb-msg { float:left; }
 5: .fb_profile_pic_rendered { margin-right: 5px; }
 6: a.FB_Link img { float: left; }
 7: &lt;/style&gt;
 8:
 9: &lt;script type="text/javascript"&gt;
 10: var fb_connect_user = false;
 11: function update_user_details() {
 12: fb_connect_user = true;
 13: // Show their FB details
 14: if (!jQuery('#fb-user').length) {
 15: jQuery('#comment-user-details').hide().after("&lt;span id='fb-user'&gt;" +
 16: "&lt;fb:profile-pic uid='loggedinuser' facebook-logo='true'&gt;&lt;/fb:profile-pic&gt;" +
 17: "&lt;span id='fb-msg'&gt;&lt;strong&gt;Hi &lt;fb:name uid='loggedinuser' useyou='false'&gt;&lt;/fb:name&gt;!&lt;/strong&gt;&lt;br /&gt;You are logged in with your Facebook account. " +
 18: "&lt;a href='#' onclick='FB.Connect.logoutAndRedirect("&lt;?php the_permalink() ?&gt;"); return false;'&gt;Logout&lt;/a&gt;" +
 19: "&lt;/span&gt;&lt;/span&gt;");
 20: }
 21:
 22: // Refresh the DOM
 23: FB.XFBML.Host.parseDomTree();
 24: }
 25:
 26: function update_form_values() {
 27: if (fb_connect_user) {
 28: profile = jQuery('#fb-user').find('.FB_ElementReady .FB_Link')[1]['href'];
 29: user_id = profile.substring(profile.indexOf('?id=')+4);
 30: jQuery('#url').val(profile); // FB profile URL
 31: jQuery('#email').val(user_id+'@facebook.com'); // Can't get a real one from FB unfortunately. This saves their user id @facebook.com
 32: 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
 33: setCookie('fb_connect', 'yes');
 34: }
 35: }
 36:
 37: function setCookie(c_name,value,expiredays) {
 38: var exdate=new Date();
 39: exdate.setDate(exdate.getDate()+expiredays);
 40: document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
 41: }
 42:
 43: function getCookie(c_name) {
 44: if (document.cookie.length&gt;0) {
 45: c_start=document.cookie.indexOf(c_name + "=");
 46: if (c_start!=-1) {
 47: c_start=c_start + c_name.length+1;
 48: c_end=document.cookie.indexOf(";",c_start);
 49: if (c_end==-1) c_end=document.cookie.length;
 50: return unescape(document.cookie.substring(c_start,c_end));
 51: }
 52: }
 53: return "";
 54: }
 55:
 56: FB.init("YOUR-FACEBOOK-API-KEY", "/xd_receiver.htm");
 57: FB.Connect.ifUserConnected(update_user_details);
 58: if (getCookie('fb_connect') == 'yes') {
 59: setCookie('fb_connect', null);
 60: FB.Connect.showFeedDialog(YOUR-TEMPLATE-BUNDLE-ID, {'blog':'&lt;a href="&lt;?php bloginfo('home') ?&gt;"&gt;&lt;?php addslashes(bloginfo('name')) ?&gt;&lt;/a&gt;', 'post':'&lt;a href="&lt;?php the_permalink() ?&gt;"&gt;&lt;?php addslashes(the_title()) ?&gt;&lt;/a&gt;'}, null, null, null, FB.RequireConnect.promptConnect);
 61: }
 62: &lt;/script&gt;
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 “[email protected]” (their API doesn’t allow you to actually get it, to avoid spam I assume).

Enjoy.

HOWTO: Implement Facebook Connect on WordPress (in reality) « Dented Reality

Comments

Pierre Stoffe says

January 2, 2009 at 6:06 pm

Test

Cotton Rohrscheib says

January 2, 2009 at 6:55 pm

Testing to see if this shows up in Facebook now.

Benny Betatester says

January 5, 2009 at 5:50 am

En Ie6 y Ie7 te da error abajo cuando te logueas en facebook

Cotton Rohrscheib says

January 5, 2009 at 5:21 pm

Hola Benny –
¿Yo no soy seguramente cuál error que usted se refiere a, puede ser usted más específico?
Gracias,
Cotton

Rizwan Akram says

February 3, 2009 at 4:34 am

nice

WordPress Movie Plugin says

October 7, 2010 at 12:01 am

That’s definitely a great topic to write a post about, and I do plan on expanding upon various aspects of this post.

Beau Lebens Facebook Connect

Related

About Cotton Rohrscheib

Comments

Please Drop Your Questions or CommentsCancel reply

Share this post on:

Related

About Cotton Rohrscheib

Comments

Please Drop Your Questions or CommentsCancel reply