Cara Membuat Aplikasi Game Sendiri Di Facebook (arsip)

Cara Membuat Aplikasi Game Sendiri Di Facebook (arsip)

12:34 AM

Pada kesempatan ini kita akan coba membuat / menyimpan game flash kesayangan kita di Facebook sehingga berupa aplikasi facebook milik kita sendiri seperti game Foker di facebook yang bisa dimainkan oleh orang lain juga selain kita pemilik apliksi game tersebut.

Ok langsung saja kita ikuti aturan mainnya tanpa banyak berfikir lagi :


1. Siapkan file game flash kesayangan Anda atau bila belum punya bisa anda dapatkan dari situs game online dengan cara yang pernah saya bahas di postigan yang berjudul Cara Menyimpan Game Flash Dari Game Online Ke Komputer Tanpa Download.

2. - Kemudian buatlah sebuah folder baru dimana saja, dan kemudian di dlm folder baru tersebut buatlah sebuah folder dan beri nama images, selanjutnya masukan game flash Anda ke folder images tersebut.
- downloadlah sebuah file js dari situs ini dan kemudian masukan ke folder baru tadi bergandengan dengan folder images)
- bukalah notepad dan kopikan kode html berikut ke notepad :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Bilyard</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Alfa Net Cell">
<meta name="description" content="Mainkan games Bilyard secara online di sini">
<meta name="keywords" content="games, flash, facebook">
<meta name="generator" content="Web Page Maker">

<style type="text/css">
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: 'Arial';font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
 margin-top: 0px;
 margin-bottom: 0px;
}
</style>

<script src="ac_activex.js" type="text/javascript"></script>

</head>

<body>

<div id="flash1" style="position:absolute; overflow:hidden; left:0px; top:0px; width:550px; height:400px; z-index:0">
<script type="text/javascript">
AC_RunFlashContent("id","flash1","width","550","height","400","quality","high","autoplay","true","loop","true","wmode","window","codebase","http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab","pluginspage","http://www.macromedia.com/go/getflashplayer","src","images/Ambulance Rush.swf");
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" width=550 height=400>
<param name="movie" value="images/Bilyard.swf">
<param name="quality" value="high">
<param name="loop" value="true">
<param name="wmode" value="window">
<param name="autoplay" value="true">
<!--[if !IE]>-->
<object data="images/Bilyard.swf" width="550" height="400" type="application/x-shockwave-flash">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
<param name="quality" value="high">
<param name="loop" value="true">
<param name="wmode" value="window">
<param name="autoplay" value="true">
</object>
<!--<![endif]-->
</object>
</noscript>
</div>

</body>
</html>


keterangan : tulisan yang berwarna merah gantilah dengan nama game flash Anda yang berada di dalam folder images, ac_activex.js merupakan file .js yang didownload tadi.

Catatan : Bila file ac_activex.js tidak bisa di download karena link download gagal atau hal lainnya maka penggantinya adalah ganti kode <script src="ac_activex.js" type="text/javascript"></script> di atas dengan kode berikut :

<script>function AC_AX_RunContent(){  var ret = AC_GetArgs(arguments);  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);}
function AC_RunFlashContent(){  var ret =     AC_GetArgs    (  arguments, "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"     , "application/x-shockwave-flash"    );  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);}
function AC_RunMMContent(){  var ret =     AC_GetArgs    (  arguments, "filename", "clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"     , "application/x-mplayer2"    );  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);}
function AC_RunRealContent(){  var ret =     AC_GetArgs    (  arguments, "src", "clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"     , "audio/x-pn-realaudio-plugin"    );  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);}
function AC_RunQTContent(){  var ret =     AC_GetArgs    (  arguments, "src", "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"     , "video/quicktime"    );  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);}
function AC_Generateobj(objAttrs, params, embedAttrs) {   var str = '<object ';  for (var i in objAttrs)    str += i + '="' + objAttrs[i] + '" ';  str += '>';  for (var i in params)    str += '<param name="' + i + '" value="' + params[i] + '" /> ';  str += '<embed ';  for (var i in embedAttrs)    str += i + '="' + embedAttrs[i] + '" ';  str += ' ></embed></object>';
  document.write(str);}
