Free Ebook Tutorial from Rosihan Ari's Blog

Tutorial Javascript | Tutorial PHP | Tutorial AJAX | Tutorial CSS | Tutorial FPDF | Tutorial Wordpress | Tutorial Java SE


Ebook yang direkomendasikan untuk Anda
Ebook Panduan Praktis OOP di PHP


Membuat Buku Tamu dengan Akun Facebook (Bag 1)


April 26th, 2010 | by rosihanari | Cetak Artikel Cetak Artikel


GampSMS SMS Gateway

Dengan menggunakan fasilitas web service yang disediakan oleh Facebook atau istilahnya Facebook Connect, kita bisa membuat buku tamu atau guestbook yang memanfaatkan akun Facebook. Adapun contoh hasilnya bisa dilihat di http://fb.rosihanari.net. Pada buku tamu yang menggunakan Facebook Connect tersebut, pengunjung yang akan mengisi buku tamu dipersilakan login terlebih dahulu menggunakan akun Facebook. Setelah pengunjung mengisi komentar di buku tamu, pada tampilan list buku tamu akan tampak nama pemilik akun Facebook yang telah mengisi buku tamu tersebut, beserta foto dan link menuju ke profile Facebooknya.

Nah… pada artikel ini saya akan mencoba memaparkan cara membuat buku tamu yang terintegrasi dengan akun Facebook tersebut. Mengingat panjangnya artikelnya, saya terpaksa membagi artikel ini menjadi 2 bagian. Bagian pertama mengulas dasar-dasar cara membuat script aplikasi yang mengintegrasikan akun Facebook melalui Facebook Connect, dan bagian kedua pembahasannya mengenai pembuatan buku tamunya sendiri.

Seperti yang telah saya sampaikan sebelumnya bahwa untuk membuat aplikasi yang terhubung dengan akun Facebook, kita harus menggunakan Facebook Connect. Untuk bisa menggunakan Facebook Connect ini, langkah pertama kita harus melakukan registrasi dahulu di http://developers.facebook.com/setup. Sebelum Anda melakukan registrasi, Anda harus sudah punya akun Facebook terlebih dahulu.

Apabila Anda masuk ke situs Facebook Developer Setup di atas, kemungkinan Anda akan diminta memverifikasi akun Anda. Permintaan verifikasi ini akan muncul bila Anda belum pernah melakukan verifikasi. Verifikasi ini hukumnya wajib bagi para developer yang akan membuat aplikasi Facebook.

Adapun bunyi permintaan verifikasi adalah: “Your account must be verified before you can take this action. Please verify your account by adding your mobile phone or credit card.”. Terdapat 2 cara untuk memverifikasi yaitu via HP atau via kartu kredit. Kalau saya menyarankan menggunakan HP saja. Silakan klik ‘mobile phone’ dari pilihan yang muncul, kemudian masukkan nomor HP Anda pada form yang disediakan. Misalkan nomor HP anda adalah 0857999999 maka isikan pada form sbb

Photobucket

Setelah Anda klik submit, maka Facebook akan mengirim SMS berisi kode verifikasi ke nomor HP Anda. Selanjutnya masukkan kode verifikasi tsb pada kotak yang muncul.

Apabila proses verifikasi berhasil, Anda akan dibawa ke halaman Setup Facebook Connect, Anda diminta memasukkan nama situs dan URL situs.

Facebook Connect

Penting !!!
Pada bagian site URL, pastikan di akhir penulisan URL situs Anda sudah ditambahkan tanda slash. Contohnya http://blog.rosihanari.net/

Oya, untuk membuat aplikasi yang terintegrasi dengan Facebook Connect ini, kita tidak bisa bereksperimen dengan menggunakan localhost atau local PC melainkan langsung ke situs hosting.

Selanjutnya, kita akan diberikan 2 buah kode yaitu Application ID (App ID) dan Application Secret (App Secret). Harap kedua kode tersebut dicatat karena kode-kode tersebut penting untuk mengakses web service Facebook Connect.

Nah… setelah melakukan registrasi dan mendapatkan kode App ID dan App Secret, kita bisa membuat script buku tamunya. Sebelum kita mulai membuat script buku tamunya, kita membutuhkan sebuah script PHP untuk membaca cookie dari Facebook Connect.

cookie.php

<?php

