Sebagaimana seperti yang kita ketahui facebook bukan hanya sebatas sosial network untuk berinteraksi dengan teman kita di dunia maya. Dengan jelinya facebook menggaet para developer untuk menginstallkan aplikasinya di facebook, karena banyaknya user penghuni facebook bisnis menginstall aplikasi di facebook tentu banyak. Beberapa dekade terakhir ini muncul beberapa aplikasi kreatif yang sukses...

Dasar Membuat App Facebook

Sebagaimana seperti yang kita ketahui facebook bukan hanya sebatas sosial network untuk berinteraksi dengan teman kita di dunia maya. Dengan jelinya facebook menggaet para developer untuk menginstallkan aplikasinya di facebook, karena banyaknya user penghuni facebook bisnis menginstall aplikasi di facebook tentu banyak. Beberapa dekade terakhir ini muncul beberapa aplikasi kreatif yang sukses seperti 'farm ville, zynga pocker, dll'. Ya salah satu kelebihan membuat app facebook adalah adanya komunitas yang besar, saat menggunakan aplikasi kita berinteraksi dengan teman yg lain.

Okeh cukup intronya, kali ini saya akan coba berbagi dasarnya cara membuat aplikasi di facebook, saya bagi dasarnya soalnya saya juga baru belajar hehehe (kemana aja?), gk ada kata terlambat untuk belajar. Jadi ceritanya aplikasi ini berupa tampilan "Hello World", menampilkan data/profil pengguna aplikasi kita, beserta list teman-temannya.

Tutorial kali ini ada bberapa yang harus disiapkan,yaitu:

  1. Server Online (hosting) , untuk menyimplan aplikasi kita.
  2. facebook api (php sdk), saya menggunakan versi php sdk facebook karena aplikasi kita menggunakan php.
  3. Daftar di facebook developer.
 
Daftar Facebook Developer

 cara registernya di link berikut : http://developers.facebook.com/docs/guides/canvas/ , 'Select how your app integrates with Facebook' , pilih App on Facebook. contoh isian sebagai berikut :

Canvas Url : http://titanfirman.com/HelloAppFacebook/ #isikan url dari hostingna kita.

Secure Canvas Url : https://titanfirman.com/HelloAppsFacebook/ #isikan url hostingan kita menggunakan protokol 'https'

Canvas Page : http://apps.facebook.com/hellotitan # akan digenerate otomatis oleh facebook, sesuai dengan nama isian aplikasi kita di awal.
 
 
Persiapan di Server

instalkan aplikasi baru, dalam tutorial ini saya menggunakan contoh aplikasi di install di folder 'HelloAppFacebook', dengan alamat url (http://titanfirman.com/HelloAppFacebook/). buat sub folder dengan naman 'fb',simpan sdk facebook di folder ini. kemudian di folder root 'HelloAppFacebook' buat index.php.
 
edit file index.php isikan kode berikut :
 
<?php

require 'fb/facebook.php';

$fbconfig['appUrl'] = "url app kamu"; 

// Create An instance of our Facebook Application.
$facebook = new Facebook(array(
  'appId'  => 'isikan appid kamu',
  'secret' => 'secret kode kamu',
  'cookies' => 'true',
));
//$session = $facebook->getSession();
        /**
         * Access token is your pass to the Facebook API
         */
  //      $access_token = $session['access_token'];

        /**
         * Your Message is updated, you need to post this along with the access token
         */
        $data = array(
            'access_token' => $access_token,
            'message' => 'Hi, Pesan Pertama dari appfb'
		);
// Get the app User ID
$user = $facebook->getUser();

if ($user) {
	  try {
		// If the user has been authenticated then proceed
		$user_profile = $facebook->api('/me');
		 $return = json_decode(make_post('https://graph.facebook.com/' . $user . '/feed', $data));

            if (isset($return->id))
                echo "Status Updated successfully";
            
            if (isset($return->error))
                echo $return->error->message;
				
	  } catch (FacebookApiException $e) {
		error_log($e);
		$user = null;
	  }
}

// If the user is authenticated then generate the variable for the logout URL
if ($user):
  $logoutUrl = $facebook->getLogoutUrl();
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Embed App to Facebook Canvas</title>

</head>

<body>
<!--Resize Iframe-->
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>

 FB.Canvas.setAutoResize(7);

 </script>
<h1>Hello,  <?php echo $user_profile['name'] ?> in First App Facebook</h1>
<?php
	//print_r($user_profile);
	echo "Your User ID : $user <br/> Your Friends : ";
	$friends = $facebook->api('/me/friends');
		echo '<ul>';
        echo "Total Your Friend : ".COUNT($friends["data"])
       
        foreach ($friends["data"] as $value) {
            echo '<li>';
            echo '<div class="pic">';
            echo '<img src="https://graph.facebook.com/' . $value["id"] . '/picture"/>';
            echo '</div>';
            echo '<div class="picName">'.$value["name"].'</div>'; 
            echo '</li>';
        }
        echo '</ul>';
                
?>
</body>
</html>

<?php  
else:
  $loginUrl = $facebook->getLoginUrl(array('redirect_uri' => $fbconfig['appUrl']));
  print "<script type='text/javascript'>top.location.href = '$loginUrl';</script>";
endif;

?>

Facebook menggunakan konsep 'canvas' untuk mengintegasikan aplikasi kita dengan facebook, aplikasi kita nanti akan diembed di canvas, ukurannya bisa di rubah-rubah sesuai dengan kebutuhan kita. Penjelasan skrip diatas membuat object baru dari class facebook.php, kemudian mengecek user telah login apa belum. jika telah login print "hello World, nama pengguna aplikasi", 'Count' jumlah temannya, kemudian list dan print fotonya menggunakan (graph.facebook). okeh sekian tutorial sederhana ini semoga bermanfaat. next lanjut lagi ngulik api ini, tetep stay di jagocoding. :D


About Author

titan

Hi, saya senang dengan dunia Komputer, more information visit http://blackinkstudio.co


Comment & Discussions

  • ZULFIANTO
    Coba ah :D

  • Ricky Rachmanto
    Baru masuk disini langsung merasa deket belajar coding. O iyah, maaf nih oot. Kan WordPress dibuat dengan PHP. Nah untuk belajar membuat theme wordpress sendiri dari nol. Kemampuan apakah yang perlu saya pelajari pertama kali ?

    HTML, CSS, JavaScript, atau PHP ?

    Terima kasih :)

  • Adhi Setyawan
    mau tanya. bagaimana cara membuat login/sig in untuk pengunjung website menggunakan facebook. SEPERTI DIBAGIAN ATAS WEBSITE INI.

  • Please LOGIN before if you want to give the comment.