function AC_GetArgs(args, srcParamName, classid, mimeType){  var ret = new Object();  ret.embedAttrs = new Object();  ret.params = new Object();  ret.objAttrs = new Object();  for (var i=0; i < args.length; i=i+2){    var currArg = args[i].toLowerCase();        switch (currArg){ /// embed args      case "pluginspage":      case "type":        ret.embedAttrs[args[i]] = args[i+1];        break;/// object args      case "data":      case "codebase":      case "classid":      case "id":        ret.objAttrs[args[i]] = args[i+1];        break;/// common args      case "width":      case "height":      case "align":      case "vspace":       case "hspace":      case "class":      case "title":      case "accesskey":      case "name":      case "tabindex":        ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];        break;// special args      case "src":        ret.embedAttrs["src"] = args[i+1];        ret.params[srcParamName] = args[i+1];        break;// params      default:        ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];    }  }
  if (classid) ret.objAttrs["classid"] = classid;  if (mimeType) ret.embedAttrs["type"] = mimeType;
  return ret;}
</script>

Setelah kode HTML pertama di atas tadi dikopikan ke notepad pilih menu File kemudian Save As beri nama index.html pada Save As Type pilih All Files...Simpanlah index.html tersebut ke dalam folder baru (New Folder) tadi bergandengan dengan file js (ac_activex.js) dan folder images.

Lihat isi dari New Folder di atas tadi setelah semua file lengkap ;



Dan di dalam folder images akan berisi file Bilyard.swf :



3. Kemudian tes dahulu isi folder baru itu dengan cara mengklik 2x file index.html dan apakah game flashnya bekerja ata tidak..?

4. Mendaftar dahulu ke webhosting yang berbayar atau yang gratisan supaya kita bisa menyimpan game flash kesayangan kita yang nantinya bisa di panggil di facebook secara online. Untuk webhosting gratisan ikutilah caranya pada postingan saya yang berjudul CARA MEMBUAT WEBSITE DI HOSTING GRATISAN 

 5. Bila game Anda telah bekerja pada browser terus simpanlah / uploadlah semua isi folder itu (folder images, file js, dan index.html) ke server hosting Anda (lihatlah cara mengupload file ke server hosting gratisan di postingan saya yang berudul Upload File Menggunakan FileZilla Client)

6. Kemudian cobalah Anda panggil alamat url game Anda di browser misalnya http://www.DomainAnda.com/index.html, index html bisa juga tidak diketik menjadi http://www.DomainAnda.com/ saja. Apakah sudah bisa dikses game online Anda tersebut..??

7. Membuat Aplikasi di Facebook

Masuk ke alamat Developer Facebook --> https://developers.facebook.com/apps



Sisipkan kode Facebook Javascript SDK berikut ini ke file index.html yang telah dibuat di atas dan kopykan setelah tag <body> :

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '592904350820280',
      xfbml      : true,
      version    : 'v2.1'
    });

    // ADD ADDITIONAL FACEBOOK CODE HERE
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
Sisipkan kembali kode untuk LOGIN FACEBOOK berikut setelah kode Javascript SDK di atas tadi :

<h1 id="fb-welcome"></h1>

<script>
// Place following code after FB.init call.

function onLogin(response) {
  if (response.status == 'connected') {
    FB.api('/me?fields=first_name', function(data) {
      var welcomeBlock = document.getElementById('fb-welcome');
      welcomeBlock.innerHTML = 'Hello, ' + data.first_name + '!';
    });
  }
}

FB.getLoginStatus(function(response) {
  // Check login status on load, and if the user is
  // already logged in, go directly to the welcome message.
  if (response.status == 'connected') {
    onLogin(response);
  } else {
    // Otherwise, show Login dialog first.
    FB.login(function(response) {
      onLogin(response);
    }, {scope: 'user_friends, email'});
  }
});
</script>
Sehingga file index.html Anda akan berubah menjadi sebagai berikut :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Bilyard</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Alfa Net Cell">
<meta name="description" content="Mainkan games Bilyard secara online di sini">
<meta name="keywords" content="games, flash, facebook">
<meta name="generator" content="Web Page Maker">
<style type="text/css">
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: 'Arial';font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
 margin-top: 0px;
 margin-bottom: 0px;
}
</style>
<script src="ac_activex.js" type="text/javascript"></script>
</head>
<body>

//<----kode dari facebook------>//
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '592904350820280',
      xfbml      : true,
      version    : 'v2.1'
    });

    // ADD ADDITIONAL FACEBOOK CODE HERE
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<h1 id="fb-welcome"></h1>

<script>
// Place following code after FB.init call.

function onLogin(response) {
  if (response.status == 'connected') {
    FB.api('/me?fields=first_name', function(data) {
      var welcomeBlock = document.getElementById('fb-welcome');
      welcomeBlock.innerHTML = 'Hello, ' + data.first_name + '!';
    });
  }
}

FB.getLoginStatus(function(response) {
  // Check login status on load, and if the user is
  // already logged in, go directly to the welcome message.
  if (response.status == 'connected') {
    onLogin(response);
  } else {
    // Otherwise, show Login dialog first.
    FB.login(function(response) {
      onLogin(response);
    }, {scope: 'user_friends, email'});
  }
});
</script>
//<----kode dari facebook------>//
<div id="flash1" style="position:absolute; overflow:hidden; left:0px; top:0px; width:550px; height:400px; z-index:0"><script type="text/javascript">AC_RunFlashContent("id","flash1","width","550","height","400","quality","high","autoplay","true","loop","true","wmode","window","codebase","http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab","pluginspage","http://www.macromedia.com/go/getflashplayer","src","images/Ambulance Rush.swf");</script><noscript><object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" width=550 height=400><param name="movie" value="images/Bilyard.swf"><param name="quality" value="high"><param name="loop" value="true"><param name="wmode" value="window"><param name="autoplay" value="true"><!--[if !IE]>--><object data="images/Bilyard.swf" width="550" height="400" type="application/x-shockwave-flash"><param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer"><param name="quality" value="high"><param name="loop" value="true"><param name="wmode" value="window"><param name="autoplay" value="true"></object><!--<![endif]--></object></noscript></div></body></html>

8. Coba panggil halaman url Aplikasi Game Facebook anda yang baru anda ciptakan ini (lihatlah contoh punya saya pada Canvas Pages : http://apps.facebook.com/permainanbilyard/ pada gambar di atas) ...!!

9. Selamat kini Anda telah memiliki Aplikasi Game Facebook sendiri dan beritahukan pada teman-teman Anda alamat Game Facebook Anda tersebut....!!















































Next

« Prev Post










Previous

Next Post »











































        

      









Subscribe to:
Post Comments (Atom)