aziz blogs: Membuat Buku Tamu dengan Akun Facebook

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. 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

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.

Penting !!!
Pada bagian site URL, pastikan di akhir penulisan URL situs Anda sudah ditambahkan tanda slash. 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

1.

2.

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

1.<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

1.$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.

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

1.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

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

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

Contohnya:

1.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)

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

Bila login berhasil, maka muncul tampilan berikut ini

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
OK… demikian ide dasar membuat script aplikasi yang diintegrasikan dengan akun Facebook. Tunggu ya kelanjutan artikel ini untuk membuat buku tamu dengan akun Facebooknya.
================================================================================================
Wah… akhirnya sempat juga menulis kelanjutan dari membuat buku tamu dengan akun Facebook ini. Maaf ya.. agak lama jedanya dengan yang bagian pertama. OK, sekarang saatnya saya bahas bagaimana cara membuat buku tamunya, setelah bagian yang pertama kita bahas konsep dasar membuat aplikasi yang memanfaatkan Facebook Connect.

Untuk membuat buku tamu dengan akun FB ini, kita membutuhkan database untuk menyimpan komentar-komentar yang masuk ke buku tamu. Berikut ini struktur tabel yang kita butuhkan
CREATE TABLE `guestbook` (

`id` int(11) auto_increment,

`idFB` varchar(20),

`tgl` date,

`komentar` text,

PRIMARY KEY (`id`)

)

Keterangan:
Field 'id' nanti berisi bilangan unik yang bersifat autoincrement, 'idFB' digunakan untuk menyimpan no ID Facebook dari mereka yang mengisi komentar, 'tgl' nantinya digunakan untuk menyimpan tanggal pengisian komentar, dan 'komentar' untuk isi komentarnya.
Mungkin Anda bertanya, kenapa identitas nama atau email dari pengisi komentar tidak disediakan fieldnya? lho kan dari ID Facebook nya kan nanti bisa kita dapatkan dengan menggunakan http://graph.facebook.com/ID seperti yang pernah dibahassebelumnya?. Sehingga di sini kita cukup menyimpan ID Facebook dari komentator.
Nah… setelah kita set tabel untuk menyimpan data komentar, kita bisa buat script buku tamunya. Oya, pastikan Anda telah memahami konsep dasar membuat aplikasi yang menggunakan Facebook Connect. Jika belum, pastikan Anda telah membacaartikel sebelumnya ya. Jika Anda nekat, resiko bingung silakan ditanggung sendiri
Konsep pembuatan scriptnya adalah sbb:
Pertama, kita perhatikan dahulu script template dari aplikasi yang menggunakan Facebook Connect 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) { ?>


<?php } else { ?>

<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>
dengan script cookie.php nya sbb:
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);

?>

Perhatikan bagian




pada script template di atas. Di situlah nantinya kita letakkan script untuk memasukkan komentar buku tamu melalui form. Karena form isian buku tamu itu muncul setelah pengunjung melakukan login dengan menggunakan akun FB mereka. Sehingga scriptnya menjadi seperti ini
bukutamu.php

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:fb="http://www.facebook.com/2008/fbml">

  <body>

    <h1>Buku Tamu Dengan Facebook</h1>

    <?php include "cookie.php"; ?>

    <?php

    // koneksi ke mysql

    mysql_connect(dbHost, dbUser, dbPass);

    mysql_select_db(dbName);

    // proses simpan data komentar ke DB

    if (isset($_POST['submit']))

       // baca tanggal posting komentar

       $tgl = date("Y-m-d");

       // baca ID FB dari pengisi komentar

       $idFB = $_POST['idFB'];

       // baca isi komentar

       $komentar = $_POST['komentar'];

       // query simpan data ke tabel guestbook

       $query = "INSERT INTO guestbook (idFB, tgl, komentar) VALUES ('$idFB', '$tgl', '$komentar')";

       mysql_query($query);

