Building a Facebook Graph API application using ASP.NET


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 permisions 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 id="fb-root">
    <div onclick="return shareWithFacebook();" style="border: 1px solid black; background-color: #d3dde5;
        padding: 5pt; width: 175pt; cursor: pointer;">
        <img src='/images/fb_share.gif' border="0" alt="facebook likeus" style="vertical-align: middle;
            padding-right: 5pt;" />
        <strong>Share with Facebook</strong>
    <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 + '//';
        } ());

        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;

The codebehind for the UserControl is 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="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        A customizable Facebook Share button
        <uc1:FacebookShare ID="FacebookShare1" runat="server" ApplicationId="12345" Message="Message"
            Name="Name" Caption="Caption" Description="Description" Href=""
            Image="" /></p>
        You can also find <a href=""
            title="Facebook Developer Docs">documentation on Facebook at Facebook Developers</a>.

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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s