Social Plugin for WordPress 1.0.1 Available

I am pleased to announce that the Zolton.org Social Plugin for WordPress v1.0.1 is now available for download via the WordPress Plugin Directory.

The Zolton.org Social Plugin is a simple plugin for WordPress that integrates a blog with popular social networking sites such as Facebook and Twitter.

For more information, visit the official project page or the WordPress plugin page.

Facebook FBML Tags Fail to Load in IE

Today I learned that Internet Explorer’s support for custom tags requires that a namespace be defined for the tag, otherwise the custom tag is ignored. This is particularly problematic for Facebook’s FMBL tags which are used in place of iframes to include plugins such as the Like Button, Comments, and Like Box.

The solution is simple. One need only declare the namespace for the FBML tags in the <html> tag, like so:

<html xmlns:fb="http://www.facebook.com/2008/fbml">

That’s it. Now FBML tags are parsed properly by Facebook’s JavaScript SDK.

How To Add Facebook Comments to WordPress (Without Plugins)

This tutorial will show you how to add Facebook Comments to WordPress without using plugins. This includes the Facebook Comments Plugin with Moderation Tools. Why not use plugins? Because I wanted to learn how to add Facebook comments to a website manually. Other websites may use a different CMS and may not have the ability to use plugins.

Step 1: Create a Facebook App

First, create a new Facebook App to represent your website. You can do this from Facebook’s developers website. Click “+ Set Up New App” and enter your website name in the “App Name” field. Agree to the terms or service and click “Create App”.

Once your app is created, you will be presented with a form that will allow you to edit your app. You don’t need to edit any settings at this point, simply click on the tab labeled “Web Site”, and note your Application ID. The Application ID will be used later to identify who can moderate comments posted to your website.

Step 2: Add the Facebook JavaScript SDK to WordPress

Next, you will need to add the Facebook JavaScript SDK to your WordPress template. For the sake of this tutorial, I will be modifying the Twenty Ten template that ships with WordPress 3.x. Add the following code to header.php, just after the body tag. Substitute the Application ID shown here on line 5 for the one in the previous step.

<!-- Facebook JavaScript SDK -->
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: '177594542288018', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>
<!-- End Facebook JavaScript SDK -->

Step 3: Enable Moderation Tools

While still editing header.php, add the following code between < head >…< /head >. Replace the Application ID in this example with the one your created in step 1. This Open Graph tag tells Facebook to associate this page with the specified application.

<!-- Facebook Open Graph Tags -->
<meta property="fb:app_id" content="177594542288018"/>
<!-- End Facebook Open Graph Tags -->

Step 4: Add the Facebook Comment Plugin to WordPress

Now that you’ve added the JavaScript SDK to your header template, you’ll want to add the Facebook Comment Plugin to comments.php.

I opted to remove WordPress comments from my template, but you need not do the same. WordPress comments and Facebook comments can live side by side.

In Twenty Ten’s comments.php, you will see a line similar to this.

<?php
	// You can start editing here -- including this comment!
?>

Add the following code after that line.

<?php if( comments_open() ): ?>
    <div id="facebook-comments">
    <h3 id="reply-title">Leave a Reply</h3>
    <fb:comments href="<?php the_permalink(); ?>" num_posts="8" width="610"></fb:comments>
    </div>
<?php endif; // end comments_open() ?>

This bit of code will check to see that comments are open for this particular post before inserting the Facebook comment code. You can modify the num_posts and width attributes to suit your needs.

Step 5: Verify Facebook Comments

If you executed the previous steps correctly, you should be able to browse to any post on your website, scroll down to the comments section, and see something like this.

Assuming you are logged into Facebook when you do this, you should see an option to add a new comment, a “Moderator View” option, and an option to modify settings. If you do not see “Moderator View” or “Settings”, verify that the Application ID from step 1 is correctly specified in the header.

To moderate comments, check Facebook’s Comment Moderation Tool.

It should be noted that comments from unverified Facebook users will not show up in the comment moderation tool. I have a test user that has an unverified account, and its comments to not show up despite the fact that the test user can see its own comments in WordPress. Comments from you, your designated moderators, and verified Facebook users should show up fine.

Please let me know if you have any questions or comments about this tutorial.

FAQ

Q. Something’s not working?!

A. The first thing to try is Facebook’s URL Linter. It will tell you if something is wrong with your setup.

Update

I have written a very simple WordPress plugin to do this and more. Please see the Social Plugin for WordPress page for more information.

How To Hide Facebook’s Like Box Border

This tutorial will show you how to hide the border around the Facebook Like Box. It takes advantage of negative margins and the overflow property of CSS to hide the border of the Facebook Like Box under a container div.

This is what the Facebook Like Box looks if you apply the plugin code directly to your site without any modification. Note that I set “header” to false so it does not display the text “Find us on Facebook”.

First, wrap the plugin code in two divs. Here I called the outer div “facebook-like-box” and the inner div “inner”.

<div class="facebook-like-box">
    <div class="inner">
        <!-- Facebook Plugin Code --->
        <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
        <fb:like-box href="http://www.facebook.com/pages/mypage/18267678998894" 
        width="250" height="250" 
        colorscheme="light" show_faces="true" 
        stream="false" header="false"></fb:like-box>
        <!-- End Facebook Plugin Code -->
    </div>
</div>

Next, increase the height and width of the Facebook Like Box by four pixels. In this example, I have increased the height and width from 250 pixels to 254 pixels. This will increase the size of the Like Box by two pixels in every direction.

<fb:like-box href="http://www.facebook.com/pages/zoltonorg/182677118445608" 
    width="254" height="254" 
    colorscheme="light" show_faces="true" 
    stream="false" header="false">

Finally, update your style sheet with the following modifications. Set the width and the height of the outer div to the original width and height, not the increased width and height from the step above. In this example, the original plugin code specified a width and height of 250 pixels. This will hide the Like Box border under the outer div.

.facebook-like-box
{
    width: 250px;
    height: 250px;
    overflow: hidden;
    position: relative; /* For IE7 Compatibility */
}

.facebook-like-box .inner
{
    margin: -2px 0 0 -2px;
}

Once the aforementioned modifications are applied, you ought to end up with something that looks like this.

If you have any questions about this tutorial, please feel free to leave a comment.

Masquerade BBS Facebook App

The Masquerade BBS is now available as a Facebook application. The application leverages Rick Parrish’s fTelnet allowing visitors to telnet directly to the Masquerade BBS from Facebook. The fTelnet session is loaded in a Canvas Page and the visitor is authenticated and authorized via the OAuth Dialog using Facebook’s JavaScript SDK.

Sysops, if you would like to create a similar application for your BBS, please let me know. I may package this with instructions and distribute it to the BBS community.

Check out the Masquerade BBS Facebook App.