Facebook Connect Halaman 1

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:  }

 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:  }

 1: void FacebookLoginBrowser_Loaded(object sender, RoutedEventArgs e)

 2:  {

 3:  if (!loggedIn)

 4:  {

 5:  LoginToFacebook();

 6:  }

 7:  }

 1: protected override void OnNavigatedFrom(NavigationEventArgs args)

 2:  {

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

 4:  base.OnNavigatedFrom(args);

 5:  }

 1:  protected override void OnNavigatedTo(NavigationEventArgs args)

 2:  {

 3:  base.OnNavigatedTo(args);

 4:  }

 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:  }

 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

HALAMAN :

LIHAT SEMUA

Mohon tunggu...

Lihat Inovasi Selengkapnya

Beri Komentar

Belum ada komentar. Jadilah yang pertama untuk memberikan komentar!

Facebook Connect

wp7

facebookconnect

sosmed

gadget

teknologi

Artikel Lainnya

LAPORKAN KONTEN