ASP.NET ile Facebook Uygulaması Nasıl Yazarım?

Uygulama yazmak için nereden başlamak gerektiğine dair girizgaha şurada değinmiştim. Şimdi  ASP.NET ile sıfırdan Facebook uygulaması nasıl geliştirilir ona göz atalım (ASP.NET ve C# bilgisi gerekli).

Öncelikle http://www.facebook.com/developers adresinden yeni bir uygulama ekleyelim (Set Up New Application).

Set Up New Application

Uygulamanıza bir isim verip, kullanım koşullarını da onaylayınca Facebook uygulamanızın taslak halini hazırlar.

Uygulama adı ve kullanım koşulları

Sonraki ekranda karşımıza Application ID, API Key ve Secret gibi değerleri, uygulamanın tanıtıcı metnini ve uygulamaya ait logoların yükleneceği bölümler ve de Developer Modunda (uygulamanızın sadece developer olarak atanan kişiler tarafından çalıştırılabildiği, stream, wall post vb gibi aksiyonları da yine sadece developer olanların görebildiği mod) test etmesini istediğiniz arkadaşlarınızı seçebileceğiniz alanlar yer alır.

Facebook Application ID, API Key, Secret

Application ID, API Key ve Secret değerlerini kaydedip Authentication sekmesine tıklayalım. Bu sekmede uygulamamızın Facebook kullanıcıları tarafından mı yoksa Facebook Pages tarafından mı kurulabileceğini belirtiyoruz. Hemen alttaki iki alan dikkatimizi çekmiş olmalı:

• Post-Authorize Callback URL: Bir kullanıcı (ya da Facebook Page) uygulamanızla etkileşime girdiği an, Facebook bu adrese ping atar ve size bildirimde bulunur. Böylece veritabanınızda yeni kullanıcıyla ilgili işlemleri yapmak için size olanak sağlar (eğer ki böyle bir mekanizmanız varsa). Bu sayfa FBML sayfası değil, kendi sunucunuzda yer alan ve uygulama içerisinde yer alan bir sayfa olmalı.
• Post-Remove Callback URL: Uygulamanızı kurmuş olan bir kullanıcı (ya da Facebook Page) uygulamanızı kaldırdığı an Facebook bu sayfaya ping atar. Böylece siz de hangi kullanıcının uygulamanızı kaldırdığını bilir ve uygulamanızda ona göre aksiyon alabilirsiniz. Yine bu sayfa da FBML değil kendi sunucunuzda yer alan ve uygulama içerisinde yer alan bir sayfa olmalı.

Authentication

Canvas sekmesine geldiğimizde, Facebook’un uygulamamızı hangi adresten çağıracağı, uygulama görüntüleme türünü (FBML  -Facebook Developer Markup Language- veya iFrame), çerçeve genişliğini, uygulamanın tekil adını girebileğiniz bölümler yer alır.

• Canvas Page URL: Uygulamanın tekil adı (Benim test uygulamam için orangeplusblog)
• Canvas Callback URL: Uygulamanın sunucudan çağırılacak olan adresi (web uygulamasının adresi) (Benim test uygulamam için http://facebook.orangeplus.net/orangeplus/). (En sondaki “/” slash işaretini koymayı unutmayın sakın!)

Canvas, FBML, 760px

Advanced sekmesinde Sandbox Mode‘u (developer mod) Enabled olarak işaretlemeyi da unutmamak gerek, uygulama test süreci boyunca bu modda kalmalı ve testleriniz bitince tekrar bu sayfaya gelerek Sandbox Mode’u kapatabilirsiniz.

Advanced Sekmesi, Sandbox Mode

Pekala, Facebook üzerinde yapacaklarımız bu kadar. Şimdi Visual Studio’yu açıp biraz kod yazalım.

Ekteki dosyada Visual Studio için örnek Facebook uygulama projesi yer alıyor (yazının devamı örnek şablon proje üzerinden devam edeceği için dosyayı indirmekte fayda var).

Web.config‘te APIKey, Secret, AppUniqueName (Canvas Page URL alanında yazdığımız değer), AppName (Application Name), CallbackUrl (Canvas Callback URL) değerlerini dolduruyoruz.

<?xml version="1.0"?>
<configuration>
	<appSettings>
		<add key="APIKey" value="XXXXXXX"/>
		<add key="Secret" value="YYYYYYY"/>
		<add key="AppUniqueName" value="orangeplusblog"/>
		<add key="AppName" value="Orangeplus.Blog"/>
		<add key="CallbackUrl" value="http://facebook.orangeplus.net/orangeplus/"/>
		<add key="InviteActionText" value="Haydi arkadaşını davet et!"/>
	</appSettings>

	<system.web>
		<customErrors mode="Off"/>
		<compilation debug="true"/>
		<authentication mode="Windows"/>
	</system.web>
</configuration>

Uygulamanın ana sayfasına (Default.aspx) bakalım;

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<%@ Register Src="Controls/Style.ascx" TagPrefix="uc" TagName="style" %>
<%@ Register Src="Controls/Tabs.ascx" TagPrefix="uc" TagName="tab" %>
<%@ Register Src="Controls/GoogleAnalytics.ascx" TagPrefix="uc" TagName="ga" %>

<uc:style id="Style" runat="server" />
<uc:tab id="Tabs" runat="server" SelectedTabIndex="0" />

<div id="container">

	<p>
		<fb:profile-pic uid="<%= UserFbId %>" linked="true" size="small" />
		Merhaba <fb:name uid="<%= UserFbId %>" useyou="false" />,<br />
		Orangeplus.Blog; ASP.NET ile Facebook uygulaması nasıl yapılırla ilgili örnek bir uygulama aslında.
	</p>
	<p><a href="http://orangeplus.net" target="_blank">Orangeplus</a></p>

</div>

<uc:ga id="googleAnalytics" runat="server" />

Kodun içerisindeki  <fb> tag’ına dikkat etmişsinizdir. FBML (Facebook Markup Language) sayesinde, Facebook’un sağlamış olduğu hazır objeleri kullanma imkanı bulabiliyoruz böylece.

Default.aspx.cs

#region Usings
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;

using Facebook;
using Facebook.Web;
using Facebook.Schema;
using Facebook.Session;
using Facebook.Rest;
#endregion

public partial class _Default : CanvasFBMLBasePage
{
	public string UserFbId;

	#region Page_PreInit
	protected void Page_PreInit(object sender, EventArgs e)
	{
		base.ApiKey = ConfigurationSettings.AppSettings["APIKey"].ToString();
		base.Secret = ConfigurationSettings.AppSettings["Secret"].ToString();
		base.RequireLogin = true;
	}
	#endregion

	#region Page_Load
	new protected void Page_Load(object sender, EventArgs e)
	{
		CanvasSession fs = new Facebook.Session.FBMLCanvasSession(
			ConfigurationSettings.AppSettings["APIKey"].ToString(),
			ConfigurationSettings.AppSettings["Secret"].ToString()
		);
		Api api = new Facebook.Rest.Api(fs);
		user fbUser = api.Users.GetInfo();	// Uygulamayi kullanan kullanicinin bilgileri

		UserFbId = fbUser.uid.ToString();
	}
	#endregion
}

Page_PreInit

metodunda uygulama Facebook’a tanıtılıyor (onay alınıyor).

Page_Load

‘ta ise yeni bir session oluşturup, uygulamayı o an kullanan kullanıcı hakkında Facebook’tan bilgi istiyoruz. Aldığımız uid değerini de FBML içerisinde kullanıp, kullanıcının adıyla ve profil fotosuyla onu karşılıyoruz.

Uygulamanın bitmiş hali

Orangeplus.Blog Facebook Application

Neler yapabileğinize dair (API, FBML) detaylı bilgiyi Facebook Developer Wiki sayfalarından edinebilirsiniz.

Daha sonraki yazılarımda Nasıl Wall Post Yapılır?, Stream’e Nasıl Basılır? gibi konulara da değineceğim Başlangıç için bu kadarı yeterli sanırım.