Panduan Lengkap Bikin Aplikasi Facebook Keren

Panduan Lengkap Bikin Aplikasi Facebook Keren – Integrasi aplikasi ke Facebook bisa sangat menguntungkan buat para developer. Kamu bisa menghubungkan aplikasi kamu ke News Feed dan juga ke notifikasi. Teknologi utama di Facebook ada beberapa, seperti Social Plugins, Graph API, dan Platform Dialogs.

Perkenalan ke Aplikasi Facebook

Ada tiga konsep utama dalam membangun aplikasi. Kalau kamu paham dengan tiga hal ini, prosesnya akan lebih gampang dijalankan. Konsepnya adalah:

Dasar-Dasar di Facebook

Canvas Page – Ini bisa dimuat ke dalam Facebook sebagai aplikasi. Bahasa atau tools yang dipakai untuk bikin aplikasi harus mendukung pemrograman web. Beberapa tools yang biasa dipakai misalnya Java, C, PHP, atau Python. Canvas URL yang berisi HTML, Javascript, dan CSS dipakai untuk menampilkan Canvas Page di dalam halaman web Facebook.

Bookmarks – Bookmark dipakai biar pengguna bisa dengan mudah balik lagi ke aplikasi kamu dari dalam Facebook. Pengguna bisa menambahkan bookmark ke favorit supaya aplikasi kamu lebih diprioritaskan. Bookmark ini juga bisa nunjukin counter atau jumlah permintaan ke aplikasi kamu.

Notifications – Notifikasi dipakai untuk ngasih info update atau perubahan menarik yang relevan ke pengguna. Kamu bisa mengirimkan notifikasi ke pengguna yang mungkin butuh info tersebut. Ada dua jenis request (permintaan) yang bisa dikirim:

User generated requests – Permintaan yang dikonfirmasi dari aksi atau update pengguna.
App generated requests – Permintaan yang cuma bisa dikirim ke pengguna yang sudah mengizinkan aplikasi kamu.

News Feeds – Ini adalah cerita atau update yang muncul pas pengguna login ke akun Facebook mereka. Cerita ini bisa berupa pengalaman, aplikasi baru, atau game baru yang lagi dimainkan. Pengalaman baru bisa diposting ke Facebook dengan foto atau video yang nunjukin detail pengalaman itu. Temanteman kamu bisa ikut melihat pengalaman itu lewat foto atau video, bahkan bisa kasih komentar.

Mengenal Facebook API

Untuk mulai pakai API, kamu harus punya API key dulu. Cara dapet kuncinya, kamu perlu bikin aplikasi, pilih nama aplikasinya, lalu setuju sama syarat dan ketentuan di halaman developer aplikasi Facebook. Setelah itu, kamu akan dikasih API key dan secret key.

Semua Tentang API

Untuk mulai coding, kamu bisa pakai FQL (Facebook Query Language) yang fungsinya buat ngambil data dari Facebook. Tapi, data ini cuma bisa diambil dari pengguna yang membagikan informasinya secara publik.

Untuk bikin Graph API lebih gampang dipakai dan supaya penulisan aplikasi jadi lebih mudah, gunakan Graph API Explorer. Aplikasi ini membantu kamu memulai dengan Graph API sekaligus ngetes API pas kamu bangun aplikasi. Explorer bisa bantu kamu untuk:

Bikin request dan langsung lihat hasilnya dalam format yang rapi dari Graph API.
Mengeksplorasi koneksi antar objek dan deskripsi field supaya kamu ngerti arti responnya.
Dengan mudah dapet izin (permission) yang dibutuhkan untuk akses data biar aplikasi kamu bisa lebih optimal buat pengguna.
Gampang gantiganti metode HTTP: GET, POST, dan DELETE untuk ambil, update, bikin, atau hapus objek.
Bisa pindah antar objek di graph cuma dengan klik ID yang ada di hasil format.

Explorer ini intinya adalah aplikasi yang dibangun di platform Facebook, yang pakai Graph API dengan izin yang kamu kasih, buat bantu kamu mengeksplorasi koneksi dan objek di graph.

Mengenal Facebook Markup Language

FBML atau Facebook Markup Language adalah versi bahasa HTML milik Facebook yang dipakai di internet. Tapi, ada beberapa tag HTML yang tidak didukung FBML, seperti HTML, HEAD, BODY, dan Javascript.

