Facebook Sovellusten Tekeminen

Facebook sovellus on ko. median sisällä oleva web sovellus, joka periaatteessa voi tehdä mitä tahansa. Facebook asettaa joitain rajoituksia esimerkiksi JavaScriptin käytölle. Facebook sovellus koostuu pääasiassa FBML- sekä PHP-kielistä.

Miksi kerron tästä? Mielestäni pk-yritykset voisivat hyötyä näistä pikku vempaimista aika tavalla. Sain eilen valmiiksi yhden esimerkin ja toinen on työn alla.

Tämä ensimmäinen sovellus on tehty erään salibandyjoukkueen kutsuturnauksen kotisivuksi. Se on hyvin yksinkertainen, mutta sitäkin toimivampi. Ohjelma ei ainakaan toistaiseksi käytä esimerkiksi tietokantoja mihinkään. Päädyin siihen ratkaisuun kun huomasin kuinka pieni sovelluksesta lopulta tuli.

Käykäähän katsomassa http://apps.facebook.com/ntktytot/ niin tiedätte minkälaisesta värkistä on kyse. Tästä eteenpäin selitän miten tuo sovellus on rakennettu, joten jos tekninen ymmärry on rajallinen niin et välttämättä saa asiasta mitään irti. Tuon Facebook sovelluksen rakentamiseen meni yksi päivä eli periaatteessa kahdeksan tuntia enkä edes koko ajan sitä rakennellut. Varsin kätevä ja helppo vaihtoehto esimerkiksi kotisivuiksi. Tässä maailmassa ei tosin enään tehdä hakukoneoptimoinnilla mitään.

Jokainen Facebook sovellus tarvitsee toimiakseen kirjaston joka on ladattavissa Facebook Developer Wiki-sivustolta. Tässä tapauksessa kirjaston kieli on PHP. Paketti sisältää varsinaisen kirjaston hakemistossa “php” ja esimerkkitiedostot hakemistossa “footprints”.

Footprints eli esimerkkihakemistossa sijaitseva config.php sisältää paljon tarvittavia asetuksia. Voit esimerkiksi asettaa MySql-tietokanta asetukset tuohon tiedostoon. Samoin Facebook sovelluksesi API-avain ja Secret-avain on helposti liitettävissä tähän tiedostoon. Avaimet löydät Facebook Developers-ryhmästä kun luot uuden ohjelman. Kopio ne oikeisiin paikkoihin tai ohjelma ei toimi. Config.php tiedosto kannattaa myös “piilottaa” julkiselta yleisöltä eli ahudata public_html hakemiston alapuolelle (tai mikä se nyt ikinä tapauksessasi on, www, htdocs jne.).

Seuraavana esittelyssä oman sovellukseni index.php. Tiedosto toimii portaalina ja on itseasiassa se ainoa tiedosto jonka Facebookin käyttäjä lataa.

<?php
  
  // Facebook kirjaston liitäntä
  include_once('./facebook/facebook.php');
  
  // Asetusten liitäntä
  
include_once('./lib/config.php');
  
  // Tarkistetaan, että kävijä on Facebook käyttäjä ja noukitaan käyttäjänumero (UID) muuttujaan $user
  $facebook = new Facebook($api_key, $secret);
  $facebook->require_frame();
  $user = $facebook->require_login();
  
  // Switch-lause, joka kontrolloi mikä sivu näytetään.
  $view = empty($_GET['view']) ? 'index' : $_GET['view'];
  
  // Perus raamit ohjelmalle
  $layout = 'application';
  
  switch ($node) {
    
    case "index":
    // Määrittää minkä sivuinen nimi on aina kyseessä.
    $template = "index";
   
  
    case "ohjelma":
    $template = "ohjelma";
    break;
  
    case "saannot":
    $template = "saannot";
    break;
  
    case "joukkueet":
    $template = "joukkueet";
    break;
  
    case "keskustelu":
    $template = "keskustelu";
    break;
  
    case "kutsu":
    $template = "kutsu";
    break;
    
  }
  
  // Liitetään valittu raami. Tässä tapauksessa application, koska muita ei edes ole.
  include('.view/layout/'.$layout.'.php');
?>

Tuo application.php sijaitsee view/layout hakemistossa. Sen sisältö on seuraavanlainen.

<php
  
<META http-equiv="Content-Type" content ="text/html; charset=ISO-8859-1">
  
<fb:dashboard>
  
<fb:action href="http://apps.facebook.com/ntktytot/">Etusivu</fb:action>
<fb:action href="http://apps.facebook.com/ntktytot/?view=ohjelma">Otteluohjelma</fb:action>
<fb:action href="http://apps.facebook.com/ntktytot/?view=saannot">Turnauss&auml;&auml;nn&ouml;t</fb:action>
<fb:action href="http://apps.facebook.com/ntktytot/?view=joukkueet">Joukkueet</fb:action>
<fb:action href="http://apps.facebook.com/ntktytot/?view=keskustelu">Keskustelu</fb:action>
<fb:action href="http://apps.facebook.com/ntktytot/?view=kutsu">Kutsu Kavereita!</fb:action>
</fb:dashboard>
  
<?php
  
// Liitetään haluttu sivu.
include("./view/template/".$template.".php");
  
?>

fb:dasboard-komento luo sivun ylälaidassa näkyvän linkkiluettelon joka toimii loistavana navigointivaihtoehtona sivulle. Jokainen fb:action määrittää $_GET['view'] muutujan ja include käsky sivun lopussa noukkii matkaan $template muuttujasta määritellyn sivun pohjan. Sivupojat sijaitsevat hakemistossa view/template.

Ylälaidassa näkyvä meta-komento on tärkeä, koska sen avulla skandinaaviset merkit saadaan näkyviin. Toki silloinkin vain html-ystävällisillä koodeilla esim. ä tarkoittaa ä-kirjainta ja ö ö-kirjainta.

Sovelluksen Hakemistorakenne

Template-tiedosto on .php päätteinen ja sisältää sivun rungon. Sisöltä on joko Facebookin hyväksymää HTML-kieltä tai FBML/FBJS sekoitusta. Siksi en tästä esimerkkiä esitä, koska tyhjää on vaikea näyttää. Sen sijaan tähän loppuun lisään kuvan hakemistorakenteesta, jonka tyyppistä suosittelen tämän kaltaiselle “kotisivu”-sovellukselle.

Esitetty kaava rakenne toimii hyvin juuri pienissä sivustoissa. Kovin suurta päivitettävyyttä niissä ei ole ja jos jotain sen tapaista haluaa niin tietokantojen intekrointi tulee heti kysymykseen. Se ei ole hankalaa, mutta vaatii tietysti hieman enemmän suunnittelua.

Heitä kommenttia mitä esimerkeistä pidit. Perus juttujahan nuo ovat, mutta enpä ole suomenkielellä ennen tälläistä blogiini kirjoitellut. Palautetta on ihan mukava saada.

Samankaltaiset merkinnät:

1. Videomarkkinointia vai Ei
2. Yrittäjä! Verkostoidu!
3. Facebook Markkinointi Auttaa
4. Esittelyssä BlogiSpotti.Fi
5. Esittelyssä Blogilista.fi

Tags: facebook sovelluksen tekeminen, ohjelmointi, php, Sosiaalinen Media