Facebook Connect launched to the public less than a year ago, and already it’s seen an incredible amount of traction. Unfortunately, for those people with little to no coding experience, implementing Facebook Connect has seemed like more trouble that it was worth. Today, Facebook has an answer: Facebook Connect Wizard and Playground.

Facebook writes that “you can now incorporate Facebook Connect into your site in 3 easy steps.” The process is simple. First, you enter the name of your site and its URL. Then Facebook asks you to download and then upload a special file to your site’s main directory. And.. that’s about it. Once you’ve done that, Facebook will present you with its Playground — a list of code snippets you can embed on your site to round out the functionality, including Login buttons, profile photos, publishing items to News Feeds, and rendering photos of a user’s friends.

Deciding to put their little wizard to the test, I tried to implement Connect on one of my personal sites (note that I’ve never tried to implement Connect before so I really didn’t know what I was doing). And to my surprise, it worked: I managed to have a very basic form of Connect up and running on my site within all of two minutes. It will obviously take longer to make sure the new icons and buttons play nicely with your site’s design, but it’s really surprisingly easy.

Crunch Network: CrunchBoard because it’s time for you to find a new Job2.0

Apparently it’s embrace the developer community day at Facebook. In addition to the news that they are making activity stream data available to third party developers, they’ll also be making an announcement around OpenID, we’ve heard. And importantly, the announcement is that they’ll become what’s called a relying party, meaning anyone with an OpenID (Yahoo, Google, AOL, MySpace are all issuers, and Microsoft is in beta) can create and log into a Facebook account using those credentials.

Let me take a step back. OpenID is a distributed single sign on solution that allows people to sign into different services with the same login credentials. There are two ways companies/websites can participate in the OpenID framework – as “issuing parties” or as “relying parties.” Issuing parties make their user accounts OpenID compatible. Relying parties are websites that allow users to sign into their sites with credentials from Issuing parties. Of course, sites can also be both. In fact, if they aren’t both it can be confusing and isn’t a good user experience.

All the big guys are now Issuing Parties, which allow their users logging in all over the Internet with those credentials. But none of them accept IDs from anywhere else, so anyone that uses their services has to create new credentials with them. It’s all gain, no pain. There are two exceptions – AOL Mapquest and Google’s Blogger – but for the most part the big guys are issuers, not relying parties. And that has led us in the past to accuse them of exploiting OpenID for their own benefit without giving back to the community. See our post Is OpenID Being Exploited By The Big Internet Companies?

Facebook has been a wild card with OpenID. They’ve talked about adopting it eventually, but their Facebook Connect product has actually muddled the situation – Facebook actually competes directly with OpenID when allowing users to sign in to third party sites via Facebook Connect.

Now that’s going to change, and we’ll soon see users have the ability to sign in to Facebook using, say, their MySpace credentials if they choose to. I like the thought of that.

But it still may be a while before we see the other major players take similar steps. Facebook has never really had notion of a user ID – you’ve always logged in with your Email address, which could have come from any number of other services, so Facebook isn’t really sacrificing much here. Instead of a user name, Facebook members are assigned a meaningless user ID number (though they’re experimenting with vanity pages).

Contrast that with Yahoo and Google, both of which have built up their own login systems, which can be used across multiple services using a single persistent account name. Users benefit because they can seamlessly jump between services, and Yahoo and Google get their users to stay within their own suite of products. There’s a good chance they’re not going to give that up so readily.

Crunch Network: CrunchBoard because it’s time for you to find a new Job2.0

One of the reasons people love WordPress so much is its great flexibility. You can change the software’s appearance with themes. You can enhance its functionality with plug-ins. And, last but not least, you can totally unleash WordPress’ power with hacks. Some time ago, we wrote a post showing 10 Killer WordPress Hacks.

Today, let’s do it again with 10 new and totally killer WordPress hacks to make your blog stand out from the crowd. As usual, we won’t just list the hacks alone. In each entry, you’ll find an explanation of the code as well as the kinds of problems that the hack solves.

You may be interested in the following related posts:

• 15 Useful Twitter Hacks and Plug-Ins For WordPress
• Mastering WordPress Shortcodes
• 10 Steps To Protect The Admin Area In WordPress
• 8 Useful WordPress SQL Hacks
• 10 Useful RSS-Tricks and Hacks For WordPress

1. Create TinyURLs On The Fly

The problem. Because Twitter has become a social media revolution, many bloggers and Twitter users enjoy sharing blog posts they have found and liked on Twitter. However, manually creating a TinyURL before tweeting can get a little tedious. As you probably know, Twitter can bring a lot of traffic to your blog, so it is in your interest to consistently provide short URLs to your readers.

The solution. To use this recipe, follow the simple steps below:

1. Open your functions.php file.
2. Paste the following code in the file:

   function getTinyUrl($url) {
       $tinyurl = file_get_contents("http://tinyurl.com/api-create.php?url=".$url);
       return $tinyurl;
   }

