Click here to Skip to main content
Click here to Skip to main content

Creating a simple Facebook Application using WPF

, 7 Sep 2007
Rate this:
Please Sign up or sign in to vote.
The following article details how to create a very simple Facebook application using Facebook Platform & WPF
Screenshot - logo.jpg

Introduction

Facebook is growing at an incredible pace (already 30 million users registered and doubling every 6 months). The new Facebook platform is an incredible software platform and can easily be extended using the provided SDK. The following Code Project article is an introduction into creating a very simple MSN Messenger or Yahoo! Messenger type application for Facebook.

In this first article, I will provide an overview of how to set up your Facebook application and write a very basic WPF application that connects to Facebook and populates your friends list.

Setting up Facebook

Visit the developer website.

Screenshot - screen1.jpg
  • Click on "Getting started"
  • Add Facebook Developer Application
  • Log into Facebook
  • Add Developer Application
  • Set up new application
  • Application Name: WPFB (Here you can choose any name as long as it doesn't contain the word Face
  • Click checkbox to agree with License Agreement and also expand the optional Fields
  • Change application type to Desktop (This is very important!)
  • Submit
Screenshot - screen2.jpg

Keep the API Key & Secret provided for use later.

Here is a discussion about whether it is legal to disclose the secret key of your application.

Creating a simple UI

Download the Facebook SDK binaries from here.

Create a WPF Application and add Image & ListBox Controls into a StackPanel.

<StackPanel>
    <Image x:Name="ProfilePicture"Stretch="None"HorizontalAlignment=
                        "Left"VerticalAlignment="Top"/>
    <ListBox x:Name="FriendsListBox"/>
</StackPanel>

Add the following References to your project:

  • Facebook.dll
  • Facebook.Controls.dll
Screenshot - Refrences.jpg

Also add the following namespaces:

using Facebook.Components;               //FacebookService
using Facebook.Exceptions;
using Facebook.Entity;                   //User
using System.Windows.Media.Imaging;      //BitmapImage
using System.Collections.ObjectModel;    //Collection

Next, we have to create an instance of the Facebook service.

FacebookService service;

Now, we also need to setup the service with the API Key & Secret recorded earlier. I currently do this in the constructor of my Window.

service = new FacebookService();
service.IsDesktopApplication = true;
service.ApplicationKey = "1969299cd5b87513af9633715e0a63e9";
service.Secret = "5b3ff1b88c41eb117014f403e5cb9952";

Now we are ready to start getting information from Facebook. To download my profile picture from Facebook, add the following code to the SourceInitialized event of the Window.

User me = service.GetUserInfo();
if (me != null)
    ProfilePicture.Source = new BitmapImage(me.PictureSmallUrl);

This basically downloads the small profile picture from the specified URL. This is a good time to save and test your project. Once you have compiled and Run this application, the following logon screen gets displayed:

Screenshot - logon.jpg

I have also noticed that this currently doesn't work if you are behind an HTTP proxy server. I get a "The underlying connection was closed" exception. Future releases of Facebook SDK would hopefully include support for Proxy servers and allow you to rather log in by using a function to which you can supply a user name and password as opposed to showing the HTML based login screen...

Fill in your user name and password and now click on login. You should hopefully now see a Window with your profile picture displayed!

The next step is to populate the ListBox with all my friends. To get all your friends from Facebook, add the following code to the SourceInitialized Event:

Collection<User> friends = service.GetFriends();

Update the friend's ListBox with the following DataTemplate.

<ListBox x:Name="FriendsListBox" ItemsSource="{Binding}">
   <ListBox.ItemTemplate>
       <DataTemplate>
           <Image Source="{Binding Path=PictureSmallUrl}" />
       </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

The final step is to point the ListBox to the friends collection.

FriendsListBox.ItemsSource = friends;

Conclusion

As you can see, to setup and create a simple Facebook application is not very difficult. In the next couple of days, I will expand on this base and update the application. Planned future expansion will include:

  • Notifications from Facebook
  • More "Beautiful UI" that supports skinning, and
  • A send message feature once you double-clicked on a friend
Screenshot - done.jpg

With very little effort and quick beautifying touches, the final application looks like this! (I borrowed Sacha Barber's Glass Button effect for the friends icons)

Please comment on how I can improve my articles (since this is only my second) and also rate this article (even if you thought it was utterly useless!)

Links

History

  • 13-Aug-2007 - First draft

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

rudigrobler

South Africa South Africa
No Biography provided

Comments and Discussions

 
QuestionHeaders Problem? Pinmemberfr3ddy_110-Jul-12 2:27 
AnswerRe: Headers Problem? PinmemberMember 931996220-Jan-13 21:01 
Generalthank U PinmemberMember 3940521-Dec-10 3:15 
GeneralWPF action PinmemberRaymundo Ginez6-Dec-10 19:42 
GeneralSending messages to facebook in C# WPF app PinmemberRoopaHP8-Jun-10 2:11 
GeneralFacebook sdk 3.0 Pinmembertocute30-Nov-09 15:58 
GeneralRequested value 'Networking' was not found. Pinmemberleminh04889-Aug-09 23:32 
GeneralError Debug PinmemberMember 358600325-Feb-09 8:00 
GeneralCool Idea! PinmemberDieter Deysel22-Oct-08 10:18 
GeneralA cool, free WPF application for Facebook PinmemberDachuan25-Mar-08 22:57 
GeneralShameless? PinmemberIndy200527-Jun-08 15:28 
GeneralDeveloper API PinmemberLawrence Botley7-Mar-08 2:23 
GeneralCool Pinmemberandalmeida8-Sep-07 3:38 
GeneralRe: Cool Pinmemberrudigrobler9-Sep-07 21:02 
GeneralRe: Cool PinmemberVirendrak29-Jun-09 22:50 
QuestionHow to get my site notifications in my facebook Inbox Pinmemberkesh_6_726-Aug-07 17:52 
AnswerRe: How to get my site notifications in my facebook Inbox Pinmemberrudigrobler9-Sep-07 21:03 
GeneralI did a Flickr type one using XLINQ PinmemberSacha Barber16-Aug-07 7:16 
GeneralRe: I did a Flickr type one using XLINQ [modified] Pinmemberrudigrobler16-Aug-07 9:34 
GeneralRe: I did a Flickr type one using XLINQ PinmemberSacha Barber16-Aug-07 10:41 
GeneralSoruce Code for Article Pinmemberaman.tur16-Aug-07 3:59 
GeneralRe: Soruce Code for Article [modified] Pinmemberrudigrobler16-Aug-07 4:34 
GeneralRe: Soruce Code for Article Pinmemberhackman3vilGuy16-Aug-07 7:32 
GeneralRe: Soruce Code for Article Pinmemberrudigrobler9-Sep-07 21:09 
Generalcool PinmemberMichael Sync16-Aug-07 0:08 
GeneralRe: cool [modified] Pinmemberrudigrobler16-Aug-07 4:37 
tnx, hope it is useful!
 

 
Rudi Grobler
http://dotnet.org.za/rudi
 

-- modified at 3:15 Monday 10th September, 2007

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.1411019.1 | Last Updated 7 Sep 2007
Article Copyright 2007 by rudigrobler
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid