Posts Tagged ‘ Facebook ’

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

WIDGET CHECKLIST

Thinking of developing a widget for folks’ desktops, mobile phones, blogs, or social networks (e.g. Facebook or MySpace)? First off, you need to decide what type of widget you’re going to be developing. There are three types:

Desktop (or Dashboard) Widget: Installed on your computer. Platforms include Yahoo Widgets, the OS X Dashboard, and the Windows Vista sidebar. One example is the customer-developed widget for the Mac that monitors availability of the daily product at Woot (http://www.apple.com/downloads/dashboard/shopping/wootcom.html).

Web Widget: For your blog or social media app like Facebook, MySpace, etc. One example of this is the LastFM widget (http://www.last.fm/widgets/) which allows you to “share your music anywhere.”

Mobile Widget: For mobile phones on the DotMobi domain, as well as iPhone-specific widgets. Some examples at https://www.widsets.com/index

When planning and developing your widget, it might be helpful to keep the following in mind…

FUNCTIONALITY / UTILITY

  • Is your widget useful to your target audience? What’s the hook (incentive) that will compel them to install it or use it? Does the widget solve the user’s business problems? Does it save them time or money, or make them more productive? Users listen to WII-FM (“What’s In It For Me?”).

  • Are the functions your widget provides on-message with your brand?

  • Is the data delivered by the widget always fresh and up-to-date?

  • Are there features that leverage the community of users?

  • Does your widget have the capacity to go viral? In other words, is it contagious? And is it “slippery” – in other words, easy to share or distribute to friends?

FINANCIAL

  • Is your widget ROI positive?

  • What are your objectives? Brand building? PR? Links? Lead generation? Driving conversions? Increasing the customer’s AOV?

  • Set realistic marketing and ecommerce goals for the widget and track success.

  • What is your budget for widget development and maintenance? What if your widget is a huge hit…do you have an action plan in place to upgrade all aspects of service?

PERFORMANCE & RELIABILITY

  • Monitor and evaluate the widget’s server reliability (uptime). Fully QA and stress test the widget.

  • Determine the widget’s loading time and optimize it for maximum performance.

  • If it’s a blog widget, make sure it doesn’t hold up the rest of the blogger’s page from loading quickly if the server that serves up your widget becomes unresponsive.

  • What is your adoption rate of your widget? Conduct traffic volume scalability testing to ensure your widget’s servers can cope.

TECHNICAL

  • If a web widget, does its HTML code validate?

  • Is the widget code well-documented (for the benefit of your programmers)?

  • If a web widget, will updated versions of the widget require that the blogger/webmaster update your code they inserted into their template?

  • If it’s a Flash-based widget, does it have an HTML wrapper?

USABILITY AND ACCESSIBILITY

  • Evaluate the usability of the widget’s user interface and of the installation process (via surveys, focus groups, and/or usability consultants).

  • Does your widget follow the KISS (Keep It Simple, Stupid) principle? Don’t try to make the widget do too many things; stay focused.

  • Design your widget for the market you are targeting. Use language that they identify with.

  • Consider allowing the user installing the widget to customize its look to their own tastes.

  • Check for browser compatibility on various versions of Internet Explorer, Firefox, Safari, Opera, etc.

  • Check for platform compatibility on various versions of Windows, Mac, Linux.

  • Conduct international usability tests. Does the widget offer localized content for international users? Has the widget been translated into foreign languages?

  • Is the site mobile device friendly?

  • Is the widget usable for people with disabilities?

  • If a blog widget, is the widget printer friendly? Or does it mess up the formatting of the page when printed?

SEO

  • Don’t neglect PageRank as your incentive to build widgets. If nothing else, a good widget can serve as link bait, driving lots of inbound links to your web site.

  • Web widgets can pass PageRank from the website where the widget is placed to your site, but only if done correctly. To help increase your chances of the links being counted for PageRank:

  • If your widget is coded in JavaScript, place your text links outside the JavaScript, or use a <noscript> tag.

  • If coded in Flash, you can utilize progressive enhancement or an HTML “wrapper”.

  • For iframe widgets, place your text links outside the iframe, or use a <noframe> tag.

  • The best widgets for SEO are WordPress widgets (written in PHP) or HTML-based widgets because the widget’s HTML code, including links and content, is fully accessible to spiders and integrated into the rest of the blog’s HTML. WordPress widgets are similar to WordPress plugins.

  • Include relevant keywords in the anchor text of the links back to your site. For example, instead of a link saying, “Your Brand,” spice it up some and say “Your Brand’s Weather Widget,” or other keyword text that describes what your widget is about.

  • If it’s a blog widget, have a plugin version of it for major blog platforms such as WordPress. Thus the links and content generated by the widget will become integrated into the rest of the blog’s HTML code, and the links will appear more “real” to the search engines.

  • Create your links with a “target=_blank” code so that webmasters are less inclined to remove the link. Some webmasters believe that widgets “steal’ traffic from their website or blog.



Bookmark and Share