3. Open your single.php file and paste the following in the loop:

   <?php
   $turl = getTinyUrl(get_permalink($post->ID));
   echo 'Tiny Url for this post: <a href="'.$turl.'">'.$turl.'</a>'
   ?>

4. That’s all you need. Each of your posts now has its own TinyURL, ready for tweeting!

Code explanation. The popular URL shortening service TinyURL provides a quick API that creates TinyURLs on the fly. When you pass a URL to http://tinyurl.com/api-create.php, the API immediately prints the related TinyURL on the screen.

Using the PHP function file_get_contents(), we can get it and assign it to the $tinyurl variable. The last part of the code retrieves the post’s permalink and passes it as a parameter to the getTinyUrl() function previously created.

Source:

• How to: Automatically provide TinyURLs for your WordPress blog posts

2. List Upcoming Posts

The problem. If you often schedule posts to be published, how about displaying them in a list? This will make your readers look forward to what you’re going to publish in a few days and can help you reach new RSS subscribers. Implementing this functionality on your WordPress blog isn’t hard at all.

The solution. Nothing hard here. Just copy this code and paste it anywhere in your theme files.

<div id="zukunft">
	<div id="zukunft_header"><p>Future events</p></div>

	<?php query_posts('showposts=10&post_status=future'); ?>
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<div >
			<p class><b><?php the_title(); ?></b><?php edit_post_link('e',' (',')'); ?><br />

			<span class="datetime"><?php the_time('j. F Y'); ?></span></p>
		</div>
	<?php endwhile; else: ?><p>No future events scheduled.</p><?php endif; ?>

</div>

Once you’ve saved the file, your upcoming posts will be displayed on your blog.

Code explanation. This code use the super-powerful query_posts() WordPress function, which allows you to take control of the WordPress loop.

The parameter used is post_status, which allows you to get posts according to their status (published, draft, pending or future). The showposts parameter is also used to define how many items you’d like to get. You can change the value of this parameter on line 4 to retrieve more or less than ten posts.

Source:

• How to: List future posts

3. Create A “Send To Facebook” Button

The problem. In the first hack, we noted that Twitter can bring a lot traffic to your blog. Another website that can boost your traffic stats easily is Facebook. In this hack, let’s see how we can create a “Send to Facebook” button for your WordPress blog.

The solution.

1. Open the single.php file in your theme.
2. Paste the following code in the loop:

   <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="blank">Share on Facebook</a>

3. Alternatively, you could use the getTinyUrl() function to send a short URL to Facebook:

   <?php $turl = getTinyUrl(get_permalink($post->ID)); ?>
   <a href="http://www.facebook.com/sharer.php?u=<?php echo $turl;?>&t=<?php the_title(); ?>" target="blank">Share on Facebook</a>

4. That’s all. Your readers will now be able to share your blog post on Facebook with their friends!

Code explanation. This useful hack is very easy to understand: the only thing we do here is retrieve the post’s permalink and title and send them as parameters to http://www.facebook.com/sharer.php.

In the alternative method, we used the getTinyUrl() function (created in the previous hack) to send a short URL instead of the post’s permalink.

Source:

• How to: Add a “Share on Facebook” link to your WordPress blog

4. Create A Maintenance Page For Your WordPress Blog

The problem. One thing I really like about Drupal is the option to temporarily redirect visitors to a maintenance page. Sadly, WordPress doesn’t have this feature. When you upgrade your blog, switch themes or make design changes, you may not want your visitors to see your blog as it is being tweaked, especially if it has design or code problems or, even worse, security gaps.

The solution. To solve this problem, we use the power of the .htaccess file. Just follow the steps below to get started.

1. Create your maintenance page. A simple WordPress page is generally sufficient.
2. Find your .htaccess file (located at the root of your WordPress installation) and create a back-up.
3. Open your .htaccess file for editing.
4. Paste the following code:

   RewriteEngine on
   RewriteCond %{REQUEST_URI} !/maintenance.html$
   RewriteCond %{REMOTE_ADDR} !^123\.123\.123\.123
   RewriteRule $ /maintenance.html [R=302,L]

5. Replace 123\.123\.123\.123 on line 3 with your IP address (Don’t know it?). Make sure to use the same syntax.
6. Now, all visitors except you will be redirected to your maintenance page.
7. Once you’re done tweaking, upgrading, theme switching or whatever, re-open your .htaccess file and remove (or comment out) the redirection code.

Code explanation. The .htaccess file, which controls the Apache Web server, is very useful for these kinds of tasks.

In this example, we state that any visitor who has an IP different from 123.123.123.123 (which doesn’t request maintenance.html) should be redirected to maintenance.html.

By replacing 123.123.123.123 with your own IP address, you make sure you’re still allowed to browse your blog normally, while others are redirected to maintenance.html.

Source:

• 10 awesome .htaccess hacks for WordPress

5. Display Related Posts Without A Plug-In

The problem. One well-known way of keeping visitors on your blog longer and helping them discover news posts is to display, usually at the end of the article, a list of related content.

Many plug-ins will do this job, but why not super-charge your theme by integrating this functionality by default?

The solution.

1. Open the single.php file in your theme.
2. Paste the following code in the loop:

   <?php
   $tags = wp_get_post_tags($post->ID);
   if ($tags) {
     echo 'Related Posts';
     $first_tag = $tags[0]->term_id;
     $args=array(
       'tag__in' => array($first_tag),
       'post__not_in' => array($post->ID),
       'showposts'=>5,
       'caller_get_posts'=>1
      );
     $my_query = new WP_Query($args);
     if( $my_query->have_posts() ) { ?>
   <ul>
   
   </ul>
   

3. Save the file, and then have a look at your blog: related posts are automatically displayed!

Code explanation. This hack uses tags to retrieve related posts. The first thing it does is get the post’s tags. If a post has tags, the first one is extracted and used in a query that retrieves posts with the same tag.

By default, this code displays up to five related posts. To change this number, simply edit line 9 of the code.

Source:

• How to: Show related posts without a plug-in

6. Automatically Retrieve The First Image From Posts On Your Home Page

The problem. Many WordPress users use custom fields to display a thumbnail on their blog home page. Of course, this is a nice solution, but how about automatically retrieving the first image from a post and using it as a thumbnail?

The solution. This hack is quite easy to implement:

1. Open the functions.php file in your theme.
2. Paste this code in. Don’t forget to specify a default image on line 10 (in case a post of yours does not have an image).

   function catch_that_image() {
     global $post, $posts;
     $first_img = '';
     ob_start();
     ob_end_clean();
     $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
     $first_img = $matches [1] [0];
   
     if(empty($first_img)){ //Defines a default image
       $first_img = "/images/default.jpg";
     }
     return $first_img;
   }

3. Save the functions.php file.
4. On your blog home page (index.php), call the function this way to get the URL of the first image from the post:

   <?php echo catch_that_image() ?>

Code explanation. The function uses the global variable $post to parse the post’s content with a regular expression. If an image is found, its URL is returned by the function. If not, the default image URL is returned.

Source:

• How to: Get the first image from the post and display it
• Retreive first image from post

7. Resize Images On The Fly

The problem. When you use thumbnails on your blog’s home page or even images in posts, having to manually resize them is boring and wastes a lot of time. So, why not use the power of PHP to do it?

The solution. To achieve this hack, just follow these simple steps:

1. Get this script and save it on your computer (I’ll assume you’ve named it timthumb.php).
2. Use an FTP program to connect to your server and create a new directory called scripts. Upload the timthumb.php file to it.
3. Once done, you can display images like so:

   <img src="/scripts/timthumb.php?src=/images/whatever.jpg&h=150&w=150&zc=1" alt="Screenshot" />

   In other words, you just call the timthumb.php file and pass your image as a parameter. The same goes for your desired width and height.

Code explanation. The timthumb.php script use the PHP GD library, which allows you to manipulate images dynamically with PHP. GD is installed by default on all servers running PHP5. If you’re not running PHP5, you’ll have to check if GD is installed before using this script.

The timthumb.php file gets the parameters you’ve passed to it (image URL, width and height) and uses it to create a new image with your stated dimensions. Once that’s done, the image is returned to you.

Source:

• TimThumb PHP script released
• How to: Resize images on the fly

8. Get Your Most Popular Posts Without A Plug-In

The problem. Displaying your most popular posts is a good way to make visitors stay longer on your blog, as is displaying related posts. Many great plug-ins can list your most popular posts, but again, why use a plug-in when you can simply hack your WordPress theme to do it automatically?

The solution. Just paste the following code anywhere in your theme files (for example, in sidebar.php). To change the number of displayed posts, simply change the “5″ on line 3 to your desired number.

<h2>Popular Posts</h2>
<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>

<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> {<?php echo $commentcount ?>}</li>
<?php } } ?>

</ul>

Code explanation. This code executes an SQL query to the WordPress database, using the $wpdb object, to get a list of the five posts with the most comments. The results are then wrapped in an unordered HTML list and displayed on screen.

Source:

• Create your own popular posts page

9. Highlight Searched Text In Search Results

The problem. The WordPress search engine system is often criticized for not being powerful enough. One of its weakest points in my opinion is that searched text is not easily distinguishable from the rest of the text. Let’s solve that!

The solution.

1. Open your search.php file and find the the_title() function.
2. Replace it with the following:

   echo $title;

3. Now, just before the modified line, add this code:

   <?php
   	$title 	= get_the_title();
   	$keys= explode(" ",$s);
   	$title 	= preg_replace('/('.implode('|', $keys) .')/iu',
   		'<strong class="search-excerpt">\0</strong>',
   		$title);
   ?>

4. Save the search.php file and open style.css. Add the following line to it:

   strong.search-excerpt { background: yellow; }

