Microsoft, Facebook SDK ve WPF ile çok güzel bir uygulama ile Facebook’u masaüstümüze getirmiş. Açık olan kaynak kodları ile geliştiricilere çok güzel bir örnek. Mutlaka indirin deneyin derim…Biraz daha gaz vermesi adına aşağıda bir kaç resim var.
Kaynak kod: http://fishbowl.codeplex.com/
Site: http://fishbowlclient.com/
Bir web uygulamasının Facebook Connect ile beraber çalışabilmesi için cross-domain iletişim dosyasının web uygulamasının kök dizininde bulunması gerekmekte. Bu dosya sayesinde Facebook ile uygulama iletişim kurabiliyor…Cross-domain iletişim olayına çok girmeden hemen asıl konuya dönelim.
Geliştirme ortamında geliştirilmekte olan bir uygulama için Facebook Connect metodlarını kullanmak ve test etmek bu bağlamda sorun çıkarıyordu. Geliştirme ortamında bir uygulama Facebook ile nasıl iletişim kuracak? Bu cross-domain dosyasını(xd_receiver.htm) geliştirme ortamında nasıl olacak şeklinde bir kaç soru almıştım…Biraz geçte olsa bunları cevaplamaya çalışacağım.
Öncelikle Facebook Connect sistemini kullanan bir uygulama geliştirmek istediğimizde Facebook tarafında uygulamayı yaratmak gerekecek. Bunun ile ilgili ayrıntılara girmiyorum, Facebook’un ilgili sayfalarında görseller ile beraber bulabilirsiniz bunu. Bu uygulamayı yaratırken, uygulamanın çalışacağı domain’i yazmak gerekecek. Bu domain’e yüklenen cross-domain iletişim dosyası(xd_receiver.htm) sayesinde uygulamanız Facebook ile iletişim kurabilmektedir.Ancak geliştirmekte olduğunuz uygulama için bu biraz söz konusu olamayacaktır. Çünkü Facebook, sizin geliştirme ortamınıza ulaşamayacaktır.
Bunun için küçük bir html dosyası ile Facebook’un geliştirme ortamınıza ulaşmasını sağlayabilirsiniz.Aşağıdaki kodu Test.htm olarak kaydedin.
23 <html xmlns=“http://www.w3.org/1999/xhtml”>
24 <head>
25 <title>Untitled Page</title>
26 </head>
27 <body>
28
29 <script type=“text/javascript”>
30 var newWindowLocation = “http://localhost:1694/Default.aspx” +window.location.search;
31 window.location = newWindowLocation;
32 </script>
33
34 </body>
35 </html>
Bu dosya Facebook Connect’in geliştirme ortamımıza yönelmesini sağlayacak.Yukarıda port ve sayfa ayarlarını istediğiniz gibi yapabilirsiniz.Peki bu dosyayı nereye koyacağız? Facebook uygulaması yaratırken ki belirttiğimiz domain altına koymamız yeterli olacaktır. Daha sonra uygulama ayar sayfasından Auth.Callback Url’i bu sayfa olarak ayarlamamız gerekmekte. Bu sayede Facebook, uygulamanız ile iletişim sağlamak istediği zaman bu sayfa sayesinde geliştirme ortamınızdaki uygulamaya ulaşabilecektir.
Ve artık geliştirme ortamınızdaki uygulama Facebook Connect ile beraber çalışabilecek. Şimdilik bu kadar…Sorunuz ve probleminiz olursa e-mail atabilirsiniz…
Edit: Bu arada bahsetmeyi unuttum…Aslında yazdım önceki yazılarda sanıyordum ama yazmamışım…:)
ASP.NET için Facebook Toolkit 3.0 versiyonu çıktı. Buradan indirebilirsiniz…Yeni versiyonda oldukça güzel yenilikler var ve en önemlisi Facebook ve Microsoft tarafından büyük bir destek ile beraber çıkmış olması. Yani resmi bir SDK demek çok yanlış olmaz sanırım. Ayıntırıları da buradan takip edebilirsiniz…
Facebook’tan bir değişiklik daha… Sürekli arayış halinde olan ve acaba “nasıl daha iyi olur”(?) düşüncesi ile çalışan Facebook ana sayfasında küçük bir değişiklik yaptı. Tasarım olarak küçük bir değişiklik ama arka planda biraz daha kapsamlı değişiklikler.
News Feed ve Live Feed şeklinde iki başlık ana sayfada dikkat çekiyor olacak. Bunlar ne peki?
News Feed, hangi arkadaşlarınız ile daha çok iletişim halindeyseniz onların durumlarını gösteren bir yapı.Yani hangi arkadaşınızın resimlerine,post’larına daha çok yorum yaptıysanız,daha çok “like” dediyseniz onlar ile ilgili daha çok şey News Feed’de yer alacak.Ayrıca sağ taraftaki Highlights kısmının kalkmış olduğunu fark edeceksiniz…Highlights artık News Feed’in içinde yer alacak. Açıkcası ekran kalabalığı açısından güzel bir yenilik olmuş.
Live Feed ise o an Facebook’ta neler oluyor anlık olarak takip edebileceğiniz kısım. News Feed’den farkı gerçek zamanlı yeniliklerin görülmesi ve belli kriterlere göre olmaması.
Ne kadar gerekli ve faydalı bir değişiklik bilemiyorum.Bekleyip göreceğiz…
Not: Değişiklikleri göremeyenler merak etmesin bir kaç güne hesabınıza yansıyor olacaktır…
I tried a simple search on Google about Facebook and Twitter. Both suggestions are weird. (:
Google hates Facebook…
Google hates Twitter…
With Facebook Connect, you are able to integrate the Facebook Platform with your own web application. Facebook Connect does not provide many functions as Facebook itself for now but provides some very nice functions which can add values for your web applications. I am not going to mention about developing Facebook Connect application from scratch, you can find more about this from Facebook’s development pages.
What I am going to share is about integration of Facebook Connect’s functions or tools with your own web application. As a .NET developer, I did this integration with ASP.NET. So let’s start with a scenario.
As you have seen, Minepla.net use Facebook Connect and fb:comments to get comments from users. In simple way, comment mechanism is done by Facebook Platform. All comments are stored in Facebook’s data repositories as data of a Facebook Application(like Minepla.net). So everything is fine so far, cause I do not need to care about comment mechanism for my web site. But maybe I can also want to store comments in my own database for some reason. So I need to get Facebook Connect’s fb:comments properties within my page. Storing in database is not so difficult after we can send data to the server. So let’s first look how we can take the data from Facebook Connect and send to the server. First of all create an *.aspx file and put fb:comments elements to your page.
<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”FacebookTutorial._Default” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml”>
<head runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server” EnablePageMethods=”true”>
</asp:ScriptManager>
<div>
<script src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php”
type=”text/javascript”></script>
<script type=”text/javascript”>
FB.init(“YOUR APP. KEY”, “xd_receiver.htm”);
</script>
<fb:comments id=”tut_comments”>
</fb:comments>
<div id=”info”>
</div>
</div>
</form>
</body>
</html>
With this page, you should be able to get comments from users. If users have Facebook account, they can login from their account and post a comment as a Facebook user to this page. So far there is no data stored in your application. Just a data is transferred to Facebook with help of this page. The comments are displayed in this page and also in Facebook.
Fb:comments is one of the tags in XFBML(Facebook Markup Language). To use these tags you should add xmls:fb=http://www.facebook.com/2008/fbml definition to your page. You can find other prerequisites at Facebook’s developer pages.
So now we have to take the text value from comment box and send it to the server. To do this, we are going to write some JavaScript. Here it is;
FB_RequireFeatures(["Comments"],function() {
FB.CommentClient.add_onComment(function(comment) {
PageMethods.GetComment(comment.post, OnSucceeded, OnFailed);
});
});
function OnSucceeded(result, userContext, methodName) {
document.getElementById(“info”).innerHTML = result;
}
function OnFailed(error, userContext, methodName) {
}
With FB.CommentClient.add_onComment() function we are adding a function when user click send comment button on comment box. What we are writing in this function is just about PageMethods in Asp.net Ajax. The important thing in here is the parameter which is comment.post. Comment.post is the value in comment box. For this example we have just simple method in code behind.
[WebMethod]
public static string GetComment(string comment)
{
return “This comment: ” + comment + ” is written @” + DateTime.Now;
}
After sending values to server, do what you want to do.It is all yours now. So this is all. The main concept is just like this.In future, I am going to tell you more about Facebook Connect’s javascript API with Asp.Net examples…
You may find the online example of this article in here.
Artık sitedeki yazılara yorumlarınızı Facebook hesabınız ile kolayca iletebileceksiniz. Nasıl mı? Çok basit…Facebook’a login olarak siteye girdiğinizde site sizi otomatikman tanıyacaktır ve yorum yazmanıza izin verecek. Tabi ki isterseniz logout olup, anonim olarakta yorum yapabilirsiniz.
Bu konu ile ilgili ilerleyen günlerde güzel şeyler paylaşıyor olacağım…