Building a Social Shopping Mashup in Facebook – Developers View
I’ve recently spent some time putting together a social shopping solution for Facebook users. I wanted it to cover a wide range of products and categories, so I choose to use Shopping.com as my data partner. They have a very extensive product database and a good search engine. Also, this will allow me to integrate the application into our website SecretPrices.com going forward if I should choose to.
As always I’ve created my application on Microsoft’s ASP.NET. I’m still preaching the Microsoft word, even after returning from the second NYC Developers hackathon which was about 99% guys with Macbooks and programming in PHP, Ruby or even Java. Yeah, I was that 1%. However, the guys from ClipMarks came eventually and were developing on ASP.NET (but- .NET 1.1). At any rate, you can develop your own Facebook solution with whatever language you wish. Without getting too technical, here are the basics for ASP.NET developers:
1) Get an application key on Facebook, if you don’t already have one. See developers.facebook.com.
2) Goto CodePlex and download the latest (v 1.2) of the Facebook Developers Toolkit by Microsoft. Note: Requires .NET 2.0. Optionally, there are a few other open-source ASP.NET development frameworks including this one.
Next, Load it up and read the Facebook Developer resources. Read the ASP.NET and other tutorials. Hit up the developer discussion boards as well. There is a lot of information. If you are encountering a problem with the Facebook platform, the answer is probably out there somewhere. If you know what IRC is, you might be able to hop on and get some instant answers or feedback in the #facebook channel on irc.freenode.net.
3) Creating A Page – Be sure to assign the your developer key and secret key with every page load, as you’ll need it before you call the Facebook API
_fbService.ApplicationKey = “YOUR_APPLICATION_KEY”
_fbService.Secret = “YOUR_SECRET_KEY”
You can check if the user is in canvas mode (inside the Facebook interface) by requesting “canvas”:
If Request(“fb_sig_in_canvas”) = 1 Then
And when in canvas mode you can always grab the current UserId and SessionKey:
_fbService.UserId = Request(“fb_sig_user”)
_fbService.SessionKey = Request(“fb_sig_session_key”)
4) Add Some Functionality – I will attempt to reverse engineer our product page creation process here.
FBML – Facebook’s own markup language allows you to extend upon HTML coding to easily create common items like Profile thumbnails, write the user’s name, create profile links, etc. For this section you can create an AutoText inputbox which will load up all your Facebook friends upon typing.
AJAX / User Interaction – I had to use an IFrame here to utilize the ASP.NET AJAX functionality. The portion allows users to check whether they Want or Own a product., as well as assign a rating and write a quick review The database is updated in real-time and the own/want checkboxes are mutually exclusive.
Product Data – Product information, images, and pricing data are streamed live via Shopping.com Web Services.
Friends Data – Friends reviews and opinions are drawn from our own internal database and matched to the current user whose friends are a member of the application. This can be accomplished using the GetAppUsers() method this can be accomplished via the Facebook API.
Mock Ajax – Some of the other pages in the application (not shown in the picture above) utilize Facebook’s “Mock Ajax” to control product paging. Mock Ajax allows a very dummed down version of AJAX. You can basically make calls via a Form which will replace an element (generally a div) on your page.
5) Once you have hacked something together, have friends try it out and get some feedback. As soon as it’s fully functioning submit it to the Facebook directory because it could take a little while to get accepted. Tip: Pick too good categories where your app will have a chance to be seen and get more exposure.
It is a Facebook Application because well it runs on Facebook’s platform and calls the Facebook API. It is a Mashup because it combines one or more data sources. In this case it is Facebook and Shopping.com being mashed together. The also underlying technologies include ASP.NET 2.0, Facebook Developers Toolkit, ASP.NET AJAX, and SQL Server 2005.
Was this helpful? Let us know or leave a comment.