That’s all. Better, isn’t it?

Code explanation. Once again, regular expressions are a lifesaver. The regexp parses the $s content ($s is the variable containing the searched text) and automatically adds a <strong class=”search-excerpt”> element around any occurrences of $s.

Then, you simply modify your style.css file to give searched text a special style and make it more visible to your readers.

Sources:

• Make WordPress’ search function suck less.
• How to: Highlight searched text in search results

10. Disable Widgetized Areas Without Editing Theme Files

The problem. Widgets are very useful, but sometimes you don’t need them on a particular page or post. Sure, you can create a page template for a particular page or even remove the widgetized zone from the code, but a much better and more elegant solution exists.

The solution. To do this, simply add the following code to your functions.php file:

<?php
add_filter( 'sidebars_widgets', 'disable_all_widgets' );

function disable_all_widgets( $sidebars_widgets ) {
	if ( is_home() )
		$sidebars_widgets = array( false );
	return $sidebars_widgets;
}
?>

Code explanation. This code first adds a filter to the sidebars_widgets WordPress function. Now every time WordPress tries to execute this function, it will execute the disable_all_widgets function we just created.

The disable_all_widgets function uses WordPress conditional tags (in this example, is_home(), but you can use any conditional tag) to disable all widgets if a visitor is on a particular page or post.

Source:

• Disable widget areas (sidebars) without touching theme templates

Related posts

You may be interested in the following related posts:

• 15 Useful Twitter Hacks and Plug-Ins For WordPress
• Mastering WordPress Shortcodes
• 10 Steps To Protect The Admin Area In WordPress
• 8 Useful WordPress SQL Hacks
• 10 Useful RSS-Tricks and Hacks For WordPress

About the author

This post was written by Jean-Baptiste Jung, a 27-year-old blogger from Belgium, who blogs about WordPress at WpRecipes, about Photoshop at PsdRecipes and about everything related to blogging and programming at Cats Who Code. You can stay in touch with Jean by following him on Twitter.

(al)

© Jean-Baptiste Jung for Smashing Magazine, 2009. |
Permalink |
104 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: facebook, hacks, maintenance, related, techniques, tinyurl, upcoming, wordpress

On Monday, Facebook released a sample site that demonstrates how Facebook Connect (previous coverage), their new authentication methodology for logging into third-party web sites, will work. On the demo site, instead of registering for an account, you’re presented with an option to use Facebook Connect instead. The Facebook team built the site so developers interested in using this technology could see how it works. The source code was provided as well.

The sample site is called The Run Around and it’s just a simple site that lets runners log their runs and chart progress on their workout routines. From the homepage, you’re presented with two options: on the left, you can login with a username and password and on the right, you can click the Facebook Connect button.

Of course, before you can login, you have to register. When you click the link to register, you have the option of filling out the fields to provide your username, password, name, etc. Alternatively, you have the option of clicking Facebook Connect.

When you do so, a dialog box appears and all you need to do is click the “Connect” button to authenticate with the site (assuming you’re already logged in). Note there’s also a checkbox that you can leave checked (the default) or uncheck. It reads: “Let this application publish one line stories without my approval.”

Click the button and you’re in.

Once you’re logged in, you’ll see that your Facebook friends already using the site will already have been added for you. Although you know that’s one of the main purposes of this technology, it’s pretty amazing to think that at last, the tedious process of finding and adding friends will finally be over.

You’ll Never Have To Add Friends Again – You Just Have To Add Them To Facebook

Let’s assume for a minute that Facebook Connect really takes off and is available on every social web site you can think of. If that’s the case, then the only way to really make that friend graph of yours portable and easy to use is to add all of those friends to Facebook…does anyone have a problem with that?

Not long ago, Facebook established itself as a place to share your personal activities on the web. Here, people share family photos, videos from social gatherings, and post personal comments on each other’s walls. Facebook, at least back in the beginning, was a social hangout – not some place where you would want to “friend” all of your colleagues, or heaven forbid, your boss. In fact, people using Facebook tended to use it for personal – as in “real life” – friendships only. Not a place where they friended everyone under the sun. (That was MySpace, if you’ll recall.)

But on the new social web, nothing is really private anymore. People are lifestreaming their every action and friending complete strangers on sites like Twitter and FriendFeed solely because they share the same interests. If those relationships are valuable enough to you that you want them to be portable, then you’ll need to start friending everyone on Facebook, too. Since that’s the case, it looks like you might want to dig into those privacy settings after all.

The following guest post was written by Dan Birdwhistell, founder of people directory Bigsight (reviewed here) and creator of Hacking Facebook, a website that teaches developers how to pull user data out of Facebook.

There’s one thing about Facebook that most people still seem to have wrong: that it’s a walled garden. Quite the contrary, the Platform allows for full data portability and has since its inception. It actually isn’t a walled garden at all.

