July 13th, 2010

Saya ceritanya baru berhasil menggunakan Facebook Graph API dan Codeigniter. Ini saya lakukan karena saya sudah cukup menyerah dengan ribetnya RestAPI Client yang diberikan Facebook. Karena kasus saya agak berbeda, yaitu saya punya beberapa aplikasi terpisah dalam satu instalasi Codeigniter. Setelah melihat-lihat, ternyata ada cara lain yang bisa kita lakukan. Dan yang paling mudah dan cukup aman diimplementasikan adalah Facebook Graph API ini.

Catatan ini kiranya bisa berguna buat teman-teman yang lain atau yang mungkin di kemudian hari dapat proyek ini. Juga sebagai catatan saya, biar nanti kalau ada proyek lain saya tinggal melihat dokumentasi yang saya buat.

Yang perlu disiapkan adalah 1 librari dan 1 file controller dan 1 file view. Tidak perlu unduh (download) yang lain. Facebook Graph API ini memang jauh lebih simpel. Dan saya sangat menikmati proses belajar ini. Dan perlu diketahui, bahwa tutorial kali ini tidak akan mencakup banyak hal. Saya hanya mengharapkan anda mengerti konsep baru yang ditawarkan Facebook ini.

Sebelum memulai, pastikan beberapa hal berikut ini:

  1. Versi PHP yang dipakai adalah versi 5
  2. Pengetesan skrip tidak bisa dilakukan di server lokal. Jadi anda harus punya hosting dan harus online
  3. Codeigniter yang saya pakai 1.7.2, saya kurang tahu apa tetap akan sama jika menggunakan versi lama

Langkah pertama, buat aplikasi

Ini adalah langkah wajib. Karena dengan mendaftarkan aplikasi kita, Facebook akan memberikan 3 hal penting yang nantinya kita butuhkan. Yaitu Application ID, Application Secret dan API Key. [Klik link ini untuk mendaftarkan aplikasi anda]. Yang perlu anda isi adalah Application Name dan Connect->Connect URL.

Langkah kedua, unduh librari Curl

Librari Curl yang saya pakai ini memang hebat. Mudah sekali pakainya. Bisa diunduh dari link ini: http://codeigniter.com/wiki/Curl_library/

Langkah ketiga, konfigurasi

Buka file /application/config/config.php, lakukan beberapa hal berikut ini:

  1. Index page dibuat kosong. $config['index_page'] = ""; (baris 26)
  2. URI Protocol dibuat jadi ORIG_PATH_INFO. $config['uri_protocol'] = "ORIG_PATH_INFO"; (baris 44)
  3. On-kan pilihan query string. $config['enable_query_strings'] = TRUE; (baris 151)

Langkah keempat, htaccess

Karena konfigurasi codeigniter saya tidak menggunakan “index.php”, maka saya butuh berkas (file) htaccess. Berikut isinya:

RewriteEngine on
RewriteCond $1 !^(index\.php|assets)
RewriteRule ^(.*)$ /projects/fbci/index.php/$1 [L]

Sesuaikan path ini:/projects/fbci/index.php dengan aplikasi anda.

Langkah kelima, controller

Kita hanya punya 1 berkas controller. Saya menggunakan controller yang diberikan Codeigniter saat kita instalasi, yaitu controller Welcome.

Controller itu nantinya akan punya 2 method, yang pertama sebagai gerbang pertama sebelum pengguna (user) masuk ke Facebook. Dan yang kedua sebagai penerima data dari Facebook. Berikut adalah gambar perjalanan aplikasi kita yang berkomunikasi dengan Facebook (semoga ngerti, saya kurang bisa gambar).

