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

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
27/03/2010 από
root
Με μια εφαρμογή για το 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 σας.

 

fb1Τώρα πηγαινετε στο 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.

fb2

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

fb3


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

 

  1. <?php
  2.  
  3. require_once ‘includes/facebook.php’;
  4.  
  5. $appapikey = ‘e8bbec3eb51db9bfe1af35c1cb8beedc’;
  6. $appsecret = ‘154effdba5e5da67e3a67d35eca01c20’;
  7. $facebook = new Facebook($appapikey, $appsecret);
  8. $user_id = $facebook->require_login();
  9. $callbackurl = ‘http://www.wdf.gr/fbapp/’;
  10.  
  11. ?>

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

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

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

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

 

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

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

 

  1. //initialize an array of quotes
  2. $quotes= array(“test test :)”, “http://www.wdf.gr”, “1 2 3 4 5 6”);
  3.  
  4. //Select a Random one.
  5. $i= rand(0, sizeof($quotes)-1);
  6.  
  7. //print the CSS
  8. print (‘
  9. <style type=”text/css”>
  10. h1{ margin: 10px; font-size: 24pt; }
  11. h2{ margin: 15px; font-size: 20pt; }
  12. </style>
  13. ‘);
  14.  
  15. print “<h1>web design forum</h1>”;
  16. print “<h2>”. $quotes[$i] .”</h2>”;

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

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

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

fb4

Βήμα 3:
Τέλος, ορισμένα πράγματα για το facebook.Ο παρακάτω κώδικας είναι απαραίτητος για να δούμε το κείμενο μας στο προφίλ του χρήστη.
Έχω προσθέσει τον κώδικα ακριβώς μετά το  $i= rand(0, sizeof($quotes)-1);
  1. //prepare string for profile box
  2. $text= (‘
  3. <style type=”text/css”>
  4. h1{ margin: 10px; font-size: 24pt; }
  5. h2{ margin: 15px; font-size: 20pt; }
  6. </style>
  7. ‘);
  8. $text.=(‘<h2>’. $quotes[$i] .'</h2>’);
  9. //set profile text
  10. $facebook->api_client->profile_setFBML($text, $user_id);


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

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

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

profile

Αυτό είναι!

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








Hide ↑

extend your possibilities!! xtnd.it

Follow Web Design Forum on Twitter ,

Οδηγός επιβίωσης WordPress για αρχάριους

25 October 2012

                    Ξεκινήσετε το wordpress blog σας μέσα σε λίγα λεπτά!

Read more...

Διαγωνισμός: 5 πακέτα Web Hosting από την StigmaHost

16 October 2012

Με ενθουσιασμό σας ανακοινώνουμε ότι η StigmaHost σας προσφέρει την ευκαιρία[…]

Read more...

Ελληνική Σειρά Εκμάθησης JavaScript (Video Tutorials)

21 September 2012

Η Σειρά περιλαμβάνει τα εξής Μαθήματα:

JavaScript – 1 : Λίγα[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

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

 






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



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.