The problem is that this knowledge is buried deep within the FB documentation, a place few developers have wandered. For whatever strange reason, legal documents are like amusement parks for me, so I’m now fairly well acquainted with the ins and outs of porting data (and users) out of FB. So that’s what this whole post is about: To show you how it’s done.

Background

Once we got our heads around the Platform back in October, 2007, we hacked together FriendCSV as a demonstration. This is an app that allows you to export your full social graph (and all friend data) to your hard drive. This is all done in accordance with FB policies. After people got comfortable with this, we took it a step further by allowing users instantly port their own personal data into bigsight to create a new profile and account. Test out our importer here.

Why Facebook and the Platform are important

We believe FB is architecting the next version of the web. This is a bold claim – no doubt — but here’s the thinking:

1. FB has the users: 80mm and growing, with huge international membership and no age bias.
2. Users enter their real information: Users enter their real name and affiliations. This moves the web away from (and makes users comfortable with abandoning) aliases.
3. Users express themselves by connecting to entities that are “outside”: Users articulate their identity by claiming lasting elements like cities, companies, schools, and groups (or pages) that exist outside of FB.
4. These entities are increasingly moving “in”: These groups are connecting to the same users and establishing broad footprints through ads, Pages, and Applications.
5. The Platform and FB Connect are building the “between”: All the nice-happy-fun going on between Users and entities inside FB will start to extend back out into the web as developers learn how to build data/interaction bridges with the Platform and Connect.

The result is a web based on users and not content, with an individual’s FB ID ultimately serving as his chief tour guide, passport, and keymaster (but not like Vinz Clortho) around the rest of the web. So if I am right, FB will become king – not as a social network, but as the architect, owner, and manager of the next version of the web. So the point: you need to know how FB works and how you can leverage the Platform to grow your site or business. So here we go…

Understanding how FB Data is structured

Before you go messing around in the pool house, you’ll need to get your head around how everything is structured. It’s best to first focus entirely on non-user data given that these are the permanent structures users “claim”. Each of these elements has a unique ID and entry fields are typically auto-complete to ensure data alignment.

• Location: There are ~540 regional networks and ~24,000 city/state/country listings. Cities in the US are expressed as “City, State abv.” while cities in other countries are expressed as “City, Country Name”. Regional networks outside of the US, Canada, and the UK are typically expressed just as a country. Users claim locations through networks, current city, hometown, work cities, groups, pages, events, and photo albums.
• High Schools: There are ~23,000 worldwide high schools in FB. Users can enter up to two high schools, with graduation year for one of them. High school name and year is expressed on the profile.
• Colleges and Universities: FB recognizes ~5,000 institutions. To streamline search during data entry, FB allows for multiple aliases for the same school. For instance, a user can search/find/select “UCLA” or “University of California, Los Angeles”. Whichever one is selected displays on the profile, though both are linked to the same ID. This makes data integration a bit dicey, but there’s a fix we’ll get to later. Users can enter up to five schools and can ascribe graduation year, type, concentration, and degree type (if it is a grad school).
• Companies: You’ll find ~25,000 different companies. FB allows for multiple aliases during search, but it filters them out to the same display name across all profiles. We’re clueless as to why they did this for companies but not schools. Users can enter up to 15 jobs and can ascribe position, description, location, and duration.

So exactly how much data can you export?

Stated simply, you can touch basically everything but a user’s contact information. So here’s the list, including how the data is structured in its output. We’ll address friend lists and data in a moment.

In addition to these core profile elements, you can also make calls for and then export huge amounts of data through:

• Events: Title, location, date (duration), picture, type, members, etc.
• Pages: Name, type, location, hours, members, etc.
• Groups: Name, type, description, location, members, etc.

Now about friend lists: As you’ll see when you use FriendCSV, you can not only access all of the above for a single user, but you can also access the same data from their friends. Pretty crazy, right? This means that by touching one user you can instantly touch thousands more. But hold on now…time to talk Privacy.

Understanding FB Privacy, Terms of Service, and Platform Documentation

There are five key documents that come into play re: data portability on FB. Taken alone, each is hard enough to understand – taken together, it’s downright labyrinthine. As a developer, though, there are really only four things you need to know:

• The Onus of Privacy is on the User: While FB puts restrictions on how you can access and store information, they ultimately put the onus on the user when he interacts with an application. This means that users interact with apps at their own risk. From the Privacy Policy:
  

  “If you, your friends, or members of your network use any third-party applications developed using the Facebook Platform, those Platform Applications may access and share certain information about you with others in accordance with your privacy settings…

  …in addition, third party developers…may also have access to your personal information (excluding your contact information) if you permit Platform Applications to access your data.”

