What’s More Awesome than Sharing? Publishing, with Facebook Connect

Submitted by Brett on Mon, 11/02/2009 - 9:07am

Matt Koltermann, Cross-Cultural Solutions

[Ed. note: This article is part of NTEN's Member Appreciation Month spectacular. The most popular pieces will be featured in our newsletter. You can read all the details here.]

Facebook is kind of a big deal.

With two billion pieces of content shared every day on Facebook, influentials confirming that Facebook has been the largest gainer of online usage over the past three years, and recent deals with Microsoft and Google to bring public status updates to search results, getting your nonprofit organization to appear in Facebook’s news stream needs to be a marketing priority for the new year.

There’s a pretty good chance your website or blog already has a “Share on Facebook” icon or button that offers your visitors a dead-simple way to share your site with their peeps on Facebook, so that’s a great start. With a little technical savvy, you may have even figured out how you can control some of the content that appears in what’s shared to Facebook, such as the thumbnail image and the link description.

If you delight in keeping-up with tech news, you may have also heard that Facebook recently relaunched its “Share” button to include customizable text and a handy little count bubble that shows how many times a link has been shared, which is pretty nifty.

Share CCS on Facebook

As great as all this sharing is, though, what if you could have even more control over the content that’s shared, increase your brand’s visibility, add a call-to-action, and get started on creating a deeper level of engagement? You can do all that with Facebook Connect.

If you’ve ever logged into another website using your Facebook account, that’s an example of Facebook Connect in action: it’s a secure way for you to authorize other websites to access your identity and connections on Facebook without needing to hand over your login information to yet another third party. With your consent, Facebook Connect also allows websites to access a user’s news stream to publish content—and that’s where things get exciting.

If you have a website where visitors complete actions—like to donate, enroll, volunteer, become a member, RSVP, request information, sponsor, etc.—make sure you provide them with the opportunity to tell people what they just did. On the page that thanks people for their donation, for example, encourage them to tell their friends on Facebook that they just did something great to support your organization. Similarly, make sure that they can easily share their enthusiasm after they’ve just signed-up for your program. You can do this by adding a button to these pages that leverages Facebook Connect to share a chunk of pre-defined content.

Implementing Facebook Connect can be a bit tricky, so I’ll take you through five steps to get it done. With a bit of geeky self-reliance and motivation, you can totally do this yourself without the assistance of a Web developer.

So, here we go!

1. Run the Facebook Connect Wizard.

This process creates the Facebook “application” that your website needs to communicate with Facebook. Enter your site info, upload the xd_receiver.htm file to your root directory, and test the connection.

Facebook Connect Wizard Step 1


2. Add a spiffy icon to your application.

Yay! Your application is now “Connect-enabled” and ready for a lot of awesome.

Your site is now Connect-enabled


But, take advantage of a branding opportunity here by adding an icon that becomes part of your published content.

Facebook Developer Dashboard


Go to your Developer Dashboard, click on “Edit Settings,” and then the “Change your Icon” under “Basic Settings” to upload your 16 px × 16 px icon (which is the same size as a favicon except it needs to be a GIF, JPG, or PNG).

Edit Application


3. Create the content you want published to the news stream

Now, it’s time to visit Publishing to Facebook and create your first chunk of shared content.

Stream publish content form


See how I’ve added the “Subscribe” link so Facebook users can subscribe directly to Nonprofit Geekery right from the news stream? Once you’ve entered your info, click the “Preview dialog” button to see exciting things.

Preview of published content


If you’d like, click “Publish” to send it to your profile and news stream.

How it looks in the news stream


See how it all comes together? With Facebook Connect, you control the link, the title of the link being shared, the description, the image, the icon, the name of your organization, and the call-to-action! Admittedly, my example is pretty lame since I’m just sharing the homepage with a generic description about the site, but there’s lots of opportunity here to customize the content based on the action your website visitor has just taken.


4. Insert the code that makes it all work.

Once you’re done being wow-ed with your work so far, it’s time to grab the code and put it on your site.

First, copy and paste the first chunk of code you see on that same Publishing to Facebook page and place it in your HTML just after the <body> tag on the page.

The code your website needs to communicate with Facebook

The code your website needs to communicate with Facebook

Next, copy the code that renders all that lovely content you just created and paste it where you want the button to appear.

Code to publish the share content


5. Make it look pretty.

Since that “Preview Dialog” button looks like it got beaten with an ugly stick, let’s dress it up in two steps. First, add these styles to your site’s CSS file.

input.fb-publish {
background: #617aac url('http://static.ak.fbcdn.net/rsrc.php/zAB5S/hash/4273uaqa.gif') no-repeat 5px;
border-bottom: 2px solid #33332f; /*Separate border styles give a simple 3D effect*/
border-left: 1px solid #33332f;
border-right: 2px solid #33332f;
border-top: 1px solid #33332f;
color: #fff;
margin: 10px;
padding: 5px 5px 5px 25px;}
input.fb-publish:hover { /*Adds neat-o hover effect to the button*/
border-bottom: 1px solid #33332f; /*Separate border styles give a simple 3D effect*/
border-left: 2px solid #33332f;
border-right: 1px solid #33332f;
border-top: 2px solid #33332f;}

Then, add the “.fb-publish” class defined above to your button…

Add the "fb-publish" class to your button's code

Add the "fb-publish" class to your button's HTML

…and edit the “Preview Dialog” text.

Change the "Preview Dialog" text to something less awful

Change the "Preview Dialog" text to something less awful

Save the files back to your site, refresh, and behold the transformation!

Your pretty new button!

Your pretty new button!

To see a working demo in action, check out my sandbox.

I would really love to hear all the creative ideas other nonprofit geeks have for putting this to use. Have you implemented Facebook Connect on your nonprofit’s website? What are your suggestions for how this can be used to get into the stream?