Coba Hal Baru

Diumumkan kalau FBML sudah tidak berfungsi lagi mulai 1 Juni 2012. Para developer disarankan untuk bikin aplikasi baru dengan menggunakan HTML, Javascript, dan CSS.

HTML – singkatan dari Hyper Text Markup Language. HTML adalah bahasa markup utama untuk halaman web. HTML ditulis menggunakan elemenelemen HTML berupa tag yang ada di dalam tanda kurung sudut pada konten halaman web. Tag biasanya punya pasangan, misalnya `<h1>` dan `</h1>`, kecuali beberapa tag seperti `<img>`. Tag pembuka disebut start tag, dan tag penutup disebut end tag. Di antara tag ini, developer bisa menambahkan teks, komentar, tag lain, atau konten berbasis teks lainnya.

Javascript – adalah bahasa scripting berbasis prototipe. Javascript bersifat dinamis dengan fungsi kelas satu (first class functions). Bahasa ini mendukung gaya pemrograman objectoriented, imperative, dan functional. Biasanya, Javascript dipakai di dalam browser web untuk bikin antarmuka (UI) lebih interaktif dan membuat website jadi lebih dinamis. Selain itu, Javascript juga dipakai di luar web, seperti di dokumen PDF, browser khusus, dan widget desktop. Sintaks Javascript dipengaruhi oleh bahasa C dan banyak mengambil konvensi penamaan dari Java, tapi dua bahasa ini sebenarnya tidak berhubungan. Prinsip utama desain Javascript diambil dari bahasa Self dan Scheme.

CSS – singkatan dari Cascading Style Sheets. CSS dibuat oleh World Wide Web Consortium (W3C) untuk menyelesaikan masalah ketika developer harus mengatur font dan warna di website besar dengan HTML. Di versi HTML 4.0 terbaru, semua format bisa dipisahkan dari dokumen HTML dan disimpan di file CSS terpisah.
Semua browser sekarang sudah mendukung CSS.

Memahami Facebook Query Language

FQL atau Facebook Query Language adalah versi SQL milik Facebook (SQL = Structured Query Language) yang banyak dipakai di internet. FQL adalah bahasa query yang memungkinkan pengguna mengambil data dari pengguna lain dengan antarmuka mirip SQL, jadi tidak perlu pakai Facebook Platform Graph API. Data hasil query FQL biasanya dikembalikan dalam format JSON.

Memahami Query

Query di FQL pakai tag seperti SELECT, FROM, WHERE, dan untuk subquery menggunakan kata kunci IN. Semua query juga harus bisa diindeks (indexable). Artinya, query cuma bisa ke properti yang memang ditandai sebagai indexable. Properti yang sudah diindeks bikin query jadi lebih cepat dan mudah. Jadi, setiap request yang dikirim bisa mengembalikan data dengan kecepatan yang lebih baik dibanding normal.

Multiquery adalah kumpulan query FQL yang digabung jadi satu request, dan semua data dikembalikan sekaligus. Query tipe ini pakai struktur JSON, di mana masingmasing query tetap pakai sintaks yang sama seperti query sederhana. Dengan cara ini, kamu bisa ambil data dan langsung memakainya di query lain dalam satu request.

Seperti SQL, FQL juga bisa menangani operasi matematika sederhana, operator Boolean dasar (seperti AND atau NOT), serta perintah ORDER BY dan LIMIT.

Kelebihan FQL:

Hemat bandwidth karena kamu cuma ambil data sesuai field yang diminta. Data yang diunduh lebih sedikit, biaya juga lebih kecil.
Query lebih kompleks bisa dibuat dengan sekali request, jadi jumlah permintaan ke server berkurang. Ini bikin browsing jadi lebih cepat dan nyaman.
Antarmuka seragam dan konsisten.
Mudah dan menyenangkan dipakai.

Bekerja dengan Facebook JavaScript

Untuk mengakses server Facebook, disarankan menggunakan JavaScript SDK (JS SDK). JS SDK adalah kumpulan fitur yang mencakup REST API, Graph API, dan Dialogs. SDK ini juga bisa menampilkan versi XFBML dari Social Plugins dan memungkinkan halaman Canvas berkomunikasi dengan Facebook.