Dari gambar di atas, berikut detail yang bisa saya berikan:

  1. Ketika pengguna mengeklik sebuah tautan di aplikasi kita (bisa berupa link, tombol, atau apa saja)
  2. Aplikasi kita mengarahkan pengguna untuk login dulu ke Facebook dan atau menerima konfirmasi tentang informasi apa saja yang akan aplikasi kita butuhkan. Tautan itu seperti ini:
    https://graph.facebook.com/oauth/authorize?client_id=[client_app_id]&redirect_uri=[redirect_uri]
  3. Dari tautan di atas, [client_app_id] diambil dari kode aplikasi ketika kita selesai mendaftarkan aplikasi di Facebook. Sedangkan [redirect_uri] adalah URL yang akan kita gunakan untuk menangkap kode dari Facebook berupa $_GET['code']. Maka dari itu, aplikasi kita harus menerima query string (lihat bagian konfigurasi di atas).
  4. Setelah Facebook mengirim kode, kita perlu akses token untuk mendapatkan data-data pengguna Facebook. Untuk mendapatkan akses token, kita perlu menghubungi lagi Facebook dengan mengirim data kode (yang kita dapat di nomor 2), [redirect_uri] dan [secret_code].
  5. Setelah itu Facebook akan mengirimkan akses token dalam format JSON.
  6. Setelah punya akses token, kita bisa bebas meminta data-data pengguna ke Facebook.

Langkah keenam

Ini adalah langkah terakhir tutorial kali ini, yaitu mengunduh berkasnya. Saya sadar bahwa tidak ada keterangan yang lengkap sekali untuk level pemula. Tapi percayalah, saya hanya bisa mengarahkan dan sedikit memberitahu cara kerja Graph API ini. Dokumentasi Graph API lebih lengkap dan siap disantap.

unduh demo

Berikut adalah kode untuk Controller:

<?php
 
class Welcome extends Controller {
 
	// beberapa detail aplikasi kita
	// ini semua harus diisi.
	var $fb_appid = "";
	var $fb_secret = "";
	var $fb_api = "";
 
	function Welcome()
	{
		parent::Controller();	
		$this->load->helper("url");
	}
 
	function index() {
		$data['app_id'] = $this->fb_appid;
		$this->load->view('welcome_message', $data);
	}
 
	function fb() {
		$this->load->library("curl");
		// method untuk redirect balik dari facebook
		// setelah pemanggilan pertama, facebook mengirimkan sebuah kode 
		// yang bisa kita tangkap lewat $_GET['code']
 
		// cek dulu, apa $_GET['code'] ada
		if(isset($_GET['code'])) {
			// buat url untuk mengambil token
			$url = 'https://graph.facebook.com/oauth/access_token?client_id='.$this->fb_appid.'&redirect_uri='.site_url("/welcome/fb").'&client_secret='.$this->fb_secret.'&code='.$_GET['code'];
 
			// ambil token lewat curl
			$token_data = $this->curl->simple_get($url);
 
			// ambil kode token saja, dengan regular expression
			// arti tanda ([^&]+) adalah:
			// ambil semua karakter asal bukan tanda &
			preg_match("/access_token=([^&]+)/",$token_data,$token);
 
			// kode token ada di variabel token[1]
			$access_token = $token[1];
 
			// pengambilan token selesai, sekarang ambil userid, nama
			$uri = 'https://graph.facebook.com/me?access_token='.$access_token;
			$data = $this->curl->simple_get($uri);
 
			// decode data
			$fb = json_decode($data);
			$fb_id = $fb->id;
 
			// ambil nama dan foto pengguna
			$fb_userdata = $this->curl->simple_get("https://graph.facebook.com/".$fb_id."?fields=name,picture&access_token=".$access_token);
 
			//echo "https://graph.facebook.com/".$fb_id."?fields=name,picture&access_token=".$access_token;
 
			$fb_user = json_decode($fb_userdata);
 
			$data = array();
			$data['fbuser'] = array('id'=>$fb_id, 'avatar'=> $fb_user->picture, 'nama'=> $fb_user->name);
 
			//print_r($data);
 
		}
		elseif(isset($_GET['error_reason'])) {
			// untuk menangkap user yang klik "Dont Allow" atau "Cancel di Facebook"
			// buat variabel untuk ditampilkan di view
			$data['tolak'] = "Uh oh, saya ditolak T_T";
		}
 
		$this->load->view("welcome_message",$data);
	}
}
?>

Related posts:

  1. KetaKetik dan Teektak ditutup sementara Terbaru: KetaKetik dan Teektak sudah pindah ke server baru. Atas...
  2. Belajar Javascript lebih lanjut dengan JQuery (2) Membuat form dengan AJAX Membuat form adalah hal biasa dalam...
  3. Tutorial WordPress: Membuat daftar komentar lebih menarik Saya masih saja agak kesulitan untuk menulis tutorial baru tentang...
  4. Membedah theme Didats.net Menjadi seorang web designer tentunya punya beban dan ego yang...
  5. Kontes aplikasi web 10 Kilobyte 10k apart adalah kompetisi membuat aplikasi web yang kurang dari...

