Δημιουργείστε το πρώτο σας Facebook App

Με μια εφαρμογή για το Facebook μπορούμε κυριολεκτικά να απευθυνθούμε σε εκατομμύρια χρήστες. Το να γραφτεί μια εφαρμογή που χρησιμοποιεί το API δεν είναι πάρα πολύ δύσκολο (για τα βασικά, τουλάχιστον).
Σε αυτό το tutorial θα γράψουμε ένα Facebook app που δημιουργεί ένα τυχαίο κείμενο και εμφανίζεται στο προφίλ του χρήστη. Θα χρησιμοποιήσουμε php 5 για το tutorial.
Επίσης θα χρειαστεί να κατεβάσετε την php 5 client library

Όλος ο  κωδικας που εμφανίζεται εδώ πρέπει να είναι και στο αρχείο index.php

Δείτε το demo app μας εδώ

Κατεβάστε όλα τα αρχεία απο εδώ

Βήμα 1:

Το πρώτο βήμα είναι για να πάρετε ένα Facebook API κλειδί, το οποίο σας επιτρέπει να ανακτήσετε πληροφορίες από το Facebook.

Πηγαίνετε στο Facebook Application Developer και κάντε κλικ στο «Set Up a New Application». Διαλέξτε ένα όνομα, συμφωνώ με τους Όρους χρήσης, και έχετε το API σας.

Τώρα πηγαινετε στο tab canvas και δώστε το Canvas Page URL.

Το όνομα προστίθεται στο URL και θα μοιάζει κάπως έτσι:

    http://apps.new.facebook.com/[YOUR  APP NAME]

Συμπληρώστε επισης το Canvas Callback URL

Το Canvas Callback URL είναι η διεύθυνση URL του αρχείου ή καταλόγου στο διακομιστή όπου σκοπεύετε να φιλοξενήσει τα αρχεία της αίτησής σας. Δεν μπορεί να υπερβαίνει τους 100 χαρακτήρες και πρέπει να έχει την μορφή url ,που να τέλιώνει με «/», όπως http://www.wdf.gr/fbapp/  ή μια δυναμική σελίδα που περιέχει ένα «?», όπως http://www.wdf.gr/fbapp/?blah

Υπαρχουν και άλλες επιλογές, αλλα αυτές οι δυο είναι αρκετες για αυτο το tutorial.

Κάντε κλικ στο κουμπί «Αποθήκευση» και είστε έτοιμοι για την κατασκευή του πρώτου σας Facebook app.

To Facebook σας προσφέρει τον κώδικα για να ξεκινησετε. Έγω εκόψα τα επιπλέον πράγματα και σας δίνω μόνο ό,τι χρειάζεστε για αυτό το tutorial

<?php
      require_once 'includes/facebook.php';
      $appapikey = 'e8bbec3eb51db9bfe1af35c1cb8beedc';
      $appsecret = '154effdba5e5da67e3a67d35eca01c20';
      $facebook = new Facebook($appapikey, $appsecret);
      $user_id = $facebook->require_login();
      $callbackurl = '<a href="fbapp/" target="_blank">http://www.wdf.gr/fbapp/'</a>;
?>

Αυτός είναι ένας αρκετά απλός κώδικας.

Έχουμε δημιουργήσει ένα αντικείμενο Facebook χρησιμοποιώντας το API κλειδί μας το οποίο μας δόθηκε όταν δημιουργήσαμε το app μας.

Το πρώτο πράγμα που κάνουμε μετά από αυτό είναι να ξεφορτωθούμε  το αναγνωριστικό του συνδεδεμένου χρήστη. Αυτό είναι σημαντικό, αν προσθέσουμε στοιχεία που θα παίρνουν το όνομα του χρήστη, τους φίλους του , κλπ.

Έχω προσθέσει επίσης το $callbackurl για να είναι ευκολότερη η σύνδεση με εικόνες ή άλλα αρχεία, επιδη το facebook δεν το επιτρέπει.

Βήμα 2:

Αν δεν κάνουμε Facebook calls, τότε γράφουμε ακριβώς όπως και στην php.

Παρακάτω είναι κώδικάς μας.

   //initialize an array of quotes
   $quotes= array("test test : )", "http://www.wdf.gr", "1 2 3 4 5 6");

   //Select a Random one.
   $i= rand(0, sizeof($quotes)-1);

   //print the CSS
   print ('h1{ margin: 10px; font-size: 24pt; } h2{ margin: 15px; font-size: 20pt; } ');
   print "<h1>web design forum</h1>";
   print "<h2>". $quotes[$i] ."</h2>";

Αυτό είναι το μόνο που χρειάζεται να κάνετε για να δείτε το κείμενο σας στην σελίδα.

Ένα πράγμα που πρέπει να προσέξουμε είναι ο τρόπος που δημιουργούμε το CSS μας.  Δεν μπορούμε να καλέσουμε ένα αρχείο style.css. Πρέπει να περιλαμβάνετε το CSS μέσα στην HTML. Αν δεν το κάνετε τότε το css σας απλά δεν θα εμφανίζεται. Θα πρέπει επίσης να γνωρίζετε ότι όταν δημιουργείτε divs, μπορείτε να χρησιμοποιείτε μόνο class, και όχι id.

Ο κωδικός που θα δημιουργήσουμε θα παράγει κάτι σαν αυτό:

Βήμα 3:

Τέλος, ορισμένα πράγματα για το facebook.Ο παρακάτω κώδικας είναι απαραίτητος για να δούμε το κείμενο μας στο προφίλ του χρήστη.

Έχω προσθέσει τον κώδικα ακριβώς μετά το  $i= rand(0, sizeof($quotes)-1);

   //prepare string for profile box
   $text= ('
      <style type="text/css">
      h1{ margin: 10px; font-size: 24pt; }
      h2{ margin: 15px; font-size: 20pt; }
      </style>
   ');

   $text.=('<h2>'. $quotes[$i] .'</h2>');

   //set profile text
   $facebook->api_client->profile_setFBML($text, $user_id);

Έχω κάνει δύο πράγματα εδώ:

reprint το CSS και πρόσθεσα τα πάντα σε ένα string που ονομάζεται $text . Αυτό γιατί η λειτουργία που καθορίζει το κειμένο στο profile box , "profile_setFBML" παίρνει δύο arguments: το κείμενο που πάει στο profile box, και την ταυτότητα του χρήστη.
Κάθε CSS που ορίζεται για τη σελίδα (καμβά) δεν μεταφέρεται στο προφίλ, γι ‘αυτό πρέπει να την προσθέσουμε.

Το τελικό αποτέλεσμα είναι το εξής:

Αυτό είναι!

Προφανώς δεν έχουμε δεί όλες τις δυνατότητες του Facebook για ανάπτυξη εφαρμογών, ωστόσο, με το Wiki και τους πόρους του Facebook αφου έχετε πάρει ένα κλειδί API ,είναι ενας καλός δρόμος για να δημιουργήσετε το επόμενο μεγάλο app!

Σχόλια

Αφήστε ένα σχόλιο

Όνομα Απαραίτητο

Email (Δεν θα δημοσιευτεί) Απαραίτητο

Ιστοσελίδα

Υποβολή σχολίου

 

RSS για τα σχόλια σε αυτό το άρθρο. TrackBack URL