Membuat applikasi facebook

Subyek: Membuat applikasi facebook Mon Jul 18, 2011 1:55 pm

Beberapa waktu yang lalu facebook memperbarui PHP-SDK menjadi versi 3.0, dan juga menambahkan cara baru untuk authentication.
Facebook juga akan segera mengupdate javascript SDK. Tetapi sekarang kita masih menggunakan authentication sepenuhnya dengan PHP.
Oke langsung menuju Tekape.
Yang dibutuhkan : !!!PENTING!!!
[You must be registered and logged in to see this image.] Web hosting yang support PHP 5. cURL support Enable Https protocol Enable

Pertama register applikasi facebook dulu
Masuk ke halaman [You must be registered and logged in to see this link.]
[You must be registered and logged in to see this image.]
Lalu klik create application

Lalu pada menu About isi basic information
[You must be registered and logged in to see this image.]

Lalu klik menu Facebook Integration
[You must be registered and logged in to see this image.] Isi pada Canvas Page : Canvas Page sebelumnya adalah Canvas Page URL. Ini adalah URL untuk mengakses applikasi kita
Contoh : [You must be registered and logged in to see this link.]
[You must be registered and logged in to see this image.] Isi pada Canvas URL : Canvas URL Sebelumnya adalah Canvas Callback URL. Ini adalah URL file script applikasi yang kita buat pada web hosting
Contoh : [You must be registered and logged in to see this link.]
Penulisan Canvas URL harus diakhiri tanda /
[You must be registered and logged in to see this image.] Pada bagian IFrame Size Pilih Auto-resize
Setelah selesai klik save
Lalu akan muncul halaman ini
[You must be registered and logged in to see this image.]
Disini ada beberapa item yg perlu dicatat untuk keperluan applikasi kita :
[You must be registered and logged in to see this image.] Application ID
[You must be registered and logged in to see this image.] Application Secret

Oke, kita mulai membuat script applikasinya
Download dan extract facebook platform PHP-SDK [You must be registered and logged in to see this image.] [You must be registered and logged in to see this link.]
Atau langsung dari [You must be registered and logged in to see this link.]
Upload dan kumpulkan menjadi satu folder
Buat file index.php yang isinya :

Code:: [b]Code:[/b]

<?php
//Konfigurasi untuk aplikasi facebook
define('APP_ID', '123456789');
define('APP_SECRET', 'xxxxxyyyyyyyzzzzz');
define('MAIN_URL', 'http://websitekamu.com/index.php/');
define('APP_URL', 'http://apps.facebook.com/nama_app/');

if (isset($_GET['code'])){
header("Location: " . APP_URL);
exit;
}

$user = null;
try{
include_once "facebook.php";
}
catch(Exception $o){
echo '<pre>';
print_r($o);
echo '</pre>';
}
// Create our Application instance
$facebook = new Facebook(array(
'appId' => APP_ID,
'secret' => APP_SECRET,
'cookie' => true,
));

// Mendapatkan user ID
$user = $facebook->getUser();

$loginUrl = $facebook->getLoginUrl(
array(
'scope' => 'publish_stream,read_stream,user_birthday,user_location,user_work_history,user_about_me,user_hometown'
)
);

if ($user) {
try {
// Mengetahui user Login atau tidak
$user_profile = $facebook->api('/me');
} catch (FacebookApiException $e) {
error_log($e);
$user = null;
}
}

if (!$user) {
echo "<script type='text/javascript'>top.location.href = '$loginUrl';</script>";
exit;
}

//Mendapatkan deskripsi user
$userInfo = $facebook->api("/$user");

function d($d){
echo '<pre>';
print_r($d);
echo '</pre>';
}

if ($user){
//Contoh fql query mengunakan legacy method dan pengoperasian parameter
//Selengkapnya lihat http://developers.facebook.com/docs/reference/fql/
try{
$fql = "select name, hometown_location, sex, pic_square from user where uid=" . $user;

$param = array(
'method' => 'fql.query',
'query' => $fql,
'callback' => ''
);
$fqlResult = $facebook->api($param);
}
catch(Exception $o){
d($o);
}
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Demo PHP SDK 3.0</title>
<script type="text/javascript">
/* Tab Menu */
var tabLinks = new Array();
var contentDivs = new Array();

function navtabs() {

var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}
var i = 0;
for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = 'selected';
i++;
}