Latihan – Gimana Cara Kerjanya?

Agar bisa mengaktifkan SDK, kamu perlu App ID dari dashboard aplikasi.

JS SDK butuh elemen root supaya bisa dimuat dengan benar. Elemen root ini nggak boleh disembunyikan, karena kalau disembunyikan, beberapa bagian JS SDK nggak akan berfungsi dengan baik di Internet Explorer. Elemen root sebaiknya ditempatkan dekat bagian atas `<body>` supaya semua bagian JS SDK bisa jalan dengan benar.

Kode JS SDK akan dimuat secara asynchronous supaya halaman website bisa tetap cepat dimuat baik untuk pengguna maupun mesin pencari seperti Google dan Bing. URL di dalam kode ini menggunakan protokol relatif, jadi browser akan memuat SDK dengan protokol yang sama dengan halaman utama, dan ini akan mencegah munculnya peringatan seperti “Insecure Content”.

Channel file harus dicache oleh browser selama mungkin supaya pengalaman pengguna di website tetap lancar. Tanpa cache, halaman bisa terasa lambat saat dimuat.

JS SDK memungkinkan pengguna untuk login ke website kamu dengan akun Facebook mereka. Artinya, mereka akan tetap login di website kamu selama masih login di Facebook.

Synchronous loading (pemanggilan JS secara sinkron) berguna untuk debugging, tapi tidak disarankan untuk penggunaan normal karena ini akan membuat halaman jadi lambat dan pengalaman pengguna jadi buruk. Selain itu, ini juga berdampak negatif ke peringkat mesin pencari saat mereka merayapi web.

Membuat Aplikasi yang Jalan di Fan Page & Profile Page

Ada banyak aplikasi / layanan yang bisa bantu kamu bikin halaman profil yang lengkap, menarik, dan mudah dipakai. Berikut beberapa situs yang direkomendasikan.

Penjelasan (Bagian Rekomendasi)

(Catatan: Judul “Emotional Eating Defined” di teks aslinya kelihatannya nggak relevan dengan konteks bab ini—mungkin salah tempel dari materi lain. Aku tetap lanjutkan ke daftar situs yang dimaksud.)

Daftar situs yang direkomendasikan:

About.me
Ini situs populer yang menyediakan layanan bikin profil dengan fotomu, daftar situs favorit, dan bio singkat tentang dirimu. Bahkan mereka kasih paket kartu nama gratis berdasarkan konten profil kamu. Tujuan utamanya adalah jadi satu tempat terpusat buat kamu arahkan semua kontak—tanpa harus “add” dulu kayak di Facebook atau LinkedIn. Situs ini juga punya dashboard analitik pribadi buat nunjukkin berapa banyak orang yang mampir dan langsung keluar (bounce) dari halamanmu.

Gravatar
Situs ini menyediakan layanan menghubungkan avatar publik dengan alamat email. Kamu bisa nambah bio singkat, tautan ke media sosial, bahkan beberapa foto.

Chi.mp
Situs ini ngumpulin semua jaringan sosial kamu ke satu halaman. Dia narik feed dari Facebook, Flickr, bahkan Twitter. Bagus karena semua akun sosial kamu kelihatan di satu tempat, jadi kontak kamu lebih gampang ngecek kabarmu.

Google+
Platform ini punya campuran fitur yang mirip gabungan Facebook dan Twitter. Kamu bisa berbagi foto dan video, dan orang lain bisa masukin kamu ke “circle” mereka. Ada juga lebih banyak kolom (field) buat masukin informasi tambahan di halaman profil.

Flavors.me
Ini alternatif yang oke untuk about.me dengan fungsi yang mirip. Kamu juga bisa daftar custom domain lewat Flavors.me sehingga layanan ini jadi makin keren.

Carbonmade
Situs ini fokus ke proyek—ideal buat orang kreatif. Proyekproyek yang lagi jalan bisa ditampilkan dan dilihat oleh member lain.

Mengintegrasikan Aplikasi di Newsfeed dan Notifikasi

Facebook menggunakan fitur Groups untuk mengintegrasikan aplikasi dengan fiturfitur yang sudah ada. Begini cara kamu bisa mulai mengintegrasikan aplikasi.

