Accessible Facebook Dialogs And Feed Posting With Rails

December 16, 2011

Don't be jealous that we've been integrating facebook and chatting with babes all day.

Let me show you how the users of your app can share activities on Facebook. Thankfully, the effort required to integrate a feature like that has gotten a lot easier with tools like OmniAuth and the introduction of Facebook Dialogs. What's more, they've made it so that you can provide a progressively enhanced experience for your users. In this article, I'll walk you through how to build a link that works with or without JavaScript enabled.

##Create Your App

We won't reinvent the wheel here. Check out the well written guide on how to create your app. Be sure to note your AppId and Secret Key

##Integrate OmniAuth

We used omniauth-facebook. We don't advocate the use of devise's baked in omniauth support because it does not support the ability for users to have multiple identities. If you want to eventually support other authentication mechanisms like Google or Twitter, you'll run into some architectural problems.

For more detail on getting omniauth set up, the tutorial over at NetTuts isn't too terrible.

##Show Dialog Links For Facebook Authenticated Users

Add our little facebook_dialog gem to your Gemfile.

    gem 'facebook_dialog'

Add your api key to an initializer like config/initializers/facebook_dialog.rb

    FacebookDialog.api_key = "<your appid/api key>"

In your view, do something like this:

    <%- feed_dialog = FacebookDialog::Feed.new({
      redirect_uri: "https://www.example.com",
	  link: "https://www.example.com",
	  name: "Wow!",
      caption: "Something pretty awesome",
      description: "Zomg! You won't believe what I found on the web."
    })-%>
    <%= link_to "Share on Facebook", feed_dialog.url, id: "share_on_facebook" %>

You can then add the JavaScript pieces at the tail end of the body to optimize page loading. Check out our simple jQuery example below:

	<%= facebook_js %>
    <%= javascript_tag do %>
      <%= fb_init_js %>
      $("#share_on_facebook").click(function(e){
		e.preventDefault();
        FB.ui(<%==  feed_dialog.to_json %>);
      });
    <%- end -%>

The facebook_dialog gem supplies the facebook_js and fb_init_js helpers.