Horoskop Gue masih dalam tahap pengembangan. Tetapi fungsi utamanya, -yaitu menampilkan ramalan bintang dalam bahasa Indonesia-, sudah dapat digunakan oleh user Facebook. Selamat mencoba!

Horoskop Gue

Aplikasi ini masih dalam tahap pengembangan dengan fitur yang sangat sederhana. Berikut adalah desain aplikasi dan screenshot aplikasi:

Desain Mock-Up Now Playing

Hasil Akhir Desain Now Playing

Untuk menggunakan aplikasi di Facebook Anda, silahkan ke http://apps.facebook.com/nowplayingcineplex.

<script type="text/javascript">
function photoToWall(title, description, photosrc, photolink){
   var message = '';
   var actionLinks = [{
       'text': 'Foto Gue',
       'href': '<?php echo URL_CANVAS; ?>'}];
   var attachment = {
       'name': title, 'href': photolink,
       'caption': ' ',
       'description': description,
       'properties':{
           'Fotografer': { 'text': '<?php echo $photographer; ?>',
                              'href':'<?php echo $photographer_url; ?>' },
           'Galeri': { 'text': 'Lihat Galeri Foto Gue',
                        'href': 'http://apps.facebook.com/fotogue/gallery/' }
        },
       'media':[{
           'type': 'image',
           'src': photosrc,
           'href': photolink
           }]
   };
   Facebook.streamPublish(message, attachment, actionLinks);
}
</script>

Contoh dialog yang dihasilkan dari script di atas:

Tutorial penggunaannya akan ditulis dilain waktu.

Persiapan

Untuk membuat aplikasi di Facebook, berikut adalah hal yang dibutuhkan di server Anda:

1. Web Server yang mendukung PHP dan libcurl. Disini saya menggunakan Apache yang berjalan di SunOS.
2. Download Facebook API untuk PHP: PHP-SDK.
3. Buat folder baru di web server anda untuk aplikasi ini. Misalnya: /www/fb-app/tutorialfb. Letakkan file facebook.php yang kita download di langkah 2 ke dalam folder ini.

-

Membuat Aplikasi Baru

Setelah menginstall aplikasi ‘Developer’ dari Facebook, Anda bisa memulai dengan menambahkan Aplikasi Baru di Facebook.

Aplikasi Baru

Nama Aplikasi

Pilih nama aplikasi dan klik tombol Create Application.

Kemudian ikuti screenshot selanjutnya.

Basic: Isi Keterangan Aplikasi

Canvas: Isi URL Canvas dan Callback dan Pilih 'FBML'

Migration: Aktifkan 'New SDK' dan klik 'Save Changes'

Keterangan Aplikasi

Catat Application Secret, Application ID, Canvas Callback URL, dan Canvas URL, dan simpan dalam notepad. Data ini akan kita gunakan di dalam file PHP yang akan kita buat nanti.

-

PHP

Untuk menggunakan aplikasi anda di Facebook, pengguna harus login dan menyetujui bahwa sebagian data sosial di Profil Facebooknya akan digunakan di dalam aplikasi ini. Contoh data: Nama Pengguna, Foto Profil, dll.

Gunakan data yang telah kita simpan di notepad sebelumnya.

• FB_APP_ID =Application Secret
• FB_API_ID = Application ID
• URL_CANVAS = Canvas URL
• URL_CALLBACK = Canvas Callback URL

Berikut adalah source code PHP yang akan kita tulis:

Filename: config.php.:

<?php
    define('FB_APP_ID', '140159879330264');
    define('FB_API_SECRET', '1be8b7a776a5a9d2efc8ac423135ac22');
    define('URL_CANVAS', 'http://apps.facebook.com/tutorialfbindo/');
    define('URL_CALLBACK', 'http://domain-saya.com/fb-app/tutorialfb/');
?>

Filename: applogin.php:

<?php
require_once "facebook.php";
require_once "config.php";

$facebook = new Facebook(array(
    'appId'  => FB_APP_ID,
    'secret' => FB_API_SECRET,
    'cookie' => true
));

$session = $facebook->getSession();

$params = array(
        'canvas'     => 1,
        'fbconnect'  => 0,
        'next'       => URL_CANVAS,
        'cancel_url' => 'http://www.facebook.com/',
        'req_perms'  => ''
    );
$login_url = $facebook->getLoginUrl($params);

if (!$session) {
    echo '<fb:redirect url="' . $login_url . '" />';
    exit;
} else {
    try {
        $uid = $facebook->getUser();
        $me  = $facebook->api('/me');
    } catch (FacebookApiException $e) {
        echo 'Error!';
        exit;
    }
}
?>

Filename: index.php:

<?php
require_once dirname(__FILE__) . "applogin.php";
?>

<h1>FB Tutorial</h1>
<fb:profile-pic uid="<?php echo $uid; ?>" width="32" height="32" linked="true" />
Halo <?php echo $me['name']; ?>!

Informasi lengkap mengenai tag FBML dapat Anda lihat di: http://developers.facebook.com/docs/reference/fbml/.

Semoga tutorial singkat ini dapat membantu Anda dalam membuat aplikasi di Facebook. Silahkan tinggalkan pertanyaan Anda di kolom komentar.