Cet article a fait l'objet d'une traduction automatique.

À la pointe

Bases de la programmation Facebook : Le SDK JavaScript

Dino Esposito

 

Je vais être honnête : Je ne sais pas exactement ce qu'une stratégie sociale pourrait ressembler et je n'ai plus qu'une faible idée tout les trucs que les experts sociaux peuvent jouer pour rendre votre contenu plus populaire. De même, j'ai jamais payé beaucoup d'attention pour search engine optimization (SEO) de sites Web, mais je ne crois pas que l'optimisation sociale est aujourd'hui beaucoup plus pertinent et enrichissant que SEO a jamais été.

Dans les deux dernières Articles de cette colonne, j'ai discuté de comment faire pour authentifier les utilisateurs d'une application Web ou Windows à l'aide de Facebook et comment publier sur le réseau social au nom d'un utilisateur consentant. (Ces deux colonnes peuvent être trouvés à msdn.microsoft.com/magazine/jj863128 et msdn.microsoft.com/magazine/jj883950.)

Que Facebook est concerné, il y a beaucoup plus, que vous pouvez faire pour ajouter une « couche sociale » à un site Web. Une couche sociale résulte de la combinaison de trois ingrédients principaux : identité, communauté et interaction. Dans les colonnes précédentes, je me suis adressé d'identité et un peu d'interaction. Ici, je vais explorer les principaux outils que vous pouvez exploiter pour ajouter une couche sociale vraie sur votre site Web existant. Selon Facebook, ces outils sont collectivement connus comme social plugins. Plug-in social est un puissant mélange de balisage HTML, CSS et JavaScript code. Il vous incombe en tant que développeur Web pour fusionner ces éléments en l'UX.

L'omniprésent comme bouton

Le but premier de plug-ins social est de créer un pont entre le contenu du site Internet visité par un utilisateur et la page Facebook de l'utilisateur. En accueillant un ou plusieurs plugins sociaux, le site Web permet aux utilisateurs de partager des contenus spécifiques avec des amis. La manière la plus immédiate pour un site Web permettre aux utilisateurs de partager du contenu via Facebook est le bouton J'aime.

En cliquant simplement sur le bouton J'aime, un utilisateur peut laisser les amis savent qu'elle aime quelque chose à une URL donnée. Hébergement le bouton J'aime sur une page ne pouvait pas être plus simple ; le bouton à l'interface d'utilisateur existant de fusion peut nécessiter quelques étapes supplémentaires.

Il y a quelques différentes manières d'intégrer un bouton J'aime. La façon plus simple et la plus directe consiste à utiliser un élément iframe :

<iframe src="http://www.facebook.com/plugins/like.php?href=your-site"
  scrolling="no" frameborder="0"
  style="border:solid 1px #000; width:450px; height:80px"></iframe>

Le paramètre de chaîne de requête de href se réfère à l'URL que vous voulez comme. L'URL doit être exprimée d'une manière pleinement qualifiée, quelque chose comme https://www.contoso.com/cool.

La plupart des balises est destiné à coiffer l'iframe. Généralement, vous ne voulez pas l'iframe pour faire défiler ou être encadré. Vous souhaitez également relever un endroit approprié. La balise précédente génère la sortie en Figure 1.

Figure 1 l'Interface Standard du bouton J'aime

Si la hauteur de l'iframe est trop petite (moins de 25 pixels ou plus), vous perdez le panneau contenant le bouton pour poster un commentaire supplémentaire. Si vous utilisez le bouton J'aime dans une barre de menu horizontale, la hauteur est une question cruciale. Dans le cas contraire, offrant aux utilisateurs une chance aussi publier leurs propres commentaires augmente la pénétration de la fonctionnalité.

Il y a plusieurs paramètres, vous pouvez utiliser pour personnaliser l'apparence, la sensation et la fonctionnalité du bouton. La figure 2 répertorie les options disponibles. Tous seront attribuées via un paramètre de chaîne de requête supplémentaires.

La figure 2, personnalisation de l'aspect, sensation et la fonctionnalité

Parameter	Description
par défaut	Indique le texte du bouton et la suite à donner à prendre. On aime ou de recommander. Valeur par défaut est comme.
ColorScheme	Le bouton des styles différemment. Il peut être clair ou foncé. Valeur par défaut est lumière.
polices	Définit la police souhaitée pour le plug-in. Options possibles sont Arial, Tahoma, Trebuchet MS et quelques autres.
layout	Modifie la disposition du bouton. Les valeurs possibles sont button_count standard (comme dans la Figure 1) et box_count (comme dans la Figure 3).
paramètres régionaux (locale)	Indique la langue de l'interface utilisateur. Il doit être une chaîne dans le format de xx_XX. Notez l'utilisation de soulignement pour séparer les deux parties d'un nom de culture.
show_faces	Indicateur Boolean pour indiquer si vous souhaitez que l'image de l'utilisateur rendu une fois qu'un utilisateur a aimé le contenu.
width	Indique la largeur du plug-in. La largeur minimale dépend également de la mise en page utilisé.

Tandis que Figure 1 montre la disposition standard, Figure 3 montre les mises en page button_count et box_count.

Figure 3 Formats supplémentaires de mise en page (bouton comte et comte de boîte) pour le bouton J'aime

Un autre paramètre, dans que vous devriez regarder est le paramètre ref. Il vous permet de suivre l'utilisation du bouton Like dans votre site Web. En donnant chacun comme bouton (même dans les différentes pages du site) une valeur de Réf différente — une chaîne alphanumérique simple — vous pouvez facilement suivre les référents dans le journal de serveur qui peut être tracée en arrière à spécifiques tels que le bouton. En particulier, pour n'importe quel clic retour de Facebook sur votre site, vous recevrez un referrer URL avec deux paramètres supplémentaires. Le paramètre de chaîne de requête de fb_ref est juste votre chaîne Réf originale ; le paramètre de chaîne de requête de fb_source est une chaîne qui fournit des informations sur le contexte de Facebook où le clic provenance.

Localisez le bouton J'aime

Même si le bouton J'aime peut être considéré comme universel, encore, il pourrait y avoir des situations dans lesquelles vous voulez traduire similaires plug-in pour une langue donnée. Comme le montre Figure 2, tout ce que vous devez faire est d'ajouter le paramètre locale à la chaîne de requête et affectez-lui une chaîne personnalisée qui indique la langue de votre choix et de la culture.

Pour rendre les choses un peu plus compliqué, vous ne pouvez pas exprimer culture en utilisant le format canonique xx-XX où xx indique la langue et la culture XX. Dans Microsoft .NET Framework, vous obtenez cette chaîne de l'expression suivante :

var name = Thread.CurrentThread.CurrentUICulture.Name;

Pour cette chaîne pour être utilisable avec Facebook, vous devez remplacer le tableau de bord avec un trait de soulignement. Notez également que le jeton de la seule langue n'est pas suffisant en soi et les paramètres régionaux entiers seront ignorées. Ce point m'amène à une autre étude intéressante : Quel est le comportement par défaut du bouton J'aime autant que la langue est concerné ?

Facebook, aussi bien comme Twitter, par défaut, la langue de que l'utilisateur a choisi comme la langue principale dans son profil. Si l'utilisateur n'est pas actuellement connecté, puis l'interface utilisateur est basée sur les paramètres de langue détectées sur le navigateur.

Introduisant le JavaScript SDK

En général, vous pouvez configurer les plugins de Facebook de plusieurs façons différentes : à l'aide d'une simple URL d'un lien hypertexte personnalisé ; utilisant une iframe (comme indiqué dans cet article) ; en utilisant la balise HTML5 ; et l'utilisation de la langue étendue de balisage Facebook (XFBML). HTML5 et XFBML sont équivalents à bien des égards ; HTML5 est juste un plus -­récente syntaxe prise en charge par souci d'exhaustivité. HTML5 et XFBML exigent tous deux l'utilisation du JavaScript SDK Facebook.

Plugins sociaux plus sophistiqués sont uniquement disponibles via des balises HTML5 et XFBML. C'est le cas pour le bouton Envoyer pour envoyer le contenu directement à des amis et la boîte de commentaires pour voir les commentaires sur un poste donné. Autres plug-ins tels que Like, la boîte comme le flux d'activité (la petite liste de notifications de tous les amis, que vous avez généralement sur le coin supérieur droit de votre page) peut être rapidement configuré et intégrée via un iframe.

Plug-ins ne pas implémenté à travers les iframes ou URL direct nécessitent l'utilisation du JavaScript SDK Facebook. Comme vous pouvez l'imaginer, le SDK est un client pour un certain nombre de points de terminaison de Facebook pour exécuter des tâches telles que l'authentification, l'affichage et la récupération des commentaires, aime et d'autres actions.

Pour pouvoir utiliser le JavaScript SDK, avant même que vous le télécharger, vous devez avoir un ID d'application. J'ai bien discuté ce point dans les colonnes précédentes, mais en un mot, toute interaction avec le site de Facebook qui va au-delà des opérations de base telles que comme, vous devez enregistrer une application et obtenir un identifiant unique. Le $ $ etAPP joue le rôle du connecteur entre votre client (par exemple, un site Web) et l'extrémité arrière de Facebook. Le Facebook App Dashboard pour l'enregistrement d'un app est disponible à bit.ly/mly4xs.

La deuxième étape consiste à ajouter du code dans vos pages Web qui télécharge le SDK. L'URL à appeler est : / con­nect.facebook. NET/xx_XX/All.js.

Le xx_XX dans l'URL est un espace réservé pour la langue souhaitée. Une option est reliant cette URL à partir d'une balise de script statique. Parce que la taille du fichier est beaucoup plus que 180 Ko, il ne serait pas une bonne idée de télécharger de façon synchrone par une balise de script statique. Le fichier obtient bientôt mis en cache et la plupart des demandes successives qu'il recevra un code d'état HTTP 304 « non modifié » ; Toutefois, Facebook recommande que vous télécharger le fichier de manière asynchrone. Il s'agit d'un modèle commun à tous les blocs de script requis pour les interactions sociales — par exemple, ça marche même pour Twitter plug-ins. Voici le code dont vous avez besoin :

<script type="text/javascript">   
  (function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.
net/en_US/all.js#xfbml=1&appId=xxx";
    fjs.parentNode.insertBefore(js, fjs);
  } (document, 'script', 'facebook-jssdk'));
</script>

Le code est défini comme une fonction immédiate de JavaScript et s'exécute dès qu'il se trouve. Remarque que vous placez ce code préférence juste après l'ouverture du corps tag et vous devez remplir le paramètre appId avec votre ID d'application. (Notez que de nombreux développeurs avocat plaçant les scripts en bas de la section du corps afin d'éviter tout blocage du rendu de la page).

À ce stade, vous êtes prêt à utiliser des balises HTML5 et XFBML pour intégrer Facebook plug-ins dans vos pages. Nous allons commencer avec un regard sur le bouton "connexion".

Le bouton "connexion"

Le SDK contient une méthode sur l'objet racine FB à travers laquelle, vous pouvez déclencher par programme le processus de connexion. L'option la plus simple consiste en ajoutant votre propre lien ou un bouton et de relier son gestionnaire click au code suivant :

FB.login(function(response) {
  if (response.authResponse) {
    // Display some wait message 
    // ...
FB.api('/me', function(response) {
      $("#username").html('Welcome, ' + response.
name + '.');
    });
  } });

Ce code est beaucoup plus simple que tout autre code analogue dans les deux dernières colonnes. De cette façon, authentification des utilisateurs par rapport à Facebook est un jeu d'enfant (voir Figure 4).

La figure 4, authentification des utilisateurs via JavaScript

La connexion plug-in peut simplifier le processus de connexion même. En plus de relier le SDK, tout ce dont vous avez besoin est la balise HTML5 suivante (ou analogue balisage XFBML tel que démontré sur le site de Facebook) :

<div class="fb-login-button"
  data-show-faces="true"
  data-width="200" 
  data-max-rows="1"></div>

Les données-* attributs vous permettent de configurer l'apparence et le comportement du bouton. Le bouton bleu dans la page de Figure4 donne une idée de l'aspect standard. En particulier, l'attribut de données-spectacle-visages vous permet d'afficher les photos des utilisateurs (et certains de leurs amis qui a utilisé votre application de se connecter à Facebook). L'attribut data-max-lignes détermine le nombre de lignes (compte tenu de la largeur du plug-in) à remplir avec des visages.

Il convient également de noter que si les données-spectacle-faces est activé et que l'utilisateur est déjà connecté, puis aucun bouton de connexion n'est affiché. L'utilisateur ne peut pas déconnecter de Facebook par l'intermédiaire de votre application. Si les données-spectacle-faces est false, alors le bouton "connexion" reste visible tout le temps et il ne réagit pas si vous cliquez sur.

Développeur Web, vous devriez voir la différence profonde entre le JavaScript SDK ou le plug-in de connexion et le serveur -­code côté et Facebook C# SDK. Si vous travaillez le côté client, puis que vous ciblez essentiellement Facebook et login est probablement la première étape nécessaire pour faire le travail plus spécifique. Facebook est le but ici.

Code c# est préférable si vous utilisez Facebook comme un moyen d'authentifier les utilisateurs et que vous avez besoin gérer le cookie d'authentification ASP.NET et le système d'appartenance standard. Facebook est le moyen ici.

Nouveauté

Pourvu qu'il n'est pas déjà ainsi, authentification via les réseaux sociaux deviendra une caractéristique incontournable pour tous les sites qui ont besoin de l'authentification. Cela signifie que le kit de développement logiciel c# demeure sans doute l'approche plus souple. À cet égard, les nouvelles classes sociales en ASP.NET MVC 4 sont juste cerise sur le gâteau. En termes de développement de sites Web, je ne vois même aucun raison de remplissage ne pas de mises en page avec des boutons de sociales et plug-ins pour tweet ou publier du contenu immédiat. La prochaine fois, je vais être revient avec Facebook programmation couvrant plus avancée social plugins tels que les commentaires et la boîte similaire. Dans le même temps, pour plus d'informations sur Facebook social plug-ins, vous pouvez jeter un oeil à bit.ly/fAU7Xe.

Dino Esposito est l'auteur de « Architecting Mobile Solutions for the Enterprise » (Microsoft Press, 2012) et de « Programming ASP.NET MVC 3 » (Microsoft Press, 2011). Il a également coécrit « Microsoft .NET: Architecting Applications for the Enterprise » (Microsoft Press, 2008). Basé en Italie, Dino Esposito participe régulièrement aux différentes manifestations du domaine organisées aux quatre coins du monde. Vous pouvez le suivre sur Twitter à l'adresse twitter.com/despos.

Merci aux experts techniques suivants d'avoir relu cet article : Christopher Bennage et Scott Densmore