Facebook Canvas dengan Google App Engine

Kita butuh Facebook Canvas tersedia dengan cepat!

Menimbang kebutuhan aplikasi yang sedang didevelop, terkadang kita butuh menyediakan canvas url. Kalau tidak punya halaman canvas, maka sebagian Facebook API yang membutuhkan canvas tidak akan jalan. Contohnya apprequests.

Submitting halaman canvas tuh gampang-gampang susah buat yang belum pernah atau jarang bikin facebook apps. Karena tampilan dashboardnya Facebook developer ini sering diperbaharui.

Saat tulisan ini dibuat, tempat submit canvas url bisa ditemukan disini:

  1. Buka developers.facebook.com
  2. Tab “apps” > pilih aplikasimu, atau bikin kalau belum
  3. Tab “settings”
  4. Scroll kebawah, lalu klik “+ add platform”
  5. Pilih “Facebook Canvas”
  6. Nah. disinilah dirimu kudu memasukkan Canvas URL dan Secure Canvas URL

Screen-Shot-1435-12-13-at-17.58.05

Kita bisa langsung memasukkan Canvas URL dan Secure Canvas URL, atau pencet tombol Quick Start untuk panduan lanjutan.

Canvas URL adalah alamat halaman yang akan ditampilkan jika user mengklik icon aplikasimu di Facebook. Misalnya icon aplikasimu yang muncul di notifikasi atau di wall. Secure Canvas URL adalah halaman yang sama tapi pakai SSL. Jadi depan URLnya kudu HTTPS.

Now here comes a new problem.

Kalau nggak punya hostingan yang pakai SSL gimana?

Ya beli SSL. Tinggal bilang aja ke teknisi hostingnya.

ng… ._.

Ada juga alternatifnya. Kalau anda punya blog yang ada alamat httpsnya, wordpress.com misalnya, anda bisa memasukkan http://namablog.wordpress.com di Canvas URL, kemudian https://namablog.wordpress.com di Secure Canvas URL, dan namablog.wordpress.com di App Domains.

Tapi yaa.. nggak keren dong, kalau udah bikin aplikasi yang kece abis trus pas iconnya diklik nggak taunya mbuka blog wordpress. Kita butuh landing page yang keren banget. Minimal single page yang background-size:cover, dan ditengahnya ada icon “unduh di Google Play” atau “unduh di Appstore” gitu deh.

Ada cara sementara yang bisa dilakukan dengan cepat dan gratis untuk menyiapkan Facebook canvas. Yaitu menggunakan Google App Engine. Gampang-gampang-njelimet. Kuposting disini biar nggak lupa. Semoga bermanfaat.

Bahan-bahan:

1. Google App Engine Launcher. Kalau belum punya Google App Engine Launcher, download dan install dulu. Downloadnya disini https://cloud.google.com/appengine/downloads . Monggo pilih Google App Engine SDK for PHP. Trus install. Postingan ini akan menjelaskan cara upload menggunakan Google App Engine Launcher.

2. Landing page keren siap upload (php/html, css, images) yang akan ditampilkan sebagai Facebook Canvas. Seperti yang kubilang tadi. Minimal single page yang background-sizenya cover, dan ditengahnya ada icon “unduh di Google Play” atau “unduh di Appstore” gitu deh.

3. Akun google apps / gmail Oke. Kita mulai bikin canvasnya ya.

Cara Membuat:

1. Buka Google Developer Console ( https://console.developers.google.com/project ) login kalau belum masuk.

2. Pada halaman Project, klik tombol “Create Project”. Screen-Shot-1435-12-13-at-18.35.39

3. Tunggu sejenak hingga selesai dibuat.

4. Buka aplikasi Google App Engine Launcher yang sudah terinstall di komputer

5. Tekan tombol plus ( + ) atau Create New Application, lalu isi Application IDnya dengan Project ID. Janganlupa runtimenya pilih PHP. Admin Port dan Port biarin aja. Unless you know what you’re doing.

Screen-Shot-1435-12-13-at-18.42.58

6. Setelah create, folder dengan nama yang sama dengan application ID akan dibuat di application directory yang dipilih. Carilah folder itu di komputer anda, dan letakkan semua asset landing page disitu. Khusus file html, pindahkan scriptnya ke file main.php. Atau cukup rename file htmlnya jadi “main.php”, setelah sebelumnya main.php yang lama dihapus.

7. Buka lagi Google App Engine Launchernya, select aplikasinya dan klik edit (icon pensil). ini akan mengedit file app.yaml

Screen-Shot-1435-12-13-at-18.49.29

9. Ketik nama-nama file dan folder yang terdapat di root folder tadi. Yang di root aja ya. Jadi file-file gambar yang ada di subfolder “images” —misalnya— nggak perlu ditulis. Tulisnya seperti contoh diatas saja. Jangan lupa escape special chars dengan backslash.

10. save (ctrl + s)

11. Klik tombol “Deploy” di Google App Engine Launcher Setelah deploy kelar, halaman web semestinya sudah bisa dilihat di projectID.appspot.com . Jadi misalnya project IDnya tadi elevated-summer-726, urlnya menjadi http://elevated-summer-726.appspot.com dan secure urlnya https://elevated-summer-726.appspot.com .

Tinggal dimasukkan ke halaman setting di Facebook App dashboard sebagaimana yang sudah dijelaskan di awal artikel. Kemudian diset public di menu “Status & Review”.

= Selesai =

Catatan:

Kapan itu kami pernah upload file mp3 dengan cara yang sama diatas tapi direject sama App Enginenya. Mungkin memang harusnya file mp3 ditaruh di Google Cloud Storage (semacam Amazon EC2) yang berbayar itu. Bukan disini. Bisa juga karena ukuran filenya kegedean. Entahlah. cmiiw. Akhirnya mp3nya kami taruh di archive.org. trus dihotlink. :v

Kembali ngomongin App Engine, yang namanya free, tentu ada usage limitnya sebelum akhirnya berbayar. Untuk memantau penggunaan, monggo meluncur ke http://appengine.google.com . Kalau pada project kami, begini penampakannya.

Screen-Shot-1435-12-14-at-07.14.25

Lumayan — menurutku — untuk bikin minisite-minisite macam Facebook Canvas gini. Pernah coba bikin minisite di github tapi ternyata github cuma support halaman statis. Akhirnya di facebook munculnya error 505 (bad gateway).

Tapi kalau butuhnya memang halaman statis saja, dan tidak untuk facebook canvas, boleh tuh upload di github. Seingatku sih di github nggak ada limit. cmiiw. Cara uploadnya sudah dijelaskan di dashboard tiap repository. Jadi coba bikin aja satu repo. Trus lihat dashboard reponya.

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s