Loading...

Cette présentation est un site HTML5

Appuyez sur la touche pour avancer.

Zoom in/out: Ctrl ou Command + +/-

Boutons de partage

par Frank Parent (@FrankStar90)

Uranium Interactive

Objectifs de la présentation

  • Démystifier certaines croyances concernant l'intégration des boutons
  • Montrer les modifications visuelles possibles pour les boutons
  • Expliquer les différentes méthodes d'intégration
  • Énoncer quelques bonnes pratiques d'utilisation
  • bonus: clarifier la documentation Facebook
Facebook
  • Le bouton like est utilisé depuis plus d'un an (avril 2010)
  • Il est le successeur au bouton Share, et non une alternative

    Share
  • Depuis le 27 février 2011 il publie une courte description de l'article au lieu d'un simple status (Mike likes foo on bar.com)
  • Disponible en 100 langues différentes

STYLEZ

Est-ce qu'il est possible de créer un nouveau bouton "Like" et de l'utiliser comme l'original?

fake

"Clickjacking" est un petit hack qui consiste à ajouter un petit iframe invisible (1x1) et en JavaScript de lui faire suivre le curseur de la souris. Peu importe ou l'utilisateur clique, l'action est déclanchée.

fake

Limites du design pour le bouton "Like":

  • 4 modes d'affichage: standard avec texte droite, button count avec petite bulle à droite, box count avec bulle au dessus, standard avec aucun texte
  • On peut aussi affiche le bouton send et/ou les visages des personnes qui ont aimé
  • Il est possible de choisir entre le thème de couleur pâle ou foncé
  • 6 différentes font sont disponibles
  • On peut positionner le bouton n'importe ou mais le texte va toujours être à droite
  • Il est possible d'aligner le bouton à droite dans une page si on utilise la disposition standard et qu'on cache le texte
  • Bref, on ne peut pas styliser le contenu du iframe parce qu'il provient d'un domaine différent, mais le iframe lui-même ou son conteneur, oui

CODEZ

Intégration

  • Il y a 2 manière d'ajouter le bouton; en utilisant la version "iframe" ou "XFBML"
  • La version "iframe" est probablement plus simple, mais beaucoup moins puissante que "XFBML" parce qu'elle offre moins de possibilités et dépend du JavaScript SDK
  • Le JavaScript SDK permet d'authentifier un utilisateur, lire sa session active, aller chercher le data, etc.

Comment ajouter la version "iframe"

  1. Allez sur la page du widget http://developers.facebook.com/docs/reference/plugins/like/
  2. Dans la section "Step 1 - Get Like Button Code", entrer votre URL et sélectionnez les options
  3. Appuyez sur le bouton "Get Code"
  4. Copiez le code de la section "iframe" du popup et ajoutez-la dans votre site
<iframe src="http://www.facebook.com/plugins/like.php
?href=http%3A%2F%myURL.com..."></iframe>

Comment ajouter la version "XFBML"

  1. Faites les étapes 1 à 3 de la version "iframe" statique
  2. Copiez le code de la section "XFBML" du popup et ajoutez-la dans votre site à la fin du body
<div id="fb-root"></div>
<script src="http://connect.facebook.net/...all.js&xfbml=1"></script>
<fb:like href="http://myURL.com"></fb:like>
...

optionnel: Vous pouvez enlever la section "appId=204316232936877&" du code généré si vous ne voulez pas utiliser d'application Facebook

optionnel: Oubliez pas d'ajouter le Namespace XML dans la balise HTML pour IE (xmlns="http://www.w3.org/1999/xhtml")

Au lieu du code généré, vous pouvez aussi utiliser la version "asynchronous" du code pour initialiser le "XFBML":

<script> 
window.fbAsyncInit = function() {
  FB.init({status: true, cookie: true, xfbml: true});
};

(function() {
  var e = document.createElement('script');
  
  e.type = 'text/javascript';
  e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
  e.async = true;
  document.getElementById('fb-root').appendChild(e);
}());
</script>
oh noes

«Dude, j'ai vu sur le site de Facebook que le FBML allait être "deprecated" et ne serait plus utilisé. Pourquoi j'utiliserais cette version du bouton? Est-ce que mes anciens boutons vont encore fonctionner? WTF!!!»

OUI!

Le FBML est désormais "deprecated" uniquement dans le canvas des APPLICATIONS Facebook. Pas pour les widgets.

C'est à dire que les applications Facebook utilisent désormais toutes un iframe dans le canvas

«Lastly, we want to be clear that our deprecation of FBML does not impact XFBML, such as the tags that support social plugins.»
- Nikolay Valtchanov, Software Engineer at Facebook

http://developers.facebook.com/blog/post/479

Comment ajouter la version "iframe" dynamique

(pour que le URL soit le bon peu importe la page dans laquelle se trouve le bouton)

  1. Faites les étapes 1 à 4 de la verison "iframe" statique
  2. Dans votre site, remplacez le paramètre "href" du iframe par l'URL courant de la page

JavaScript

<iframe src="http://www.facebook.com/plugin..."></iframe>
document.getElementById('fbLike').src = document.URL;

PHP

<iframe src="http://www.facebook.com/plugins/like.php
?href=<?php echo $_SERVER['REQUEST_URI'] ?>"></iframe>

ASP.NET

<iframe src="http://www.facebook.com/plugins/like.php
?href=<%= Request.Url.AbsoluteUri %>"></iframe>

[URNEWB]ESTFRIEND©

http://developers.facebook.com/tools/lint/

FAQ

J'aime pas cliquer sur les bouton "Like" pour tester parce que ça apparait dans mon profil...