• The 24-hour Clause: Most of you have heard of this. It basically states that you can suck out any data, but you can’t store it for more than 24 hours; however, there are two key things that people overlook: 1) There are some elements that can be stored indefinitely and 2) if there is a disclaimer on the application, the developer can do almost anything with the data.
• The “Storable Indefinitely” Properties: FB allows us to store User ID, Network ID, Event ID, Group ID, and Photo ID.
• The Gold in the Mountain — “Full Disclosure Opt-Ins”: As a clear extension of FB putting the onus on the user, they have included a clause in their documentation that says that developers can do almost anything with the data they touch if they have full disclosure. Taken from 2.A.6 of the TOS:
  

  “You may retain copies of Exportable Facebook Properties for such period of time (if any) as the Applicable Facebook User for such Exportable Facebook Properties may approve, if (and only if) such Applicable Facebook user expressly approves your doing so pursuant to an affirmative “opt-in” after receiving a prominent disclosure of a) the uses you intend to make of such Exportable Facebook Properties, b) the duration for which you will retain copies of such Exportable Facebook Properties, and c) any terms and conditions governing your use of such Exportable Facebook Properties (a “Full Disclosure Opt-In”).”

  This is a bit wordy, so we’ll translate: If you outline which data you’ll use, how you’ll use it, for how long, what other terms the User might be subject to, and get User consent, then you can keep and use profile information for as long as you want.

So the main lesson here is that you shouldn’t be afraid of the various policies and documents because they are outlined to help you rather than restrict you. But again… a note about friends’ data. FB has been incredibly aggressive in policing how developers are accessing and using these data, and rightfully so. Last week they shut down the Top Friends app for allowing too much data access and earlier this year they canned Google Facebook Connect because it didn’t operate in accordance with their policies.

I’ll say again that they were right to do this and when thinking through how to port users, you should be mindful not just that FB might shut you down, but that a secondary friend who doesn’t opt-in to your site probably should be left alone. More than likely, he doesn’t want what you’re selling. Of course, there are ways around this if you want to brute force it, but we’ll just keep that to ourselves. So let’s keep going…

Setting up the Application(s) and managing the exports

Your importer can be inside FB as part of an application or it can exist as a standalone. We do it both ways. With FriendCSV, users install the app and we then direct them to their new profile as an add-on; meanwhile, out in the ether, we have a dedicated portal at http://fb.bigsight.org that directs users to FB for initial authentication, but then kicks them right back to our web app. If you already own a great app with lots of traffic, start there. If not, it’s probably best to set up your porter out on the web. Exporting the key data for a single user doesn’t take too long, so you can typically create a new page/account for them instantly. However, if you plan on exporting an element like friends lists (careful, hoss) or photos, you’ll need to batch up FQL requests when possible and also be open to allowing some processes to happen in the background.

The FB API is “REST-like,” which means it can be used by anything that handles standard HTTP requests. Libraries exist for PHP, Java, Ruby, and other languages that make the API easier to use. The following example code is for Ruby on Rails and the Facebooker library, as that’s what we use at bigsight. No matter which language you choose, writing FB applications to extract data is surprisingly easy. One line of code will tell your application to authenticate with FB. Simply add “ensure_authenticated_to_facebook” to your Rails controller and it will send your user to the FB login page if needed, and return them to your application. From that point on you have full access to the FB user and all exportable data. Here’s one example of how to extract educational history:

def gather_schools
# Create a local copy of the Facebook user
@user = User.create(:name => @fb_user.name, :fb_uid => @fb_user.uid)
# Load the user's schools
for fb_school in @fb_user.education_history
School.create(:name => fb_school.name, :user_id => @user.id)
end
end


For a full view of the FQL queries, check out this page in the documentation.

Integrating FB Data into an Existing Third Party Site

Ok so now you know what the data look like and how to access it, you need to think through a few things to figure out how to integrate it all with your site or widget. These are the questions to ask:

• What are the basic data elements you need for a user to interact with your site? Start by isolating the variables you need to a) successfully port a user to your site and b) give them enough active features that they instantly get a taste for your offering. Design your integration so that it is as simple (though complete) as possible. You might also consider including an “instant remove” link so that a user can quickly exit and take back his data.
• What deep database elements do you need to align? This might take a bit of work depending on what types of information you need. For instance, we suck out and integrate city, company, and school data. This sounds easy enough, but it gets dicey: There are quite often many names for the same entity. So if you want to align these elements, you need to: a) figure out what FB calls them and then b) use that naming system or make it line up with yours so that your importer can identify multiple aliases.
• How can you enrich user data in a novel way? There’s tons of win to be had if you can figure out a way to enrich a user’s data. We do this in two ways on bigsight:
  1. We match their school data against our own database and add the school logo to their profile pages. Furthermore, our school links go to pages that instantly show them people they may know. Here’s my alma mater, for instance: http://bigsight.org/school/wlu
  2. We built an algorithm that constructs full biographies based on a user’s profile data. This is fully dynamic and can have up to 140 different combinations depending on which school, company, and city data the user has and how he has structured it.

  Basically, get creative. It’s almost silly how many cool things can be done here.

