WordPress and Facebook Plugin


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

[hide]

//

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.

Installing the Plugin

  1. Copy the plugin to wp-content/plugins/wp-fbconnect under your WordPress installation.
  2. In the WordPress Admin panel, visit the plugins page and Activate the plugin.
  3. 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:

<?php do_action(‘fbc_display_login_button’) ?>

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 if ( $user_ID ) : ?>

<?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. However, the login button does not appear in the user is logged into WordPress.

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

fbc_display_login_state();

in the template where you would like it to appear.

External Documentation

Adam Breckler wrote up an installation tutorial: http://www.adambreckler.com/setting-up-facebook-connect-for-wordpress

Other Plugins to consider

Integrate Facebook Share on your WordPress with analytics: http://wordpress.org/extend/plugins/facebook-share-new/

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.

AJAX Login

TODO: Example will be implemented in a later release.

Known Problems

  1. The login status box (“Welcome, yourname”) has a fixed size instead of expanding to fit the name.

Future Work

  1. Support avatars and News Feed for blog posters.
  2. Notification when a friend comments on the same article you have.
  3. Widget to display your friends that have visited the blog.
  4. Widget to invite friends to read the article.
  5. Support for BuddyPress

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

<?php if ( is_user_logged_in() ) { fbc_display_login_state(); } else { fbc_display_login_button(); } ?>
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");

Facebook WordPress Plugins

1. Add to Facebook

Once you install this plugin on your WordPress blog, you can see a footer link at the bottom of each blog post. By clicking on this link, user can add the current post to their Facebook mini-Feed. You can choose either a text link “Share on Facebook” or a Facebook button or both can be displayed at the bottom of the post. By clicking on the link, the user can sign in to the Facebook account it he is not already logged in and the post will be automatically added to his Mini-Feed.

2. Facebook Comments

This plug-in will import all the comments that are written on Facebook to your blog to the exact post such that you can see all the comments that are been made for a particular post directly in your WordPress blog. By this way you will not miss a single comment made on your post and it automatically updates the comments. (Edit: Plugin is not working for some people and pending update by author)

3. Facebook Dashboard Widget

This WordPress plug-in for Facebook allows you to see all the updates from your friends and allows you to know what your friends are doing. This is a  dashboard widget that allows you to go side by side with your friends on Facebook and your WordPress blog. Using this widget you can know the updates from your Facebook friends even if the Facebook site is blocked.

4. WP-FBConnect

This plug-in will add Facebook functionality to your WordPress blog using the Facebook Connect APIs. You have to link WordPress and your Facebook account, and once they are linked you need not have to sign in again. You can publish the comments on your blog through the newsfeed and Facebook avatars will be displayed in the comments field.

5. Gigya

All the features in this plugins are fully configurable by the WordPress administration panel. By installing this plug-in to your WordPress blog, you can have a secure signup and login for users in your site. You can update your states on various social networking sites at once and also invite all your friends on various networks to visit and join in your blog site.

6. Facebook Photos plug-in

This plug-in allows you to add photos to the posts directly from the Facebook. All that you have to do is install and activate the plug-in and link your Facebook account with the WordPress blog. After that when you edit a new post in WordPress, a new Facebook icon in the add media section will be present – by clicking on the icon you can see the photos that you have uploaded to your Facebook account. You can then insert the photos to the post as small, medium and large size and can also align the image position.

Bookmark and Share
    • srikrishnan
    • January 28th, 2010

    Apache is a software foundation that develops and provides open source software that is meant to run web servers. Their primary product is their HTTP server which is the most popular HTTP server in use today. IIS or Internet Information Services is the software pack developed by Microsoft to provide their Windows operating system the ability to host internet services. IIS is second only to HTTP as the most used HTTP server in the world.

    The Apache web server is very popular due to the fact that is free. This is very advantageous to those who are just trying out web publishing and is still unsure about it. Apache is most commonly included in a totally free web server solution called LAMP (Linux/Apache/MySQL/PHP) which is a collection of open source software that would totally handle all of your web publishing needs from the OS down to the scripting language. Aside from being free, the open source community is also a good source of support for users who have the time and patience to ask for answers.

    IIS is from Microsoft and thus it would only run on the Microsoft Windows OS. Although it might seem to be free, the fact that you need to buy Windows to use it shatters that dream. The clear advantage with running IIS is the fact most people are already familiar with the Windows operating system and IIS would be a lot easier to learn for Windows users. IIS also comes with the support of the .NET Framework released by Microsoft; in fact, ASPX scripts are exclusive to IIS. Support for IIS is provided by Microsoft which is an assurance that you would have answers to your problems direct from the makers themselves.

    The IIS – Windows combo is both a boon and bane for users. The fact that they are made by the same company assures you that they would operate at the best capacity with each other. The only problem with the Windows OS is its too popular and a lot of malware, virus, and trojans exist on the Windows OS. Even more are being created everyday and that might pose a threat in the future.

    Summary:
    1. Apache is free while IIS is packaged with Windows.
    2. IIS only runs on Windows while Apache can run on almost any OS including UNIX, Apple’s OS X, and on most Linux Distributions.
    3. ASPX runs only in IIS.
    4. IIS has a dedicated staff to answer most problems while support for Apache comes from the community itself.
    5. IIS is optimized for Windows because they are from the same company.
    6. The Windows OS is prone to security risks.

    Read more: Difference Between IIS and Apache | Difference Between http://www.differencebetween.net/technology/difference-between-iis-and-apache/#ixzz0dtOaJJBy

  1. information is very helpful me:) thank you for his info

  2. nice blogs. keep writings.

  3. If you are looking in favour of a in the works to save spondulix at teleflora, coupon codes are the way to go. The are affirmed prohibited to eschew develop products that companies are frustrating to promote. In behalf of a coterie like teleflora that sells flowers, the coupon customs functions to relieve customers shelter money on flowers and gifts that they be afflicted with on loved ones.

    Teleflora Coupons

  1. June 12th, 2012
    Trackback from : wordpress plugin facebook

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: