Partie 2.1: "Celui qui contrôle les métadonnées contrôle le web" F. Gandon

Objectif

Nous allons découvrir et ajouter des plugins simples de réseaux sociaux pour l'application pictionnary. Nous allons également découvrir ce que sont les méta-données (balises méta, microdata, microformats, RDFa). Leurs formats, leur utilisation par les réseaux sociaux et les machines.

Pour le moment, je vous demande de vous concentrer sur les Microdonnées (=microdata). Et de ne pas trop regarder en détail les microformats ni RDFa.

Attention, les sites google, facebook, twitter, devront accéder à la page pour récupérer les méta-données et personnaliser les posts. Vous devrez donc au choix:

• tester les méta-données sur les sites de chaque réseau social, et vous dire "ok ça devrait marcher"
  • pour Google: https://support.google.com/webmaster..._topic=1088473
  • pour Facebook: https://developers.facebook.com/tools/debug/
  • pour Twitter: https://dev.twitter.com/docs/cards/v...tion/validator
• publier votre site en ligne
• utiliser un outil pour permettre l'accès en ligne à votre localhost, comme dyndns, pagekite, localtunnel,... 

Google +1

On commence avec le bouton +1 de google. En parallèle, vous étudierez le document suivant, et vous ajouterez à la page main.php un bouton +1

https://developers.google.com/+/web/+1button/?hl=fr

Facebook Like

Un autre moyen d'interaction simple avec les réseaux sociaux est le bouton like de Facebook. En parallèle, vous étudierez le document suivant, et vous ajouterez à la page main.php le bouton like de votre choix.

https://developers.facebook.com/docs...s/like-button/

Twitter tweet Button

https://dev.twitter.com/docs/tweet-button

Google+ share

Le boutton share de google+ permet de partager simplement votre page sur le réseau social. En parallèle, vous étudierez le document suivant, et vous ajouterez à la page main.php le bouton share de votre choix.

https://developers.google.com/+/web/share/

Facebook share

Le boutton share de google+ permet de partager simplement votre page sur le réseau social. En parallèle, vous étudierez le document suivant, et vous ajouterez à la page main.php le bouton share de votre choix.

https://developers.facebook.com/docs.../share-button/

Meta-données pour les machines: exemple des moteurs de recherche

Lisez chaque page de la présentation des méta-données par google. Ne vous égarez pas avec les hyperliens. Vous devez juste découvrir l'existance des trois formats de métadonnées qu'on peut inclure dans une page html, et découvrir schema.org. Nous y reviendrons.
https://support.google.com/webmaster...ef_topic=21997

Etudiez plus en détail le document suivant, qui décrit le format des microdonnées, et le vocabulaire schema.org. 
http://www.alsacreations.com/article...emantique.html

On sait que Google comprend les méta-données qui décrivent les applications logicielles. Ajoutez donc à la page main.php des microdonnées schema.org opur décrire vote application.
https://support.google.com/webmaster..._topic=1088474

Utilisez l'outil de test des données structurées de google pour tester vos métadonnées, et voir comment s'afficherait la page main.php dans les résultats google.
https://support.google.com/webmaster..._topic=1088473

Méta-données pour le web social: améliorer les fonctionnalités de partage sur les réseaux sociaux.

Google, Facebook et Twitter utilisent des méta-données de la page pour améliorer leur plugin de partage de page. Nous allons découvrir comment les utiliser.

Travail à faire pour le projet Pictionnary Asynchrone

L'utilisateur doit pouvoir:

• partager l'application à travers les boutons sur la page main.php, et les extraits partagés sont personnalisés à l'aide de méta-données pour google+, facebook et twitter.
• partager un dessin lorsqu'il a fini de dessiner: lorsqu'il valide le dessin, un cadre s'affiche, il remercie l'utilisateur d'avoir joué, et lui propose de partager son dessin, et les extraits partagés sont personnalisés à l'aide de méta-données pour google+, facebook et twitter.

Facebook met en cache l'image de la page que vous essayez de partager. Pour vider le cache et mettre à jour l'image, réexecutez le débugger Open Graph de Facebook à l'adresse https://developers.facebook.com/tools/debug/

c.f., http://stackoverflow.com/questions/1...-select-images

Le tag og:image utilisé par facebook ne veut apparemment pas de dataurl, donc vous devrez enregistrer à l'avance un fichier image (.png par exemple) sur le serveur, et renseigner son url dans le tag og:image. Le code PHP pour faire celà est le suivant:

file_put_contents($chemin, base64_decode($data));

Vous devez créer un lien dans votre header vers une about.php, qui vous décrit vous en tant que développeur (schema.org/Person). Vous y ajouterez des fonctionnalités de partage sur les réseaux sociaux.

Pour aller plus loin

D'autres plugins de réseaux sociaux existent:

• Pour facebook, c.f., https://developers.facebook.com/docs/plugins/
• Pour google+, c.f., https://developers.google.com/+/web/
• Pour twitter, c.f., https://dev.twitter.com/
• Pour Linkedin, c.f., http://developer.linkedin.com/plugins
• Pour reddit, c.f., http://fr.reddit.com/buttons/
• etc. etc. etc.