• Is there any way to leverage group, page, or event data? Check this out: http://bigsight.org/city/nashville_tn/events. This is a display of the events that I RSVP’d to in Nashville over the past year. Sucking out this data is fully legit. It doesn’t take long to realize how entirely new sites can now be built based on even one or two User imports.
• How can you set up a User account? You might have to get creative when it comes to getting information (namely email) that isn’t directly available, though often needed to set up a working account. We ask for a user’s email up front and assign them a temporary login and pw based on this.
• Are you going to store their raw data output? We highly recommend your discarding their original raw data, even if you have a full disclosure. It’s just better for everyone involved and is better for the user and the web. Remember that you can keep the User ID and if you codify the information in some way, you’re in the clear.

Conclusion

Like I said above, we believe that FB is on the path to doing something amazing with the web, and we believe that everyone in the industry needs to know how to not just adapt to it, but also thrive from (and alongside) it. It should be an interesting summer re: the web as Facebook Connect launches and more and more people begin leveraging this and the Platform for utility rather than blind user engagement.

Our opinion is that while FB Connect will offer some amazing functionality in regards to quick user integration and synching, it likely won’t be as powerful as the Platform in terms of data access. Either way, these developments will not only change how users interact with third party sites, but they will also raise the bar for user experience as individuals accustomed to the FB UI will begin to demand increased alignment. Soon we’ll likely see businesses start to build sites on the back of FB rather than a) going out on their own or b) doing what could prove to be complicated integration. Additionally, we’ll probably also find resolutions to a few ongoing discussions and questions such as who owns a friends’ list and how what FB calls “dynamic privacy” actually works out in the wild.

It’s all pretty interesting stuff to think through and incredibly fun to see it all come together so quickly. Creative destruction all around, you know. Lots of warriors in the arena. ARE YOU NOT ENTERTAINED?

Crunch Network: CrunchGear drool over the sexiest new gadgets and hardware.

Clickpass, a startup that has simplified the OpenID login platform, has built out support for additional third parties that brings the promise of a universal login even closer. Users will now be able to use their Google, Facebook, Yahoo, or Hotmail passwords on any site that includes the Clickpass authentication system.

The new Clickpass system requires almost no effort from the end user. Supported sites simply embed a button on their login page which prompts users to login with their credentials from one of the aforementioned services; you don’t even need to have a Clickpass account. On supported sites, creating a new account is as simple as logging in with your preferred service (I use Gmail), and picking a display name to show other users. This is what OpenID should be.

So what’s the catch? At launch the service only works on a handful of sites, but CEO Peter Nixey says that implementing it on a website is easy – we can expect to see the number of supported sites skyrocket in the next few days. Developers need only implement the standard OpenID protocol along with the Clickpass system and they’re good to go.

One problem that Clickpass will soon face is that it is really a temporary solution to a problem most of these companies are already working on. We can expect Google, Yahoo, and the rest of the lot to implement their own version of OpenID, which will effectively take Clickpass out of the equation.

Crunch Network: MobileCrunch Mobile Gadgets and Applications, Delivered Daily.

As we wrote last week, Facebook is turning parts of its application platform open source, the company announced today. It’s available here for download.

This comes a little more than a year after Facebook Platform first launched to allow third party developers a way to get their applications directly onto Facebook. The company says more than 24,000 applications have now been built on the platform and more than 400,000 developers are building these applications. 140 new applications are added to the directory each day. “Nearly all” Facebook users have added at least one of those applications.

Facebook Open Platform is licensed under the Common Public Attribution License (CPAL), except for the FBML parser, which includes Mozilla source code, which is licensed under the Mozilla Public License (MPL).

Facebook says they’re doing this “to give back to the developer community.” That may be somewhat true, but the key reason for fbOpen is to compete with OpenSocial, the Google/MySpace/Yahoo/AOL led open source competitor to Facebook Platform.

Competing social networks, including the still-larger MySpace, are lining up against Facebook via OpenSocial. This is their way of responding.

It may be too late. Tellingly, Facebook was unable to line up any partners to add to today’s announcement, although some social networks we’ve chatted with say they will almost certainly implement it in the near future.

More details here.

Crunch Network: CrunchBoard because it’s time for you to find a new Job2.0

Don’t they say good things come in threes? Well, regardless, we’ve heard from multiple sources that Google will launch a new product on Monday called “Friend Connect,” which will be a set of APIs for Open Social participants to pull profile information from social networks into third party websites.

MySpace launched Data Availability on Thursday, a competing product. Yesterday, in a suspiciously timed pre-release announcement, we heard about Facebook Connect, another similar product (with a nearly identical name to Google’s Friend Connect).

Like Data Availability and Facebook Connect, Google’s Friend Connect will be a way to securely send personal profile data, including friend lists, presence/status information, etc., to third party applications, say our sources. The primary benefit of these services is to allow users to maintain a single friends list and to coordinate social activities across different sites that perform different services. See my post on the Centralized Me for more of my thoughts on this.

The reason these companies are rushing to get products out the door is because whoever is a player in this space is likely to control user data over the long run. If users don’t have to put profile and friend information into multiple sites, they will gravitate towards one site that they identify with, and then allow other sites to access that data. The desire to own user identities over the long run is also causing the big Internet companies, in my opinion, to rush to become OpenID issuers (but not relying parties).

If what we hear is correct, Google’s offering may not be as attractive as MySpace’s and Facebook’s. Google may be keeping a tighter reign on data, requiring third parties to show it directly from Google’s servers in an iframe. By contract, MySpace and Facebook are sending data via an API and trusting third parties not to abuse it (with strict terms of service in case they violate that trust). That flexibility also allows those third parties to do more with the data, including combining it with their own data before displaying it.

We’ll have to wait until Monday for the exact details, though. But what’s clear is that Google wants to get in between social networks and the web sites that want to access their data. By controlling the flow through Open Social and the new Friend Connect product, they can effectively become a huge social network without actually having a, well, social network (unless you count Orkut).

Google’s been scrambling for partners to announce on Monday as well. So far our understanding is they have their own Orkut and Plaxo. Compare that to MySpace (Yahoo, eBay and Twitter, plus their own PhotoBucket) and Facebook, which announced Digg as an early partner.

Another limiting factor with Google’s product is that, unlike Facebook and MySpace, they do not already control user profiles for tens of millions of active users. That means they’ll quickly need to get big partners on board as well. Will MySpace help them? They may – MySpace is already part of Open Social and said on Thursday that they will adopt Open Social initiatives in this space once they are defined. We’ll see.

More details as they come in.

Crunch Network: CrunchBoard because it’s time for you to find a new Job2.0

An announcement by Facebook late on Friday spotlights how they are attempting to stay ahead of the curve in exploiting the social graph, and in doing so, to make their version of your friend’s list the default one that is used across the web. The key is this new JavaScript library that makes it easier for developers to to make Facebook API calls directly from JavaScript from any web site, not just when running on the Facebook Platform:

This JavaScript client library allows you to make Facebook API calls from any web site and makes it easy to create Ajax Facebook applications. Since the library does not require any server-side code on your server, you can now create a Facebook application that can be hosted on any web site that serves static HTML…This applies to either iframe Facebook apps that users access through the Facebook web site or apps that users access directly on the app’s own web sites. Almost all Facebook APIs are supported.

Along with allowing individual developers conversant in Ajax to bring Facebook friends into their website’s user experience, as John Potter points out, it opens up a role for third-party developers to craft Facebook-friendly widgets that are easily dropped into blogs and sites that don’t have any Facebook programming experience. The release of this library caused a fair amount of buzz over the weekend from folks including Nick O’Neill, Dare Obasanjo, Jeremiah Owyang, Duncan Riley, and Search Engine Watch.

Recent moves in data portability and OpenSocial-style compatibility suggest that we are moving towards an environment that allows some form of opt-in sharing between elements of the social graph, and Facebook wants to make sure that it is easier to identify your groups of friends by starting with their version. The function of allowing you to organize your friends into groups (family, close friends, business acquaintances, etc.) that was added in December is also a step towards making your control over your social graph easier, and adding lock-in to the Facebook data.

Share This

After publishing an invitation to Facebook to join the DataPortability Working Group January 4, we never thought that Facebook would accept it. Today changes everything you’ve ever thought about social-networking data and lock-in before, because today Facebook, Google and Plaxo have joined the DataPortability Workgroup.

Google and Plaxo joining are a positive, however given that both have previously joined together for platforms such as OpenSocial it’s not that significant, but Facebook is another matter. On January 4 Michael sort of defended Facebook’s stance against Plaxo pulling data from Facebook on the grounds that “Facebook also has a very good reason for protecting email addresses – user privacy.” Today, by joining the DataPortability Working Group Facebook is embracing open standards and open access, and that is a huge fundamental change from its previous stance on being locked in to closed standards.

I spoke with the head of the DataPortability Group Chris Saad prior to this post (Chris is also the CEO of Faraday Media.) After about 24 hours of correspondence, the following are to join the working group as official representatives of their respective companies: Joseph Smarr (Plaxo), Brad Fitzpatrick (Google) and Benjamin Ling (Facebook).

The DataPortability Workgroup is actively working to create the ‘DataPortability Reference Design’ to document the best practices for integrating existing open standards and protocols for maximum interoperability (and here’s the key area) to allow users to access their friends and media across all the applications, social networking sites and widgets that implement the design into their systems.

There has been no shortage of people who have knocked Facebook for their closed standards prior to today, perhaps many of whom had a legitimate point. Today Facebook has taken the first step towards open standards and data portability, and despite those previous gripes they should be congratulated for it.

Facebook

Loading information about Facebook…

Plaxo

Loading information about Plaxo…

Crunch Network: CrunchBoard because it’s time for you to find a new Job2.0