Facebook Connect

Pada kesempatan kali ini, saya akan menjelaskan mengenai menkoneksikan aplikasi facebook dengan aplikasi windows phone. kita akan membuat project yang terdiri dari dua halaman, halaman pertama berisi webrowser yang digunakan untuk login ke facebook dan halaman kedua digunakan untuk posting pesan ke wall facebook kita. mari langsung saja kita praktikan.

image

gambar diatas merupakan tampilan hasil aplikasi ini langsung saja mari kita membuat project  ini, requirement: - visual studio for windows phone - facebook C# sdk v 5.0 , bisa di donwload disini: http://facebooksdk.codeplex.com/ 1. Buatlah project dengan nama fbconnect

image

2. Buatlah halaman MainPage.xaml kemudian buatlah tampilannya seperti gambar dibawah ini

image

3.  Tambahkan kode berikut ini

 1: private const string apiKey = "tambahkan APIKey Facebook disini";

 2:  private string requestedFbPermissions = "user_checkins,

 friends_checkins,publish_checkins,user_about_me,user_photos,

 user_videos,publish_stream";

 3:  private string accessToken;

 4: 

 5:  private const string successUrl = "http://www.facebook.com/connect/login_success.html";

 6:  private const string failedUrl = "http://www.facebook.com/connect/login_failure.html";

 7:  private bool loggedIn = false;

 8:  private FacebookApp fbApp;

 9:  PhoneApplicationService appService = PhoneApplicationService.Current;

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 4. Kemudian buatlah beberapa method seperti dibawah ini

 1: private void loginSucceeded()

 2:  {

 3:  NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.RelativeOrAbsolute));

 4:  }

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

 1: private void LoginToFacebook()

 2:  {

 3:  var parms = new Dictionaryobject>();

 4:  parms["display"] = "touch";

 5:  parms["client_id"] = apiKey;

 6:  parms["redirect_uri"] = successUrl;

 7:  parms["cancel_url"] = failedUrl;

 8:  parms["scope"] = requestedFbPermissions;

 9:  parms["type"] = "user_agent";

 10: 

 11:  var loginUrl = fbApp.GetLoginUrl(parms);

 12:  FacebookLoginBrowser.Navigate(loginUrl);

 13:  }

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

 1: void FacebookLoginBrowser_Loaded(object sender, RoutedEventArgs e)

 2:  {

 3:  if (!loggedIn)

 4:  {

 5:  LoginToFacebook();

 6:  }

 7:  }

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

 1: protected override void OnNavigatedFrom(NavigationEventArgs args)

 2:  {

 3:  appService.State["fbApp"] = fbApp;

 4:  base.OnNavigatedFrom(args);

 5:  }

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

 1:  protected override void OnNavigatedTo(NavigationEventArgs args)

 2:  {

 3:  base.OnNavigatedTo(args);

 4:  }

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

 1: private void FacebookLoginBrowser_Navigated(object sender, System.Windows.Navigation.NavigationEventArgs e)

 2:  {

 3:  FacebookAuthenticationResult authResult;

 4:  if (FacebookAuthenticationResult.TryParse(e.Uri, out authResult))

 5:  {

 6:  fbApp.Session = authResult.ToSession();

 7:  loginSucceeded();

 8:  }

 9:  }

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

 1: private void FacebookLoginBrowser_LoadCompleted(object sender, NavigationEventArgs e)

 2:  {

 3:  try

 4:  {

 5:  FacebookLoginBrowser.InvokeScript("eval", "(function()  

{ var aboveFooter=document.getElementById('platform_dialog_bottom_bar').previousSibling; document.getElementById('platform_dialog_bottom_bar').style.top=aboveFooter. offsetHeight + aboveFooter.offsetTop + 'px' })()");

 6:  }

 7:  catch (Exception ex) { }

 8:  }

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 5. kemudian buatlah file halaman dengan nama Page1.xaml, setelah itu buatlah tampilannya seperti dibawah ini

image

6. Buatlah method seperti kode dibawah ini

 1: private void postLink()

 2:  {

 3:  try

 4:  {

 5:  var linkDetails = new Dictionary<string, object>();

 6: 

 7:  linkDetails.Add("message", textBox1.Text);

 8: 

 9:  fbApp.PostAsync(@"/me/feed", linkDetails, (fbResult) =>

 10:  {

 11:  var result = (IDictionary<string, object>) fbResult.Result;

 12:  //var albumID = result["id"];

 13: 

 14:  });

 15:  MessageBox.Show("the news has posted successfully . . . ");

 16:  }

 17: 

 18:  catch(Exception e)

 19:  {

 20:  MessageBox.Show("error, please try again");

 21:  }

 22:  }

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 7. Setelah semua tahapan ini berakhir, maka mari kita mendaftarkan aplikasi ini di facebook. https://developers.facebook.com/apps buatlah aplikasi disini, kemudian anda akan mendapatkan app id yang nantinya anda gunakan untuk value dari apiKey. Anda dapat pula menambahkan logo aplikasi seperti pada gambar dibawah ini.

image

disini aplikasi yang saya buat bernama TOPPAS dan juga terdapat logo aplikasinya. Sekian tulisan singkat saya semoga bermanfaat dan menambah ilmu kita