var i = 0;
for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
i++;
}
}

function showTab() {
var selectedId = getHash( this.getAttribute('href') );

for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}

return false;
}

function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}

function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}

window.onload=function(){
navtabs();
}
</script>
<style type="text/css">
body {
background: #fff;
font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
font-size: 11px;
margin: 2px;
padding: 0px;
text-align: left;
}
a{
text-decoration: none;
color: blue;
}
a:hover{
text-decoration: underline;
color: olive;
}
h1, h2, h3, h4, h5 {
font-size: 13px;
color: #333;
margin: 0px;
padding: 0px;
}
h1 { font-size: 14px; }
h4, h5 { font-size: 11px; }

#tabs{
font-size: 100%;
}

.fb-tabs {
border-bottom: 1px solid #898989;
padding: 16px 0px; /* top and bottom, left and right */
}
.fb-tabs .left_tabs {
float: left;
padding-left: 10px;
}
.fb-tabs .right_tabs {
float: right;
padding-right: 10px;
}

.fb-tabitems {
display: inline;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}

.fb-tabitems li {
display: inline;
padding: 2px 0px 3px;
background: #f1f1f1 url(http://www.facebook.com/images/components/toggle_tab_gloss.gif) top left repeat-x;
}

.fb-tabitems li a {
border: 1px solid #898989;
color: #333;
font-weight: bold;
padding: 2px 8px 3px 9px;
}

.fb-tabitems li a small {
font-size: 11px;
font-weight: normal;
}

.fb-tabitems li a:focus {
outline: 0px;
}

.fb-tabitems li.first a {
border:1px solid #898989;
}

.fb-tabitems li a.selected {
background: #6d84b4;
border: 1px solid #3b5998;
border-left: 1px solid #5973a9;
border-right: 1px solid #5973a9;
color: #fff;
margin-left: -1px;
}

.fb-tabitems li.last a.selected {
margin-left:-1px;
border-left:1px solid #5973a9;
border-right:1px solid #36538f;
}

.fb-tabitems li.first.last a.selected {
border: 1px solid #36538f;
}

.fb-tabitems li a.selected:hover {
text-decoration: none;
}
.inputbutton {
border-style: solid;
border-top-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-top-color: #D9DFEA;
border-left-color: #D9DFEA;
border-bottom-color: #0e1f5b;
border-right-color: #0e1f5b;
background-color: #3b5998;
color: #ffffff;
font-size: 11px;
font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
padding: 2px 15px 3px 15px;
text-align: center;
}
.fberrorbox {
background-color: #ffebe8;
border: 1px solid #dd3c10;
color: #333333;
padding: 10px;
font-size: 13px;
font-weight: bold;
}
.fbbluebox
{
background-color: #eceff6;
border: 1px solid #d4dae8;
color: #333333;
padding: 10px;
font-size: 13px;
font-weight: bold;
}
#tab-1,#tab-2,#tab-3,#tab-4,#tab-5 {padding: 10px 5px}

div.tabContent.hide { display: none; }
</style>
<script type="text/javascript">

function JSupdateStatus(){
var status = document.getElementById('status').value;
FB.api('/me/feed', 'post', { message: status }, function(response) {
if (!response || response.error) {
document.getElementById('info-2').innerHTML = "<div align='center' class='fberrorbox' style='width:200px'>Update Error</div>";
} else {
document.getElementById('info-2').innerHTML = "<div align='center' class='fbbluebox' style='width:200px'>Status updated Success</div>";
}
});
}