define('FACEBOOK_APP_ID', 'Isikan App ID di sini');
define('FACEBOOK_SECRET', 'Isikan App Secret di sini');

function get_facebook_cookie($app_id, $application_secret) {
  $args = array();
  parse_str(trim($_COOKIE['fbs_' . $app_id], '\\"'), $args);
  ksort($args);
  $payload = '';
  foreach ($args as $key => $value) {
    if ($key != 'sig') {
      $payload .= $key . '=' . $value;
    }
  }
  if (md5($payload . $application_secret) != $args['sig']) {
    return null;
  }
  return $args;
}

$cookie = get_facebook_cookie(FACEBOOK_APP_ID, FACEBOOK_SECRET);

?>

Nah selanjutnya template script yang nantinya akan diintegrasikan dengan Facebook Connect adalah sbb:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://www.facebook.com/2008/fbml">
  <body>
    <?php include "cookie.php"; ?>

    <?php if ($cookie) { ?>

    <!-- script setelah user melakukan login FB -->
    <!-- diletakkan di sini -->

    <?php } else { ?>
      <!-- jika user belum login maka munculkan tombol login -->
      <fb:login-button></fb:login-button>
    <?php } ?>

    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
      FB.init({appId: '<?= FACEBOOK_APP_ID ?>', status: true,
               cookie: true, xfbml: true});
      FB.Event.subscribe('auth.login', function(response) {
        window.location.reload();
      });
    </script>
  </body>
</html>

Perhatikan bagian dari template di atas yang saya beri tanda

<!-- script setelah user melakukan login FB -->
<!-- diletakkan di sini -->

di situlah nantinya kita letakkan script ketika user sudah berhasil melakukan login via Facebook. Sedangkan jika user belum melakukan login, maka akan tampil tombol login yang dihasilkan oleh perintah

<fb:login-button></fb:login-button>

Selanjutnya bagaimana cara mendapatkan identitas dari user yang telah melakukan login via Facebook? caranya adalah kita harus mendapatkan ID Facebook dari si user dahulu. Bila ID si user ini sudah kita peroleh, kita bisa dengan mudah mendapatkan profilenya seperti nama, foto, email, link profile Facebooknya dll.

Untuk mendapatkan ID Facebook dari user yang login, kita gunakan perintah

$cookie['uid']

Contoh penggunaan script untuk menampilkan ID Facebook:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://www.facebook.com/2008/fbml">
  <body>
    <?php include "cookie.php"; ?>

    <?php if ($cookie) { ?>

    ID Facebook Anda adalah : <?php echo $cookie['uid']; ?>

    <?php } else { ?>
      <!-- jika user belum login maka munculkan tombol login -->
      <fb:login-button></fb:login-button>
    <?php } ?>

    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
      FB.init({appId: '<?= FACEBOOK_APP_ID ?>', status: true,
               cookie: true, xfbml: true});
      FB.Event.subscribe('auth.login', function(response) {
        window.location.reload();
      });
    </script>
  </body>
</html>

Berikut ini tampilan script di atas bila dijalankan dan setelah user melakukan login via akun Facebook.

Facebook Connect

Setelah kita bisa mendapatkan ID Facebook dari user yang login, selanjutnya kita bisa mendapatkan data profile si user dengan menggunakan URL


http://graph.facebook.com/ID

Contohnya, silakan Anda akses http://graph.facebook.com/1406851730 maka Anda bisa melihat data profile saya seperti nama lengkap, nama depan, nama tengah, nama belakang, dan link profile saya di FB sebagaimana tampil di bawah ini

Facebook Connect

Representasi data profile di atas menggunakan JSON. Oya, bisa jadi setiap item data profile user yang muncul berbeda-beda, misalnya hanya nama saja yang muncul, atau mungkin namanya tersembunyi, dsb. Hal ini disebabkan user tersebut membuat beberapa data bersifat private.

Sedangkan untuk mendapatkan foto profile dari user dengan ID Facebook tertentu, gunakan URL


http://graph.facebook.com/ID/picture

Contohnya:


http://graph.facebook.com/1406851730/picture

