Click here to Skip to main content
15,877,487 members
Articles / Web Development / ASP.NET

Building a Facebook Graph API Application using ASP.NET

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
3 Mar 2011CPOL2 min read 39.4K   20   7
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’.

ASP.NET
<%@ 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.

C#
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:

ASP.NET
<%@ 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
Software Developer

Comments and Discussions

 
QuestionRead Post Pin
Jianbo Huang7-Apr-13 17:19
Jianbo Huang7-Apr-13 17:19 
QuestionHow to post picture? Pin
Sumit Kumar Singh India7-Nov-12 8:01
Sumit Kumar Singh India7-Nov-12 8:01 
QuestionShall i use graphapi for desktop based APP??? Pin
vasu.asta@gmail.com11-Jun-12 2:57
vasu.asta@gmail.com11-Jun-12 2:57 
Generalnot worked Pin
amr rabie15-Apr-11 10:37
amr rabie15-Apr-11 10:37 
not workedMad | :mad:
GeneralRe: not worked Pin
Pete Mourfield15-Apr-11 11:47
Pete Mourfield15-Apr-11 11:47 
GeneralMy vote of 5 Pin
sshanmuga405-Mar-11 9:44
sshanmuga405-Mar-11 9:44 
GeneralMy vote of 5 Pin
Monjurul Habib5-Mar-11 7:26
professionalMonjurul Habib5-Mar-11 7:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.