function streamPublish(name, description, hrefTitle, hrefLink){
FB.ui({
method: 'feed',
message: '',
name: name,
caption: 'The Facebook JavaScript SDK',
description: (description),
link: '<?=APP_URL?>',
picture: 'http://i52.tinypic.com/zslhmt.png',
actions: [
{ name: hrefTitle, link: hrefLink }
]
},
function(response) {
if (response && response.post_id) {
document.getElementById('info-1').innerHTML = "<div align='center' class='fbbluebox' style='width:200px'>Post was published</div>";
} else {
document.getElementById('info-1').innerHTML = "<div align='center' class='fberrorbox' style='width:200px'>Post was not published</div>";
}
}
);
//Selengkapnya lihat http://developers.facebook.com/docs/reference/dialogs/feed/
}
function publishStream(){
streamPublish("Stream Publish", 'The power ranger of Facebook, bringing the user's identity. Social graph application development using php sdk 3.0. ', 'See me more', '<?=APP_URL?>');
}

function inviteFriends(){
var receiverUserIds = FB.ui({
method : 'apprequests',
message: 'Ready... Set... Go... check this app',
},
function(receiverUserIds) {
console.log("IDS : " + receiverUserIds.request_ids);
}
);
//Selengkapnya lihat http://developers.facebook.com/docs/reference/dialogs/requests/
}

</script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId : '<?=APP_ID?>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

<h1>Demo IFrame Base Facebook Application</h1>
<h3>PHP SDK 3.0</h3>

<div class="fb-tabs clearfix">
<center>
<div class="left_tabs">
<ul id="tabs" class="fb-tabitems clearfix">
<li><a href="#tab-1"><span>User Info</span></a></li>
<li><a href="#tab-2"><span>FQL Query</span></a></li>
<li><a href="#tab-3"><span>Post to Wall</span></a></li>
<li><a href="#tab-4"><span>Update Status</span></a></li>
</ul>
</div>
<div class="right_tabs">
<ul class="fb-tabitems clearfix">
<li><a href="#tab-5" onclick="inviteFriends(); return false;"><span>Invite Friends</span></a></li>
</ul>
</div>
</center>
</div>
<div class="tabContent" id="tab-1">
<strong>Welcome <?php echo $user_profile["name"]; ?></strong><br />
<img src="http://graph.facebook.com/<?=$user?>/picture" alt="user photo" />
<br />
<p>User ID : <?php echo $user_profile["id"]; ?></p>
<p>Birthday : <?php echo $user_profile["birthday"]; ?></p>
<p>Username : <?php echo $user_profile["username"]; ?></p>
<p>Sex : <?php echo $user_profile["gender"]; ?></p>
<p>Last Update : <?php echo $user_profile["updated_time"]; ?></p>
<br />
</div>
<div class="tabContent" id="tab-2">
<div style="height: 400px; overflow: auto">
<?php
echo "FQL QUERY Graph API Base: " . $fql;
d($fqlResult);
?>
</div>
</div>
<div class="tabContent" id="tab-3">
<div id="info-1"></div>
<input type="button" class="inputbutton" onclick="publishStream(); return false;" value="Click To Show Stream Publish Box" />

</div>
<div class="tabContent" id="tab-4">
<?php
$usersts = $facebook->api('/me/statuses?limit=1');
?>
<form name="statusUpdate" action="" method="">
<table>
<tr>
<td rowspan="2"><img src="http://graph.facebook.com/<?=$user?>/picture" alt="user photo" /></td>
<td valign="top" width="250"><strong>Last Status :</strong></td>
</tr>
<tr>
<td valign="top" width="250"><?php echo $usersts["data"][0]["message"] ?></td>
</tr>
</table>
<div id="info-2"></div>
<textarea name="status" id="status" rows="4" cols="40"></textarea>
<br />

<input type="button" class="inputbutton" onclick="JSupdateStatus(); return false;" value="Update Status" />
</form>
</div>

</div>
</body>

Demo App : [You must be registered and logged in to see this link.]
Keterangan :
[You must be registered and logged in to see this image.] File index.php inilah yang dituliskan pada Canvas URL Sesuaikan bagian yang biru dengan URL facebook platform yang sudah diupload

include_once "facebook.php";

[You must be registered and logged in to see this image.] Ganti App ID dan API secret sesuai dengan APP ID dan API secret apps kita masing2.

Semoga bisa dimengerti.
Selamat mencoba dan berkreasi. Happy Coding.

Catatan:
Tidak
semua webhosting bisa digunakan untuk aplikasi facebook, perhatikan
kebutuhan sesuai diatas. Bila perlu tanyakan kepada provider webhosting
anda.

» Membuat Status Kosong di Facebook
» facebook
» SMS Gratis via Facebook (FB)
» Info Tutor Membuat Dll Alt-Tab
» ch*at AutoLike Facebook

Membuat applikasi facebook

Membuat applikasi facebook

Similar topics

Similar topics