OK, sekarang yang menjadi kendala bagaimana cara melakukan fetching atau mengambil setiap item data dari JSON di atas? misalnya mengambil data namanya saja, emailnya, atau link profilenya. Caranya adalah dengan menggunakan function json_decode() yang ada di PHP. Berikut ini contoh script untuk menampilkan nama dan link profile user setelah login via akun Facebook.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://www.facebook.com/2008/fbml">
  <body>
    <?php include "cookie.php"; ?>

    <?php if ($cookie) { ?>

    <?php
    // proses parsing data JSON profile user dengan ID Facebook
    $user = json_decode(file_get_contents("http://graph.facebook.com/".$cookie['uid']), true);

    // menampilkan nama depan, nama lengkap, email, link profile dan foto user
    echo "<p>Selamat datang ".$user['first_name'].". Nama lengkap Anda adalah: ".$user['name']."</p>";
    echo "<p>Email Anda di: ".$user['email']."</p>";
    echo "<p>URL profile Facebook Anda adalah: ".$user['link']."</p>";
    echo "<p>Photo Anda: <img src='http://graph.facebook.com/".$cookie['uid']."/picture'></p>";
    ?>

    <?php } else { ?>
      <!-- jika user belum login maka munculkan tombol login -->
      <fb:login-button></fb:login-button>
    <?php } ?>

    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
      FB.init({appId: '<?= FACEBOOK_APP_ID ?>', status: true,
               cookie: true, xfbml: true});
      FB.Event.subscribe('auth.login', function(response) {
        window.location.reload();
      });
    </script>
  </body>
</html>

Hasil script di atas jika dijalankan adalah sbb:

Pertama akan muncul tombol login (jika Anda/user belum login ke Facebook sebelumnya)

Facebook Connect

Selanjutnya muncul form login dalam window sebagaimana yang tampak di bawah ini

Facebook Connect

Bila login berhasil, maka muncul tampilan berikut ini

Facebook Connect

Perhatikan bahwa untuk data email tidak muncul, hal ini dikarenakan saya membuat private email saya di Facebook. Jika Anda ingin mencoba script di atas, silakan akses http://fb.rosihanari.net/test.php

OK… demikian ide dasar membuat script aplikasi yang diintegrasikan dengan akun Facebook. Tunggu ya kelanjutan artikel ini untuk membuat buku tamu dengan akun Facebooknya.




Share ke Facebook Share ke Twitter
Baca Juga Artikel Terkait
Ide Membuat Buku Tamu dengan Automatic Filtering
Membuat Buku Tamu dengan Emoticons
Membuat Kotak Fans Club Facebook di Blog WordPress
Buku Platinum Matematika untuk SMA
Panduan Mendaftar Akun PayPal

Kata kunci: facebook buku tamu - facebook connect - facebook web service - php buku tamu - php facebook - php guestbook - script buku tamu -


Ada 52 komentar dalam artikel ini.



  1. Arief says:

    saya coba jg ga tampil, kenpa ya?
    saya coba googling dengan script yang sama, tp ga tampil-tampil juga kenapa ya?

  2. Adhy says:

    mas ini kok gak muncul? padahal saya buatnya di localhost sebagai uji cobanya? padahal q udah login dan logout, dari halaman facebook aslinya

  3. Olga Taqwawi says:

    Pak, data pesan buku tamu nanti disimpan di database atau di server facebook? Thanks

  4. robertbond says:

    mas sepertinya facebook sudah berbeda saya coba malah muncul create new app, harap direvisi

    terima kasih

    • rosihanari says:

      @robertbond: betul ada perubahan di facebooknya, sekarang lebih rumit :-( dan saya belum sempat mempelajarinya.

  5. Bulu perindu says:

    Ijin bookmark dulu cara membuat buku tamu dengan fb sob.. :)



 

Komentar/pertanyaan Anda!

Mohon maaf, komentar/pertanyaan yang menggunakan email palsu atau komentar bernada negatif, cemooh, umpatan, cacian atau sejenisnya secara otomatis akan terhapus karena dianggap spam dan tidak akan tampil

Dimohon jangan pula memasukkan code program dalam bentuk apapun ke dalam komentar karena akan dianggap spam.

Mohon maaf jika seandainya ada beberapa pertanyaan Anda yang tidak direspon atau ditanggapi mengingat banyaknya komentar yang masuk dan keterbatasan kemampuan/ilmu saya dalam menjawab pertanyaan satu persatu. Saya harap Anda bisa memahami dan memakluminya.

Semua komentar atau pertanyaan yg masuk tidak akan langsung tampil di halaman ini, karena akan dimoderasi dahulu.


*