Building a Facebook Graph API Application using ASP.NET

Background

Recently, I needed to build a Facebook Share style application that gave me more control over the content that was posted on a users' Facebook wall. Implementing this as a Facebook application also allowed me to do some custom processing when the user completed the share process.

To do this, I used Facebook’s Graph API. The Graph API is the core of Facebook’s system. It enables the developer to read and write Facebook data (provided the appropriate permissions exist). There’s a lot more information about the Graph API on the Facebook Developers Site.

When the user clicks ‘Share’, they’re presented with the same Facebook style dialog that they’re used to, but where my application controls all of the data that they see.

Finally, when the user completes the share process, the information shows up on their wall as it normally would, but I also get a callback letting me know that they completed the process which allows me to do any custom processing.

You’ll need to create a Facebook Application. You can do this at the Facebook Developers site. I’ve called the one that I use for this sample ‘My ASP.NET Application’. Once you have the application setup, you’ll need to make note of the ‘App ID’ from Facebook as we’ll need this information later.

Using the Code

I like to create a ‘Controls’ folder in my ASP.NET Projects to contain any UserControls that I create/use in that project. To create my FacebookShare.ascx, I right-clicked on my ‘Controls’ folder, then selected ‘Add->New Item’ and finally chose ‘Web User Control’.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="FacebookShare.ascx.cs"
Inherits="FacebookApplication.Controls.FacebookShare" %>
<div>
    <div id="fb-root">
    </div>
    <div onclick="return shareWithFacebook();" style="border: 1px solid black;
	background-color: #d3dde5;
        padding: 5pt; width: 175pt; cursor: pointer;">
        <img src='http://www.codeproject.com/images/fb_share.gif' border="0"
	alt="facebook likeus" style="vertical-align: middle;
            padding-right: 5pt;" />
        <strong>Share with Facebook</strong>
    </div>
    <script type="text/javascript">
        window.fbAsyncInit = function () {
            FB.init({ appId: '<%= ApplicationId %>', status: true, cookie: true,
                xfbml: true
            });
        };
        (function () {
            var e = document.createElement('script');
            e.async = true;
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            document.getElementById('fb-root').appendChild(e);
        } ());

        function shareWithFacebook() {
            FB.ui({ method: 'stream.publish',
                message: '<%= Message %>',
                user_message_prompt: '<%= Prompt %>',
                attachment: {
                    name: '<%= Name %>',
                    caption: '<%= Caption %>',
                    description: ('<%= Description %>'),
                    href: '<%= Href %>',
                    media: [{ 'type': 'image', 'src': '<%= Image %>',
			'href': '<%= Href %>'}]
                },
                action_links: [
                { text: '<%= Name %>', href: '<%= Href %>' }
            ]
            },
            function (response) {
                if (response && response.post_id) {
                    // Do some custom action after the user successfully
		  // posts this to their wall
                    alert('Thanks for sharing!');
                }
            }
        );
            return false;
        }
    </script>
</div>

The codebehind for the UserControl defines the model for the data our control cares about.

namespace FacebookApplication.Controls
{
    public partial class FacebookShare : System.Web.UI.UserControl
    {
        public string Message { get; set; }
        public string Prompt { get; set; }
        public string Name { get; set; }
        public string Caption { get; set; }
        public string Description { get; set; }
        public string Href { get; set; }
        public string Image { get; set; }
        public string ApplicationId { get; set; }
    }
}

The code to use the Facebook Share control looks like this:

<%@ Page Title="Home Page" 
Language="C#" MasterPageFile="~/Site.master"
	AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" 
    Inherits="FacebookApplication._Default" %>

<%@ Register src="Controls/FacebookShare.ascx" 
tagname="FacebookShare"
	tagprefix="uc1" %>

<asp:Content ID="HeaderContent" 
runat="server" ContentPlaceHolderID="HeadContent">
    <script src=http://www.codeproject.com/Scripts/jquery-1.4.1.min.js
	type="text/javascript"></script>
</asp:Content>

<asp:Content ID="BodyContent" runat="server" 
ContentPlaceHolderID="MainContent">
    <h2>
        A customizable Facebook Share button
    </h2>
    <p>
        <uc1:FacebookShare ID="FacebookShare1" runat="server"
		ApplicationId="12345" Message="Message"
            Name="Name" Caption="Caption" Description="Description"
		Href="http://mourfield.com"
            Image="http://www.gravatar.com/avatar/41e139e92663400389c2c9d95a865820.png" />
		</p>
    <p>
        You can also find <a href="http://developers.facebook.com/docs/"
            title="Facebook Developer Docs">documentation on Facebook at
		Facebook Developers</a>.
    </p>
</asp:Content>

Hopefully, you’ll be able to use this as a starting place for your applications. There is much more that can be done using Facebook’s Graph API. This example barely scratches the surface of what is possible.

You can also find more information including documentation on Facebook at Facebook Developers.