Integrasikan Aplikasi Kamu

News Feed – Untuk pengaturan distribusi saat berbagi konten, publisher konten di Facebook sekarang sudah mendukung Groups. Pengguna bisa mengatur status update, foto, video, atau link agar hanya terlihat oleh anggota dari satu grup tertentu. Privasi grup ini bagus banget buat komunitas spesifik, misalnya grup alumni sekolah, atau perkumpulan tertentu. Semua info dan foto yang diposting hanya bisa dilihat oleh anggota grup. Semua postingan dan feed yang masuk ke grup hanya bisa dilihat oleh member grup itu.

Kalau ada pengguna yang memposting sesuatu di feed grup, semua anggota grup akan dapat notifikasi tentang feed itu. Feed ini mirip dengan wall post tapi hanya terbatas di grup. Kalau ada anggota grup yang ditag, orang itu akan dapat notifikasi tentang Like dan Komentar baru di postingan tersebut.

Pengguna juga bisa melihat cerita (stories) dari News Feed yang terkait dengan grup, termasuk grup yang mereka bukan anggota, dan cerita tentang event yang diadakan grup di halaman mereka sendiri.

Notifications – Pengguna bisa mengatur aksi apa saja yang akan menghasilkan notifikasi di semua grup mereka. Pengaturan email untuk masingmasing grup bisa diubah lewat link di bagian bawah menu Groups Notification settings. Pengguna juga bisa masuk ke masingmasing grup, lalu klik tombol Edit Notifications di pojok kanan atas untuk mengatur notifikasi apa saja yang mau diterima dari grup itu, termasuk ke alamat email mana notifikasi itu dikirim.

Mendaftarkan Aplikasi Kamu di Facebook

Sebelum bikin aplikasi untuk Facebook, kamu harus punya akun Facebook dulu. Pergi ke website Facebook dan daftar akun gratis. Setelah punya akun, kamu bisa mulai bikin aplikasi di akun itu.

Sebelum Bikin Aplikasi

Kamu perlu pergi ke facebook.com/developers dan mungkin harus login ulang kalau diminta. Nanti akan ada permintaan izin untuk mengaktifkan developer applications, klik Allow.

Kalau kamu lihat tab Create New App, klik itu untuk memulai wizard pembuatan aplikasi. Kamu harus isi semua data yang diminta, centang kotak bahwa kamu setuju dengan kebijakan Facebook Platform, lalu klik Continue.

Selanjutnya, kamu harus bikin App Display Name. Ini adalah nama aplikasi yang akan dilihat oleh pengguna. Setelah itu, isi App Namespace, yaitu identitas unik untuk aplikasi kamu. Kemudian kamu harus melewati captcha dan klik Submit.

Sekarang aplikasi kamu sudah jadi!

Pengaturan Dasar Aplikasi:

Setelah aplikasi berhasil dibuat, kamu perlu melakukan pengaturan dasar di aplikasi. Pergi ke halaman aplikasi di facebook.com/developers.
Klik Edit Settings di bagian kanan atas.
Di bawah bagian Select how your app integrates with Facebook, klik App on Facebook.
Akan muncul form dengan 3 kolom, tapi cuma 2 yang bisa diisi. Isi dua kolom itu, lalu klik Save Changes di bagian bawah halaman. Dua kolom itu adalah:

Canvas URL – URL aplikasi kamu.
Secure Canvas URL – URL aplikasi kamu yang aman (secure) untuk pengguna yang mengakses Facebook lewat https.

Per 1 Oktober 2011, semua URL harus pakai HTTPS, jadi server kamu harus punya SSL Certificate. Tanpa sertifikat ini, aplikasi kamu nggak akan jalan. Kalau kamu nggak mampu beli sertifikat ini, kamu bisa coba layanan di socialserver.com.

Mengoptimalkan Aplikasi Facebook

Ada banyak cara untuk mengoptimalkan aplikasi kamu di Facebook. Beberapa di antaranya adalah:

Optimalkan Aplikasi Kamu

Featured Photos Feed – Ini adalah feed dari 5 foto yang akan berganti posisi setiap kali ada pengunjung yang masuk ke halamanmu. Beberapa perusahaan branding menggunakan feed ini untuk memasarkan brand mereka. Foto closeup produk dan perusahaan bisa menarik perhatian pengunjung.

Links Panel – Panel ini ada di bagian kiri halaman dan hanya menampilkan 8 link di halaman utama. Kamu bisa punya lebih dari 8 link, tapi sisanya akan tersembunyi. Untuk melihat link tambahan, pengguna harus klik tombol MORE, yang jarang dilakukan pengunjung. Jadi, pastikan 8 link yang tampil adalah link terbaik untuk memberi kesan maksimal ke pengunjung.

Feedback – Sebagai admin halaman, kamu bisa melihat tren interaksi di halaman kamu, misalnya berdasarkan jenis konten, waktu posting, atau seberapa sering postingan muncul.

Featured Likes – Ada 5 Featured Likes (halaman yang kamu like) yang ditampilkan di bawah Links Panel. Kamu bisa mengatur 5 halaman ini di pengaturan supaya tidak berganti. Pastikan halamanhalaman ini mewakili citra terbaik dari brand kamu.

Different Layouts – Kamu bisa mengganti tampilan wall (timeline) di halaman utama untuk pengunjung. Pilihannya Most Recent (post terbaru) atau Posts made by the page (post yang hanya dibuat oleh halamanmu). Kalau pakai Most Recent, semua interaksi di halaman akan terlihat. Banyak bisnis memilih opsi Posts made by the page.

Vanity URL – Kalau kamu punya domain sendiri, kamu bisa mengarahkannya langsung ke profil Facebook kamu. Hal yang sama juga bisa dilakukan untuk Twitter, LinkedIn, dan platform lainnya.

Memperluas Aplikasi Facebook Kamu ke Mobile

Aplikasi Facebook sekarang makin ramah untuk mobile. Facebook mempermudah developer menghubungkan pengguna ke versi mobile atau web dari aplikasi mereka saat diakses lewat perangkat mobile. Untuk mendukung ini, Facebook meluncurkan dukungan buat situs Facebook Mobile serta perangkat iPad, iPod touch, dan iPhone. Mereka juga dukung platform lain seperti Android, BlackBerry, Windows Phone, dan Palm.

Cara Mengembangkan ke Mobile

Facebook ngasih cara yang lebih mulus buat developer yang sudah punya versi mobile web atau versi iOS dari aplikasinya supaya pengalaman pengguna bisa langsung nyambung di Facebook versi mobile.

Contoh: kalau aku kirim permintaan main Texas Hold ‘Em dari Facebook di desktop ke temanku, dia bisa jawab permintaan itu lewat Facebook for iPhone. Aplikasi Texas Hold ‘Em akan otomatis terbuka di HPnya. Fitur ini bisa jalan pakai Facebook Single SignOn yang menghubungkan keduanya.

Facebook juga menyediakan tools untuk developer mobile web app supaya aplikasi mereka bisa manfaatin integrasi dengan Facebook API dan bahkan bisa menerima Facebook Credits.

Saat ini, Facebook melihat platform mobile terutama sebagai cara buat meningkatkan penemuan (discovery) aplikasi dan menambah keterlibatan (engagement) pengguna di perangkat mobile. Bagian engagement ini yang mereka anggap paling krusial. Walaupun platform mobile mereka belum sepenuhnya kuat, Facebook tetap memperhatikan pasar mobile yang mereka lihat punya potensi besar untuk investasi dan ekspansi ke depannya. Peningkatan lanjutan untuk situs mobile mereka sudah dalam rencana.

Beberapa aplikasi yang ditampilkan di mobile apps showcase antara lain:

Magic Land
Words With Friends
Social Poker
Word Racer
World War
iMobsters
Texas HoldEm Poker
Vampires
FarmVille Express
Flixster
HuffPost
AudioVroom
Gilt Luck
BranchOut
Demo: Hackbook

Penutup

Mengembangkan lalu mengintegrasikan aplikasi kamu ke Facebook sebenarnya bisa dilakukan dengan mudah dengan bantuan panduan ini. Kalau kamu luangkan waktu buat mengikuti langkahlangkahnya dengan benar, peluang aplikasi kamu sukses bakal lebih besar. Sekarang, dengan integrasi ke mobile, peluang untung juga makin besar! Jadi tunggu apa lagi? Langsung mulai aja! Semoga sukses!