CLIQUE QUAND MÊME; après va dans ton profil et clique sur le bouton "X" et sélectionne "Remove post and unlike". Personne va le voir dans leur News Feed.

Est-ce qu'il est possible de savoir quand un utilisateur clique sur le bouton "Like"?

OUI; avec la version "XFBML" il y a l'événement edge.create

Est-ce que les utilisateurs ont l'option d'ajouter un commentaire après avoir pesé sur le bouton "Like"?

OUI; la version "XFBML" l'offre par défaut; avec la version "iframe" il faut utiliser le layout "standard" et avoir une largeur de 400px minimum.

Est-ce qu'il est possible de garder des statistiques des "Like" de mon site?

OUI; il faut enregistrer le site dans l'outil "Insights" de Facebook et les administrateurs (déterminés grace au meta "fb:admins" ou "fb:app_id") vont y avoir accès. Les statistiques sauvegardées sont le nombre de cliques sur chaque domaine et la démographie des utilisateurs.

Si j'ai 300 boutons "Like" sur ma page, est-ce qu'il est possible de savoir lequel à été cliqué?

OUI; simplement ajouter l'attribut "ref=val" à votre élément "" ou à votre "iframe".

Exemple:

<fb:like ref="top_left"></fb:like>
<iframe src="...&ref=top_left"></iframe>

Est-ce qu'il est possible de faire pointer mon bouton "Like" à ma page Facebook?

OUI; vous avez juste à mettre le "href" de votre application

J'ai fais mes modifications mais Facebook ne semble pas les reconnaître. Criss d'outil de marde avec de la documentation poche je veux voir ma mère bla bla bla.

QQ; Facebook scan la page au 24 heures OU lorsqu'un administrateur (déterminés grace au meta "fb:admins" ou "fb:app_id") clique sur le bouton "Like" OU lorsque l'URL de la page est entré dans le [URNEWB]ESTFRIEND©

Est-ce possible que le bouton soit multilingue?

OUI; dans la version "XFBML" il faut juste mettre la bonne langue dans le JS '//connect.facebook.net/en_US/all.js'; pour la version "iframe" il faut ajouter le paramètre "locale=la_langue" dans le URL

src="facebook.com/plugins/like.php?locale=fr_FR&..."

Le petit chiffre à côté du bouton "Like", ça sert à quelque chose?

OUI; ça représente le nombre de "like", de partage, de commentaires et de message inbox contenant cet URL.

Est-ce que c'est possible de cacher le nombre de "Like" à côté du bouton?

OUI; il n'y a pas de "layout style" disponible dans l'API de Facebook pour se faire présentement, mais il suffit de mettre le "iframe" ou l'élément "" dans un conteneur, définir une largeur à celui-ci et lui ajouter la propriété "overflow:hidden;".

Est-ce que je suis vraiment oubligé d'utiliser les "Open Graph Tags" pour que mon bouton foncitonne?

NON. Je le redis, NON!

Si je n'utilise pas les "Open Graph Tags", quelle information Facebook va aller chercher?

Facebook va prendre le titre de la page (<title>) comme titre, la description (<description>) comme contenu et l'auteur (<author>) comme auteur de l'article.

Ok, les "Open Graph Tags" ne sont pas obligatoires... Mais ça me prend un "app id" non?

NON; le "app id" est requis pour plusieurs fonctions du JavaScript SDK et pour l'authorisation par exemple, mais il n'est pas obligatoire.

Exemple d'initialisation sans "app id":

FB.init({status: true, cookie: true, xfbml: true});

Est-ce qu'il est possible d'utiliser la version "XFBML" dans une page SSL?

OUI; changer le lien pour 'https://connect.facebook.net/en_US/all.js'

J'ai utilisé la version "XFBML" mais ça ne fonctionne pas en IE... WTF?

Pour utiliser "XFBML" il faut ajouter le Namespace XML au HTML de la page sinon les balises ne seront pas interprétées:

<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:fb="http://www.facebook.com/2008/fbml">

Si je suis dans d'autres navigateurs que IE et que j'omet le Namespace XML, est-ce que ça va fonctionner?

OUI

OPEN GRAPH PROTOCOL

Si les balises "meta" de Facebook (représentant le Open Graph Protocole) ne sont pas obligatoire pour utiliser le bouton "Like", à quoi est-ce qu'ils servent?

Pour "transformer" votre page Web en genre de style de genre de page Facebook.

http://kings.nhl.com/club/player.htm?id=8471685

kopitar
twitter

Processus d'interaction

  1. L'utilisateur clique sur le bouton "Tweet"
  2. Un popup s'ouvre avec la page de création ou connexion au compte Twitte
  3. Le popup change et le champs texte pré-rempli apparait; l'utilisateur peut changer le contenu s'il le désire
  4. optionnel : Après avoir confirmé, le nouveau "Tweet" est confirmé et un maximum de 2 comptes Tweet sont suggérés à l'utilisateur
  5. Le popup reste ouvert et et l'utilisateur doit le fermer

Intégration

3 méthodes possibles:
  • JavaScript
    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
    <a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>
  • iframe
    <iframe allowtransparency="true" frameborder="0" scrolling="no"
    src="http://platform.twitter.com/widgets/tweet_button.html"
    style="width:130px; height:50px;"></iframe>
  • personnalisé
    <a href="http://twitter.com/share">Tweet</a>

Références

Facebook

http://developers.facebook.com/docs/reference/plugins/like/

Twitter

http://dev.twitter.com/pages/tweet_button

Sandbox (exemples)

http://exodecreations.com/Uranium/
kthxbye