?>

    <?php if ($cookie) { ?>

    <?php

    // setelah login sukses

    // proses parsing data JSON profile user dengan ID Facebook

    $user = json_decode(file_get_contents("http://graph.facebook.com/".$cookie['uid']), true);

    // menampilkan sapaan berisi nama lengkap

    echo "<p>Selamat datang ".$user['name'].", silakan isi buku tamunya di sini</p>";

?>

    <form method="post" action="<?php $_SERVER['PHP_SELF']?>">

    <textarea name="komentar" cols="30" rows="10"></textarea>

    <input type="hidden" name="idFB" value="<?php echo $cookie['uid']; ?>">

    <br>

    <input type="submit" name="submit" value="Simpan">

    </form>

    <?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>

Proses submit pengisian buku tamu pada script di atas diarahkan ke script itu sendiri, sehingga pada form buku tamu menggunakan
<form method="post" action="<?php $_SERVER['PHP_SELF']?>">

Nah… sampai sini kita sudah membuat aplikasi untuk pengisian buku tamunya setelah pengunjung login menggunakan akun FB nya. Lantas… data komentar buku tamunya ditampilkan di mana? Anda dapat membuat script untuk menampilkan komentar-komentar yang sudah masuk di dalam script di atas sekaligus. Trus… diletakkan di mana script nya? Jika Anda ingin komentar-komentar tersebut muncul setelah pengunjung login, ya berarti diletakkan di dalam
<?php if ($cookie) { ?>

sebelum bagian form untuk input komentar, karena data komentar ditampilkan di atas form komentar. Namun, jika Anda ingin agar komentar tersebut muncul baik pengunjung sudah login atau belum maka letakkan sebelum
<?php if ($cookie) { ?>

tapi setelah proses simpan datanya lho ya? atau setelah bagian proses insert data komentar ke database
if (isset($_POST['submit']))

{

...

}

soalnya kalo diletakkan sebelum bagian tersebut, maka Anda harus merefresh script buku tamu untuk melihat komentar yang terakhir masuk, karena data komentar ditampilkan dahulu sebelum proses insert data nya. Sehingga script buku tamunya menjadi
bukutamu.php

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:fb="http://www.facebook.com/2008/fbml">

  <body>

    <h1>Buku Tamu</h1>

    <?php include "cookie.php"; ?>

    <?php

    // koneksi ke mysql

    mysql_connect(dbHost, dbUser, dbPass);

    mysql_select_db(dbName);

    // proses simpan data komentar ke DB

    if (isset($_POST['submit']))

       // baca tanggal posting komentar

       $tgl = date("Y-m-d");

       // baca ID FB dari pengisi komentar

       $idFB = $_POST['idFB'];

       // baca isi komentar

       $komentar = $_POST['komentar'];

       // query simpan data ke tabel guestbook

       $query = "INSERT INTO guestbook (idFB, tgl, komentar) VALUES ('$idFB', '$tgl', '$komentar')";

       mysql_query($query);

    // proses menampilkan semua data komentar

    $query = "SELECT * FROM guestbook ORDER BY id DESC";

    $hasil = mysql_query($query);

    while ($data = mysql_fetch_array($hasil))

       // proses parsing data profile pengisi komentar berdasarkan ID FB

       $user = json_decode(file_get_contents("https://graph.facebook.com/".$data['idFB']), true);

       // menampilkan photo profile

       echo "<p><img src='https://graph.facebook.com/".$data['idFB']."/picture'><br>";

       // menampilkan nama profile dan link profile FB nya

       echo "Nama: <a href='".$user['link']."'>".$user['name']."</a><br>";

       // menampilkan email profile FB

       echo "Email: ".$user['email']."<br>";

       // menampilkan tanggal posting komentar

       echo "Tanggal posting: ".$data['tgl']."<br>";

       // menampilkan komentarnya

       echo "Komentar: ".$data['komentar']."</p><hr>";

?>

    <?php if ($cookie) { ?>

    <?php

    // setelah login sukses

    // proses parsing data JSON profile user dengan ID Facebook

    $user = json_decode(file_get_contents("http://graph.facebook.com/".$cookie['uid']), true);

    // menampilkan sapaan berisi nama lengkap

    echo "<p>Selamat datang ".$user['name'].", silakan isi buku tamunya di sini</p>";

?>

    <form method="post" action="<?php $_SERVER['PHP_SELF']?>">

    <textarea name="komentar" cols="30" rows="10"></textarea>

    <input type="hidden" name="idFB" value="<?php echo $cookie['uid']; ?>">

    <br>

    <input type="submit" name="submit" value="Simpan">

    </form>

    <?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 dari script di atas bila pengunjung belum login (belum ada komentar yang masuk)

Sedangkan di bawah ini tampilan buku tamu jika belum login namun sudah ada komentar yang masuk

Setelah login, maka akan tampil form isian komentar buku tamu. Perhatikan tampilan di bawah ini bahwa terdapat ucapan selamat datang kepada nama si pengunjung. Nama pengunjung diambil dari profile FB berdasarkan ID FB nya.

Sedangkan tampilan berikut ini setelah komentar disubmit. Dalam contoh ini, emailnya kosong karena untuk profile saya, email di profile FB saya buat private.

Mudah bukan membuatnya? Nah… untuk artikel selanjutnya (bagian ke-3) akan saya bahas bagaimana cara komentar yang diisikan ke dalam buku tamu tersebut otomatis masuk ke Wall FB (update status FB) nya si pengisi komentar. Tunggu ya…

aziz blogs

Senin, 21 Januari 2013

Membuat Buku Tamu dengan Akun Facebook

Tidak ada komentar:

Posting Komentar

Daftar Blog Saya

Daftar Blog Saya