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).

Facebook Application Development - Setup 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.

Give your app a name

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 API Key, Secret

Facebook Application ID, API Key, Secret

Application IDAPI 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ı.
Facebook Application Authentication

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!)
Facebook Application Canvas

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.

Facebook Application Sandbox Mode

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

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.

Paylaşmanın keyfi bambaşka :)
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DotNetKicks
  • FriendFeed
  • LinkedIn
  • Posterous
  • Reddit
  • StumbleUpon
  • Technorati
  • Tumblr
  • Twitter
This entry was posted in ASP.NET, Development, Facebook, Facebook Application, Microsoft and tagged , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
  • Emruzunok
    Arkadaşlar biraz karıştırarak şöyle bir şey buldum.
    signed_request for Canvas: ayarını devre dışı bırakın.Kum Havuzu Modu: devre dışı bırakın.Tuva bağlantısı : http://www.indexteknoloji.com/...  şekilde giren kullanıcıyı bulmuyor ama, istediğiniz bir stringi gösterebiliyorsunuz. Teşekkürler.
  • Hgfhfghgfhgf
    ghjg
  • hocam bomboş bir beyaz sayfa çıkıyor nedendir acaba?
  • Emruzunok
    bende aynı :(
  • Pcwarder
    Hocam uygulamayı çalıştırıyorum ama sürekli boş yanıt alındı diyor kendi hesabımda hatasız çalışıyor ama dışardan biri kullanmak istediğinde bu hatayı veriyor sandbox modunuda disabled yaptığım halde nedeni ne olabilir acaba ?
  • Teşekkürler gayet açıklayıcı olmuş
  • Selamlar,
    Uygulamayı bastan aşagi kontrol ettim ancak, dosyayı indirip malesef calistiramadim,
    Ekranlar boş geliyor,
    Bunun icin izleyecegimiz bir yol warmi yardimci olabilirmisiniz ?

    Şunu söyleyebilirim, Öncelikle www.facebook.com/Developers adresine girip bir uygulama yarattim,
    Sonra facebook üzerinden uygulamamada erisebildim ancak iş api kullanımına gelince bir türlü beceremedim,

    Yardimlarinizi rica ediyorum
  • Ayşe
    Teşekkür ederim yazınız için.Fakat yaptığımız uygulamayı facebook a nasıl yüklüyoruz?
  • Yusufduyar Ce
    Merhabalar. Öncelikle yazınız başlangıç için gayet yeterli ve güzel bir yazı olmuş bu yönden teşekkür ederim. Fakat wall post ve stream ile ilgili yazılarınızı da merakla bekliyorum...
  • Seo
    Farklı bir mantıklı oluşturulmuş, oldukça anlaşılır bir maakel .teşekkürler.
  • Sefer kıyılı
    mrh ben daha önceden bı uygulama kurdum ama ayalarını yapamadım uygulama olarak gorunmuyor bu callback url nedir nasıl yaılır yardımcı olabılırmısınız sımdıden tesekkur ederım
  • Ornek projeyi indirip, makaledeki yonergeleri de takip edersen, kolayca ayaga kaldirabilirsin uygulamani.
  • denizkaradenz
    Çok Başarılı, açık seçik ve sade, testin sonucun hemen aldım, Çok teşekkür ederim
blog comments powered by Disqus