Label:, , , ,



Kategori:blog, programming, Technology, tutorial



25 Responses

  1. adi says:

    mantab dats! oya, sebaiknya jgn pake $_GET ya soalnya belum disucikan :) mending pake $this->input->get()

  2. putragaluh says:

    mantap mas, nanti akan saya coba … mohon ijin repost di blog saya sekalian buat backup juga heee. salam

  3. Haqqi says:

    Wah, keren nih. Saya masih nubie di CI. Bisa nambah pelajaran nih. Yang sering kepakai di FB apa sih buat web luar?

    • Didats Triadi says:

      maksudnya apa nih, “yang sering kepake di FB buat web luar” ? saya gak ngerti.

  4. teddy says:

    $fb_appid = “”;
    $fb_secret = “”;
    $fb_api = “”;

    dapat dr mana om valuenya?

    • Didats Triadi says:

      waktu daftar aplikasi, nanti dikasih tau.coba aja daftar dulu, nanti keliatan sendiri kok.

  5. electric.bit says:

    Keren om, mo dong ikutan belajar facebook API

  6. bayoewebid says:

    kalau gak pakai htaccess, dalam config.php pakai index=”index.php” kah ?

    pas di coba kok selalu 404 ??

  7. Arie says:

    Mas didats…. buat oauth login nya udh berhasil….
    terus udh dapet access_token nya juga….
    and also, udh dapet profile info juga……

    sekarang, klo kita mau update status gimana caranya yaaaa??
    aku coba coba kirim pake curl->simple_post ngga bisa…
    script nya kurang lebih:

    $url = ‘https://graph.facebook.com/’.$uid.’/feed’;
    $post = array(
    ‘access_token’=>$access_token,
    ‘message’=>$msg
    );
    $parameter = array(
    CURLOPT_HEADER=> 0,
    CURLOPT_SSL_VERIFYPEER => FALSE,
    CURLOPT_RETURNTRANSFER => TRUE
    );
    $set_update = $this->curl->simple_post(
    $url,$post,$parameter);

    and resultnya di var_dump: bool(false)

    apa yang salah yaaa???
    Mohon petunjuk nya mas….. :D

    • Didats Triadi says:

      loh, ini repost? :D

      URL-nya kalau $uid benar, harusnya udah benar. Coba tanpa parameter?

  8. mantab ini, sharing yang sangat bermanfaat

    selain jago Desain mock up web,
    XHTML/CSS dan WordPress,
    Didats juga jago pemrograman

    :) *amazing*

    • Didats Triadi says:

      aku ini dasarnya programmer cak. cuma nyadar kalo programmer doang, saingan makin banyak. jadinya ngikut2 sok design :D
      tapi sekarang lagi seneng sama jquery.

  9. cwicaksono says:

    wah keren mas Didats, tetapi perbedaan dengan API facebook yang lama apa ya?

    • Didats Triadi says:

      kalau udah coba gimana rasanya API Facebook yang lama, terus tau yang Graph API ini, pasti tau bedanya.

  10. sebelumnya selamat ya,.. karna udah berhasil,..
    dan terima kasih karna udah berbagi ilmu ma kita2

  11. Leo says:

    wah, tutorial nya mantap. dari kemaren lg bergelut ama fb fb an soal nya, dari fb connect, fbml etc etc. keep the good stuff coming broder :)

  12. Jauhari says:

    Semakin Membumi.. saya suka itu…

  13. [...] pengunjung unik dan pageview dari Google Analytics. Terlihat bedanya saat saya menggunakan Facebook API. Itupun sempat 3 hari saya matikan karena saya butuh mengoptimasi kode-kode [...]

  14. zam says:

    woh, pas banget, lagi butuh. sebelumnya aku bikin library sendiri, pake CURL juga sih, tapi tidak semudah yang ente jelaskan ini.

    matur suwun, kang. :D

  15. wanyax says:

    aku biasanya pake API yg lama .. waktu itu nyobain pake API yg baru .. eh … malah pusing .. thnx berat buat postingnya … keep up the good work … ilmu mang harus dibagi-bagi …

  16. Bayou says:

    Terima kasih mas… Bermanfaat banget.