Formation des Tisserands 22-23 janvier 2011 Interaction entre réseaux sociaux et sites web Intégrer les réseaux sociaux sur son site Internet Partager des informations sur les deux supports François NAUTRÉ francois@nautre.fr
Sommaire Exploiter les données des réseaux sociaux sur son site API facebook Graph Interaction page facebook / site web institutionnel Import d un fil d actualité ou d évènements facebook Curation de contenu Donner de la visibilité à son site sur les réseaux sociaux Barre d outils et de navigation commune Application facebook moteur de recherche Boutons facebook «J aime» et «Like Box» Protocole Open Graph Faciliter le travail collaboratif Connexion sur un site avec son compte facebook Restriction d accès aux membres d un groupe Commentaires et fils de discussion Interaction entre réseaux sociaux et sites web 2
Introduction : Technologiæ Groupe de travail sur l Église et les nouvelles technologies Activités : Analyse et veille technologique Conseil et participation à la conduite de projets Formation et partage de connaissances Développement de projets Dialogue avec les institutions, mouvements et associations de l Église Membres : Jeunes catholiques en mission dans l Église Professionnels de l informatique, de la communication, du droit,... Bénévoles, prestataires de services, ou employés par la CEF Blog, infos et contact : www.technologiae.org Interaction entre réseaux sociaux et sites web 3
Introduction : les «3 webs» 2000 : le web documentaire Statique (pas d interactions) Formel et unilatéral 2005 : le web de l information Dynamique mais uniforme Formel mais multi-sources 2010 : le web social Dynamique et personnalisé Informel et collaboratif 2000 2005 2010 Les réseaux sociaux sont le nouvel élément central du web. Le web devient un espace de communication entre des personnes. Source : www.spintank.fr Interaction entre réseaux sociaux et sites web 4
EXPLOITER LES DONNÉES DES RÉSEAUX SOCIAUX SUR SON SITE API facebook Graph Interaction page facebook / site web institutionnel Import d un fil d actualité ou d évènements facebook Curation de contenu Interaction entre réseaux sociaux et sites web 5
API facebook Graph Solution technique permettant d'exploiter les données de facebook Représentation des données sous forme d objets Page, groupe, utilisateur, évènement, message, commentaire, Chaque objet est accessible via une URL : http://graph.facebook.com/identifiant_de_l OBJET Les objets sont retournés au format JSON : http://graph.facebook.com/2204745368 { id: 2204745368, name: Taizé, description: For those who have been to Taizé Sing Taizé Know about Taizé Are curious..., link: http://www.taize.fr } Deux types de données : données publiques, destinées à enrichir des sites web données privées, destinées à réaliser des applications Documentation détaillée : http://developers.facebook.com/docs/api Interaction entre réseaux sociaux et sites web 6
Interaction page facebook / site web institutionnel Page facebook Interaction sociale Circulation de contenus Site web Vitrine de l interaction sociale Source et archive de contenus Interaction entre réseaux sociaux et sites web 7
Import d un fil d actualité ou d évènements http://graph.facebook.com/cgenational/feed { } data: [ { id: 598658597597, date: 2011-01-03, author: Antoine de Montarnal, message: Il y a un bugg dans l ins... },... ] Interaction entre réseaux sociaux et sites web 8
Curation de contenu Sources de données brutes facebook, twitter, flux RSS,... Ces mêmes données, élégamment présentées sous forme de journal: http://bit.ly/hcg2bm Interaction entre réseaux sociaux et sites web 9
DONNER DE LA VISIBILITÉ À SON SITE SUR LES RÉSEAUX SOCIAUX Barre d outils et de navigation commune Application facebook moteur de recherche Boutons facebook «J aime» et «Like Box» Protocole Open Graph Interaction entre réseaux sociaux et sites web 10
Barre d outils et de navigation commune (1/2) Le partage en un clic de n importe quelle page du site sur les réseaux sociaux Moteur de recherche dans votre site et dans les autres sites de l Église Indiquez ici votre recherche... Marque des sites de l Église en France Menus déroulants personnalisables Outils de partage sur les réseaux sociaux Interaction entre réseaux sociaux et sites web 11
Barre d outils et de navigation commune (2/2) Permettez au visiteur de partager n importe quelle page de votre site d un simple clic sur l un des boutons de partage Les boutons sont automatiquement ajoutés en haut de chaque page visitée François Nautré Projet de loi sur l immigration : déclaration des évêques de la Commission Mission universelle Plus d infos : Conférence des Évêques de France - Service Nouvelles Technologies Interaction entre réseaux sociaux et sites web 12
Application facebook moteur de recherche (1/2) Ajoutez un onglet de recherche sur votre page facebook Installation en un clic Paramétrage automatique Recherche dans votre site web Interaction entre réseaux sociaux et sites web 13
Application facebook moteur de recherche (2/2) Résultats dans votre site web Résultats dans tous les sites de l Église Interaction entre réseaux sociaux et sites web 14
Boutons facebook «J aime» et «Like Box» Ajoutez un bouton sur vos articles et autres contenus Un bouton est relatif à un contenu (page web) Ajoutez une «Like Box» sur vos sites Utilisateurs qui aiment votre site Affichage des amis en priorité Une simple ligne de code www.facebook.com/share/ Interaction entre réseaux sociaux et sites web 15
Protocole Open Graph (1/2) Web sémantique : qualifier, donner un sens aux contenus Méta-données : informations qui qualifient un contenu sur une page web Non visibles par le visiteur Incluses dans le code de la page Couple clé/valeur Exemple : mots-clés de la page (<meta name= keyword content= église,catholique,... />) Open Graph Protocol : ensemble de conventions de méta-données Assure le lien entre vos contenus et des objets facebook (pages, groupes,...) Catégorise les contenus du web (sport, hôtel, acteur, lieu, album, marque,...) Relie sémantiquement les contenus entre eux Associe les contenus et les interactions (boutons, commentaires,...) Exemple : (fiche du film «Des hommes et des dieux» sur le site allocine.fr) <meta property= og:title content= Des hommes et des dieux (2010) /> <meta property= og:type content= movie /> <meta property= og:image content= http://images.allocine.fr/18/77/69/73/19476857.jpg />... Interaction entre réseaux sociaux et sites web 16
Protocole Open Graph (2/2) Rendre uniques les contenus de votre site aux yeux de facebook Même s ils sont présentés sur plusieurs pages de votre site Même s ils ne sont pas diffusés avec la même URL Même s ils ne sont pas postés au même endroit ou par la même personne Meilleure visibilité de vos contenus Meilleure détection des centres d intérêts communs entre amis Confondre votre site web et votre page facebook Même base de fans pour votre page facebook et pour votre site web Équivalence entre cliquer sur sur votre page et sur votre site web Sur facebook, l URL de votre site est remplacé par son nom Un clic sur son nom mène directement vers votre site, et non vers votre page Interaction entre réseaux sociaux et sites web 17
PERMETTRE LES INTERACTIONS ET LE PARTAGE DE CONTENUS Connexion sur un site avec son compte facebook Restriction d accès aux membres d un groupe Commentaires et fils de discussion Interaction entre réseaux sociaux et sites web 18
Connexion sur un site avec son compte facebook Intérêt pour l utilisateur : inutile de créer un compte perso supplémentaire sur le site formulaires pré-remplis à partir de ses données de profil contenus personnalisés Intérêt pour l institution : grande simplification technique (pas de système à développer) fiabilité et sécurité du système de gestion des utilisateurs davantage d utilisateurs 1 3 2 <script> FB.init({ appid:'122126847858048' }); </script>... <fb:login-button> Connexion avec Facebook </fb:login-button> Interaction entre réseaux sociaux et sites web 19
Restriction d accès aux membres d un groupe L utilisateur est-il membre du groupe? graph.facebook.com/me/groups { data: [... { ] }... name: Tisserands, id: 108610989160052 } Si oui, on récupère ses infos... graph.facebook.com/me { id: 587891194, name: François Nautré... }... Puis on affiche le contenu du mur graph.facebook.com/1086109891 60052/feed 1 2 3 Interaction entre réseaux sociaux et sites web 20
Commentaires et fils de discussion Un fil de discussion permet de commenter un contenu sur un site, avec son compte facebook Un fil de discussion est attaché à un contenu (avec un identifiant unique, par exemple son URL permanente) Exemple : article de blog Ajout d un fil de discussion sur un contenu d une page web : XXXXXXX : identifiant du contenu <fb:comments xid= XXXXXXX ></fb:comments> Un commentaire posté sur le fil est également publié sur facebook Interaction entre réseaux sociaux et sites web 21
POUR ALLER PLUS LOIN... Ressources, tutoriels, documentations Interaction entre réseaux sociaux et sites web 22
Ressources, tutoriels, documentations,... Internet, web, réseaux sociaux et évolutions Les «3 webs», selon Spintank http://www.spintank.fr/notre-mission/les-3-webs/ Les médias sociaux et l évolution d Internet http://www.slideshare.net/infinidad/conf-3021806 Panorama des réseaux sociaux et de leurs usages http://bit.ly/a8qp8w Usage de facebook et de ses API Groupe des administrateurs d une page catholique sur facebook http://www.facebook.com/group.php?gid=116692525024932 Documentation technique des API facebook http://developers.facebook.com/docs Tutoriels pour développer une application facebok http://facebook-api.fixweb.fr Église et Nouvelles technologies http://www.technologiae.org Interaction entre réseaux sociaux et sites web 23
MERCI! Me contacter : francois@nautre.fr facebook.com/cathogeek Interaction entre réseaux sociaux et sites web 24