Le forum de doingbuzz

Le monde aussi petit soit-il est un vivier de talents, de cerveaux ou si vous voulez de matières grises. De belles idées, de beaux enseignements, de pertinents conseils sommeillent en nous. Ce forum est après et avant tout un rendez-vous du donner et du recevoir. Lâchez-vous !

Le forum de doingbuzz

Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le forum de doingbuzz

Forum de doingbuzz.com

Mots-clés

Octobre 2020

LunMarMerJeuVenSamDim
   1234
567891011
12131415161718
19202122232425
262728293031 

Calendrier Calendrier

Sondage

Coup d'etat au Mali Pour ou contre ?

 
 
 

Voir les résultats

Flux RSS


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 

Membres les plus tagués


    Créer une nouvelle application Facebook

    Admin
    Admin
    Admin
    Admin

    Doingbuzz Monnaie virtuelle : 100060281
    Votre Réputation : 0
    Date d'inscription : 04/02/2012
    Localisation : france

    Créer une nouvelle application Facebook Empty Créer une nouvelle application Facebook

    Message par Admin le Jeu 3 Mai - 12:15

    Comment fonctionne une application Facebook ?



    Commençons par un peu de théorie, et comprendre comment fonctionne une application Facebook.


    Tout d'abord, le type d'application Facebook, il y'en a deux:


    • Application Facebook Canvas
    • Application Facebook iFrame



    Application Facebook Canvas





    Créer une nouvelle application Facebook Schema-facebook-canvas-fbml


    Le premier type "Canvas" permet l'utilisation du langage Facebook, le FBML (et n'a rien avoir avec la balise HTML5 Canvas).


    L'application est située sur vos serveurs, mais au lieu d'être
    directement intégrée dans une iframe, Facebook va lire le résultat
    HTML/FBML de vos pages et interpréter le code FBML présent pour le
    remplacer (fb:name sera remplacé par le nom de l'utilisateur par
    exemple).


    La liste des tags FBML est assez longue, je vous laisse consulter la documentation officielle .



    • Avantages: Des widgets plus évolués grâce au FBML, identification simplifiée.
    • Inconvénients:
      L'interprétation du FBML prend plus de temps qu'une application iFrame,
      impossible d'utiliser des librairies Javascript comme jQuery.



    Application Facebook iFrame





    Créer une nouvelle application Facebook Schema-facebook-iframe-fbml


    Dans une application en iFrame, votre site est intégré directement dans une iFrame dans le canevas de votre application.

    Il n'interprète pas le FBML, mais il est possible d'utiliser du XFBML avec du Javascript .

    Au lieu d'utiliser du FBML, il suffit d'utiliser l'API de Facebook
    pour récupérer les noms de vos visiteurs, leurs infos ... s'ils ont
    autorisé votre application à le faire !



    • Avantages: Meilleures performances, utilisation possible des frameworks JS.
    • Inconvénients:
      iFrame assez pénible (scrollbar parfois assez pénible si mal
      redimensionnée...), XFBML limité en nombre de widgets par rapport au
      FBML.



    Pour notre application, nous choisirons le mode iFrame qui permet un
    meilleur contrôle de l'application, de meilleures performances (si bien
    optimisée) .


    Globalement ce type est plus utilisé et conseillé, comme le montre ce billet
    (d'où sont issus les schémas). A prendre avec des pincettes toutefois,
    car il y'a eu pas mal de changement depuis que cet article a été écrit.


    Mais la raison la plus importante du choix d'une application de type iFrame:


    Créer une nouvelle application Facebook Fin-support-canvas-fbml

    Facebook n'autorisera plus la création d'applications Canvas à partir du premier trimestre 2011. (Voir le calendrier )


    Pour faire simple: comment ça marche une application Facebook iFrame ?

    Et bien elle fonctionne comme un site classique que l'on va intégrer
    dans une iFrame, dans une page spécifique de Facebook, votre canevas
    (exemple: https://apps.facebook.com/sondages-amis/). La particularité de
    ce site sera qu'il va utiliser directement l'API Facebook pour
    fonctionner à l'intérieur du géant social !


    C'est plus clair à présent ?





    Créer et configurer l'application sur Facebook



    Commençons maintenant la pratique. Nous allons déclarer notre nouvelle application sur Facebook.

    Rendez-vous sur la page développeur Facebook , puis cliquez sur le bouton "Créer une application"



    Créer une nouvelle application Facebook Creer-application-bouton


    Entrez le nom de votre application Facebook:



    Créer une nouvelle application Facebook Etape1-creer-app-fb


    Validez, entrez le captcha de sécurité puis vous devriez tomber sur la page de configuration de l'application Facebook:


    Onglet "A propos de"





    Créer une nouvelle application Facebook Etape2-configurer-application-fb


    Si l'interface Facebook n'a pas changé depuis (ils ont une fâcheuse
    tendance à changer les interfaces assez régulièrement...), cliquez sur
    l'onglet "A propos de" et remplissez les champs:



    • Nom de l'application: Le nom que vous souhaitez donner à votre application, c'est aussi par ce nom qu'elle sera retrouvée dans l'annuaire.
    • Description: Un texte que vos utilisateurs pourront lire dans l'annuaire, leur liste d'applications etc.
    • Icône et Logo: Uploadez l'image qui va caractériser votre application.
    • Adresses électroniques: Remplissez les adresses électroniques de contact et d'assistance.
    • URL de votre politique de confidentialité:
      Une page de votre site où l'on pourra consulter les mentions légales et
      règles de confidentialité de votre application (Pensez à le faire, la
      team FB le vérifie quand vous commencez à avoir des utilisateurs !)
    • URL des conditions de service: Vos CGU ...



    Si vous souhaitez travailler à plusieurs sur le développement de
    l'application, vous pouvez ajouter un développeur en bas. Ce dernier
    doit posséder un compte Facebook vérifié, il recevra une invitation:



    Créer une nouvelle application Facebook FB-Invit


    Créer une nouvelle application Facebook FB-Confirm



    Onglet "Site Internet"





    Créer une nouvelle application Facebook Etape3-integration-facebook-connect


    Sur cet onglet, vous trouverez deux informations importantes:


    • Votre ID d'application
    • Votre clé secrète (A conserver précieusement)



    Cette page ne nous concerne pas car nous n'aurons pas à utiliser Facebook Connect.



    Onglet "Intégration à Facebook"





    Créer une nouvelle application Facebook Etape4-configuration-app-iframe


    Comme son nom l'indique, c'est dans cet onglet que nous allons configurer l'intégration de notre application à Facebook.

    Là encore, nous retrouvons nos identifiants d'application: Le client_id et le client_secret.



    • Page de Canevas: Il s'agit de l'URL qu'aura la page de votre application sur Facebook.
    • URL du Canevas: Entrez l'URL ou l'IP du serveur
      pointant sur votre application. Exemple: http://sondages.novaway.fr/
      (N'oubliez pas le slash / de fin)
    • Type de cadre de pages: Choisissez iFrame
    • Découverte sociale:
      Laissez activé, il s'agit d'un équivalent du Like, il publie un message
      sur le mur de l'utilisateur pour faire connaître l'application.
    • Onglets de page: Pas besoin pour le moment




    Paramètres avancés





    Créer une nouvelle application Facebook Etape5-reglages-avances


    Et dans le dernier onglet, vous trouverez divers paramètres avancés comme:


    • URL appelée après retrait d’autorisation: L'url qui pointe vers votre application suivi de /unsubscribe.php (fichier que l'on créera par la suite)
    • Mode bac à sable:
      Activez le mode bac à sable pour que personne ne puisse accéder à votre
      application pendant son développement sauf les développeurs ajoutés
      (dans "A propos de").



    Laissez le reste des paramètres avec leurs valeurs par défaut.


    Enregistrez les modification ! Il se peut que vous ayez une erreur
    si vous avez oublié un / à la fin d'une des URL ou si le nom de votre
    canevas est déjà pris (Ça arrive souvent, c'est comme les domaines ...).



    Créer une nouvelle application Facebook Configuration-terminee-facebook-app


    Voilà pour la configuration, maintenant testons !


    Créez un fichier index.php à la racine de votre répertoire web (Celui sur lequel pointe l'URL renseignée dans "Page de Canevas".


    Code html:



    1.Hello les fermiers !
    2.


    3.
    4.



    Et voilà le résultat une fois que vous appelez votre application:


    Créer une nouvelle application Facebook Resultat-configuration-application










    SDK PHP Facebook: Graph API



    Facebook met à disposition plusieurs SDK permettant d'utiliser leur API.

    Nous allons télécharger la classe PHP qui utilisera la Graph API Facebook.


    Téléchargez le SDK PHP



    Créer une nouvelle application Facebook Telechargement-php-sdk-facebook


    Dans l'archive téléchargée, vous pouvez tout de suite extraire les deux fichiers dans le répertoire src:


    • facebook.php
    • fb_ca_chain_bundle.crt



    Mettez les dans un dossier lib/ dans le répertoire de votre projet.


    Dans l'archive, vous trouverez aussi un fichier d'exemple
    d'utilisation et un fichier de test unitaire. Vous pouvez y jeter un œil
    par curiosité, mais nous n'en aurons pas besoin.



    Comment fonctionne la Graph API Facebook ?




    Facebook dispose de deux types d'API, la OLD Rest API qui n'est plus à utiliser aujourd'hui (mais toujours présente pour les anciennes applications), et la Graph API, celle que nous utiliserons.


    Rendez-vous sur la documentation de l'API que vous pouvez bookmarker au passage car vous allez y passer du temps Smile



    Créer une nouvelle application Facebook Facebook-graph-api


    Le principe est relativement simple, vous appelez une certaine URL
    pour récupérer des données sur un utilisateur, un évènement, un groupe
    ...


    Par exemple, si l'on veut récupérer les informations la page Fan Facebook de Coca cola, il nous suffit d'appeler l'URL: https://graph.facebook.com/cocacola


    Code xml:



    01.{
    02."id": "40796308305",
    03."name": "Coca-Cola",
    04."picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs236.ash2/50516_40796308305_7651_s.jpg ",
    05."link": "https://www.facebook.com/coca-cola ",
    06."category": "Company",
    07."website": "http://www.coca-cola.com ",
    08."username": "coca-cola",
    09."products":
    "Coca-Cola is the most popular and biggest-selling soft drink in
    history, as well as the best-known product in the world.nnCreated in
    Atlanta, Georgia, by Dr. John S. Pemberton, Coca-Cola was first offered
    as a fountain beverage by mixing Coca-Cola syrup with carbonated water.
    Coca-Cola was introduced in 1886, patented in 1887, registered as a
    trademark in 1893 and by 1895 it was being sold in every state and
    territory in the United States. In 1899, The Coca-Cola Company began
    franchised bottling operations in the United States.nnCoca-Cola might
    owe its origins to the United States, but its popularity has made it
    truly universal. Today, you can find Coca-Cola in virtually every part
    of the world.",
    10."likes": 20896023
    11.}


    Nous obtenons un JSON que l'on pourra traiter ensuite.


    Même chose, si l'on veut des infos sur une photo de Coca Cola, on appelle l'URL https://graph.facebook.com/98423808305 , avec 98423808305 qui correspond à l'ID de la photo.



    Créer une nouvelle application Facebook Facebook-graph-api-cocacola


    Si vous souhaitez récupérer l'avatar miniature d'un utilisateur, vous pouvez appeler:

    https://graph.facebook.com/freelanceweb/picture ou freelanceweb correspond à l'ID ou le raccourci URL de l'utilisateur.


    Vous saisissez un peu le principe ?


    Le SDK PHP va nous permettre, via cURL d'appeler
    toutes ces différente méthodes, de passer directement les tokens
    d'identification, nécessaires pour certains appels comme la liste des
    amis de telle ou telle personne ... Et le résultat JSON sera
    automatiquement transformé en un tableau PHP traitable dans notre
    application.



    Créer une nouvelle application Facebook Php-elephpant


    Voilà pour ce premier chapitre! Dans le prochain, nous définirons notre projet et commencerons la pratique.


    Si vous souhaitez faire réaliser votre application Facebook , n'hésitez pas à faire une demande de devis auprès de http://www.novaway.fr/ , spécialistes en développement Facebook.

      La date/heure actuelle est Mar 27 Oct - 4:21