WP-FBConnect
From Facebook Developer Wiki
WP-FacebookConnect adds Facebook functionality to WordPress using the Facebook Connect APIs. It provides single sign-on, avatars, and News Feed publication of comments.
You can download the plugin from http://wordpress.org/extend/plugins/wp-facebookconnect/.
Please contact ahupp at facebook.com with any questions or problems.
Contents |
[edit] How Does it Work?
The first time a user clicks the Connect button, the plugin creates a new WordPress user named 'fbN', where N is that user's Facebook user ID. The Facebook user ID is also stored in the wp_usermeta table under the key fbuid. The plugin can securely identify the Facebook user because it received signed session cookies along with the request.
Once the WordPress and Facebook accounts are linked and the Facebook user ID is verified, the plugin sets a WordPress login cookie. The page reloads and the user will be logged into the blog.
Most login state handling occurs in fbc_init_auth.
[edit] Installing the Plugin
- Copy the plugin to wp-content/plugins/wp-fbconnect under your WordPress installation.
- In the WordPress Admin panel, visit the plugins page and Activate the plugin.
- Visit the settings page and select "Facebook Connect". Follow the given instructions to configure the plugin and obtain a Facebook API key.
A minimal amount of theme integration is necessary. Open the 'comments.php' file in the theme and add the following line where the Connect login button should be inserted:
The reason for calling fbc_display_login_button via do_action instead of directly is to avoid spewing errors if the plugin is disabled. It would be equally correct to directly call fbc_display_login_button() here.
As a simple example, the comments.php file on my blog looks like:
... <?php else : ?> .... <?php endif; ?>
<?php do_action('fbc_display_login_button') ?>
Note: The fbc_display_login_button function should be called regardless of whether the user is currently logged into WordPress or not.
You should also make sure the following required hooks appear somewhere in your template. These appear in the default template but may not appear in a modified template.
- language_attributes() should be called within the declaration of the HTML tag in header.php.
- wp_head() and {{c|wp_footer() should be called in header.php and footer.php, respectively.
- comment_form() sets up the Feed form.
There are also some optional but useful hooks that should appear:
- get_avatar in a comment will display the commentor's Facebook profile pic.
See config.php and the Settings page for more configuration and customization options.
If you don't want the user login state box to display in the upper right corner of the screen, simply add a call to
[edit] External Documentation
Adam Breckler wrote up an installation tutorial: http://www.adambreckler.com/setting-up-facebook-connect-for-wordpress
[edit] Other Plugins to consider
Integrate Facebook Share on your Wordpress with analytics: http://wordpress.org/extend/plugins/facebook-share-new/
[edit] About the nofollow Attribute
When a Facebook Connect user posts a comment, the Author field for the comment links back to that user's public profile page at Facebook. For instance, my comments link back to http://www.facebook.com/people/Adam-Hupp/806285106.
To reduce spamming, WordPress automatically adds the nofollow attribute to all comment links. However, this is undesirable when the links are generated by a trusted source (for example, the plugin). For this reason the plugin will remove the nofollow attribute from all Facebook user comments. You can configure this on the Settings page.
[edit] AJAX Login
TODO: Example will be implemented in a later release.
[edit] Known Problems
- The login status box ("Welcome, yourname") has a fixed size instead of expanding to fit the name.
[edit] Future Work
- Support avatars and News Feed for blog posters.
- Notification when a friend comments on the same article you have.
- Widget to display your friends that have visited the blog.
- Widget to invite friends to read the article.
- Support for BuddyPress
[edit] Troubleshooting / FAQ
The best tool for troubleshooting is to load a post with the string "?fbc_verbose_debug" at the end of the URL. This will try to identify the most common misconfigurations. Note that this only works in Firefox at the moment.
Q. I don't see the Connect button.
A1. Currently the Connect button will not display for users that are already logged into WordPress.
A2. Make sure there is a call to the wp_head hook in the header.php file of your theme, and that the wp_footer hook is also called somewhere.
A3. See the question entitled "It doesn't work in IE".
A4. Look at the generated page and find the URL to the fbconnect.js file. It should look something like 'http://somesite.com/wordpress/wp-content/plugins/wp-fbconnect/fbconnect.js'. Load this page for your site and verify that something like JavaScript is returned. If you get a 404 error or some other page you'll need to fix your access rules/installation/rewrite rules so that the file is accessible.
Q. Under what license is this plug-in released? Can we edit and release new versions based on it?
A. GPL Open Source.
Q. It takes too long for the user profiles, logged in user name, and login button to appear. How can I make it faster?
A. Loading of these page elements is triggered by the call to FBConnect.init(...) generated in fbc_footer. If there is large amount of JavaScript (e.g., ads or tracking) that appears before that call it will slowdown Facebook Connect loading. Make sure the FBConnect.init(...) call comes as close to the end of all XFBML content as possible.
Q. A user logged in to wp-fbconnect cannot post comments. The "submit" button does nothing.
A. The textarea containing the comment text may have had its id attribute renamed. Find the textarea with name=comment and ensure that its id attribute is also equal to 'comment'
Q. It doesn't work in IE.
A. You're missing a call to language_attributes() in the html tag of your theme. Edit header.php and make sure the html tag looks like this: http://trac.wordpress.org/browser/trunk/wp-content/themes/default/header.php
Q. How do I get this to work with wp-super-cache?
A. See http://www.allfacebook.com/2008/12/how-to-make-facebook-connect-work-with-wp-super-cache/
Q. I get a error that says "parse error, unexpected T_OBJECT_OPERATOR", or some other parse error.
A. The plugin only supports PHP5 and you are using PHP4. Please upgrade. If you are a user of 1and1 hosting, follow these instructions: http://www.thecodecave.com/article206. The .htaccess file it describes must be placed in the root directory of your WordPress installation.
Q. How do I change the text "Connect with your Facebook Account" that appears above the connect button?
A. Go to yourblog.url/wp-admin/plugin-editor.php?file=wp-fbconnect/fbconnect.php. Search for "Connect with" and replace that line with any text you like or remove it.
Q. I setup the plugin and then moved it to a new site. Now I receive and error about an invalid Connect URL. How do I fix this?
A. The Connect URL is configured automatically each time you press "Submit" on the settings page. Try going to the settings page and pressing Submit again.
Q. How do I change my story template?
A. Update the template in config.php. Then, go to the settings page and check the box that says "Force Reload of Template Bundle from config.php (resets ID): " and click "Update Options".
Q. The white background on the login button looks bad because I have a dark background on my blog. How do I make it look better?
A. On line 99 of common.php change the background="white" attribute to light or dark, as needed.
Q. How can i use my own CSS style?
A. On line 358 of fbconnect.php delete the CSS stylesheet declaration line then use you own CSS file or write styles in default style.css file of current active theme.
Q. How can i show/use it whatever i want in my template?
A. Here is an example of using it with sidebar.php
Please note the plugin should activated before using such code and FBC_USER_PROFILE_WINDOW should set to false to stop rendering the loggedin user info in absolute position.
Q. How can i change the facebook login button?
A. Update the code at line 99 of common.php according to the attributes described here.
Q. I have a Facebook Fan box on my Wordpress blog and am also using this plugin but the plugin is saying it's under development and might be using the wrong app ID. What's going on?
A. Out of the box, you can only have one connection to Facebook in each window. Since the fb:fan tag (which the fan box uses) essentially creates a placeholder app and references that, it may hijack any other attempts to connect to Facebook. To get around this, use an iframe that references a file like this as the src:
<!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" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Fan widget</title>
</head>
<body>
<base target="_parent" />
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<fb:fan profile_id="YOUR_PAGE_ID" stream="1" connections=""></fb:fan>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function()
{
FB.init("YOUR_FAKE_API_KEY", "YOUR_WP_URL");
});
</script>
</body>
</html>
The YOUR_FAKE_API_KEY can be found in the generated code that Facebook gives you when you create a Fan box: FB.init("YOUR_FAKE_API_KEY");
