Développer une communauté autour de votre site avec Google Friend Connect

Baptiste Wicht

Cet article va vous présenter les bases de Google Friend Connect ainsi que la manière de l'utiliser pour faciliter le développement d'une communauté sur votre site Web.

Commentez

- Titre : Développer une communauté autour de votre site avec Google Friend Connect

- Auteur : Baptiste Wicht

- Parution : 11 janvier 2010

- Mise à jour : 11 janvier 2010

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2009 Baptiste Wicht. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- 1. Introduction

- 2. Inscription au service

- 3. Inscrire votre site sur Google Friend Connect

- 4. Gadget membres

- 5. Notes et commentaires

- 6. Sondages

- 7. Recommandations

- 8. Activités

- 9. Contenu proposé

- 10. Newsletter

- 11. Conclusion

- 11-1. Remerciements

1 - Introduction

Google Friend Connect est un service de Google qui permet de rendre un site Web (ou un blog) social. Ce service vous permet d'intégrer sur votre site des fonctionnalités de réseau social :

- Inscription à votre site Web

- Commentaires sur des pages, des objets

- Envoi d'une newsletter à vos membres

- Sondages et questions aux membres du site

- Recueil des centres d'intérêt

- Recommandation des pages par les membres

- Affichage de l'activité du site

Toutes ces fonctionnalités sont ajoutées à votre site par le biais de gadgets HTML à insérer dans votre site de manière très simple.

Il est possible de s'inscrire sur le site au moyen d'un des comptes suivants :

- Google

- Twitter

- Yahoo

- Aim

- Netlog

- OpenID

Cela ne va donc pas limiter l'inscription à un petit nombre d'utilisateurs. En plus de cela, l'utilisateur n'aura pas besoin de créer un nouveau compte pour s'inscrire à votre site, il lui suffira de s'inscrire avec un compte existant.

2 - Inscription au service

La première chose à faire est de s'inscrire au service Google Friend Connect. Il faut pour cela disposer d'un compte Google ou Gmail. Si vous n'avez pas de compte Gmail, vous pouvez en créer un ici ou alors d'un compte Google pointant vers une autre adresse, créable ici.

Pour s'inscrire, rendez vous sur cette page. A la suite de quoi, il vous faut cliquer sur le lien Mise en route.

Mise en route de Google Friend Connect

Ensuite de quoi, il vous faut vous connecter avec votre compte Google :

Connexion avec un compte Google

Il vous faut ensuite accepter la licence du service :

Licence du service

Voilà, l'inscription au service Google Friend Connect est maintenant effective !

3 - Inscrire votre site sur Google Friend Connect

Une fois l'inscription terminée, il faut enregistrer votre site Web dans Google Friend Connect. Si vous venez de vous inscrire sur Friend Connect, c'est la page par défaut affichée, sinon utilisez le bouton "Ajouter un site" à gauche.

Ajouter un site

Renseignez les informations suivantes pour chaque site :

- Nom du site Web : le nom de votre site Web. C'est ce nom qui sera affiché pour les utilisateurs de votre site.

- URL du site Web : l'URL publique de votre site Web.

- Langue du site Web : la langue du site Web. Automatique implique que la langue est déduite avec la langue de la page Web courante.

Une fois ces données entrées (vous pourrez toujours les modifier par la suite), cliquez sur Continuer.

Votre site est maintenant ajouté dans Friend Connect !

Dans les prochains chapitres, nous verrons comment ajouter les gadgets Friend Connect sur votre site.

4 - Gadget membres

Ce gadget est le premier qui doit être installé sur votre site et est quasiment indispensable. Ce gadget permet de lister les membres d'un site et surtout permettre à un lecteur de s'inscrire sur votre site.

Pour l'ajouter, il vous suffit de cliquer sur le bouton "Ajouter le gadget Membres" qui devrait être affiché sur votre page d'accueil. Si vous n'avez pas cela, vous pouvez vous rendre dans la liste des gadgets (élément "Gadgets" du menu de gauche) et choisir le gadget membres.

Une fois cela fait, vous vous trouvez maintenant sur la page de création du gadget. Il vous faut configurer le gadget. La première chose à faire est de choisir la largeur du gadget et le nombre de lignes de photos qu'il va afficher. Ensuite, vous pouvez configurer l'affichage du gadget en modifiant chacune des couleurs du gadget ainsi que la police utilisée pour s'intégrer au mieux dans votre site.

Membres

Une fois que vous avez configuré correctement votre gadget, vous pouvez utiliser le bouton "Générer le code" pour récupérer le code HTML à insérer dans votre page Web. Voici ce que donne ce code dans mon cas :

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-7300621007176648106" style="width:276px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-7300621007176648106',
site: '11972959310253930670' },
skin);
</script>

Comme vous pouvez le voir, il est donc possible de remodifier toutes les valeurs à la main par la suite. Voici ce que donne ce gadget sur le site d'exemple donné par Google :

Gadget membres

Cela donne donc la possibilité à un utilisateur de s'inscrire sur le site et de visualiser les autres membres inscrits à ce site.

5 - Notes et commentaires

Une autre fonctionnalité très intéressante est de pouvoir proposer à un utilisateur de laisser un commentaire sur votre site, une page du site ou encore un objet spécifique de votre site. Tout cela se fait via le gadget "Notes et commentaires" que vous trouverez dans la galerie des gadgets. A noter que si vous ne désirez pas permettre à l'utilisateur de donner une note, il vous suffit d'utiliser le Gadget "Commentaires".

Pour commencer, il vous faudra indiquer le contenu ciblé par les commentaires. Voici les choix que vous avez :

- Site complet : commentaires sur la totalité du site. Vous pouvez donc inclure ce gadget sur des pages différentes, les commentaires seront les mêmes.

- Page : commentaires sur la page courante. Vous pouvez insérer ce même gadget sur plusieurs pages et les commentaires porteront sur la page en cours.

- ID : commentaires sur un objet spécifique. Vous devez entrer l'ID de l'objet à commenter. Sur un site Web dynamique, vous pouvez vous servir de cela pour faire des commentaires sur des objets dynamiques.

A la suite de quoi, vous pouvez configurer le texte affiché sur le gadget.

Comme pour le gadget "membres" vous devez donner une largeur au gadget ainsi qu'un nombre de messages maximal à afficher. Vous pouvez également donner à l'utilisateur la possibilité de réduire le gadget ou au contraire de lui refuser cette possibilité. Enfin, vous pouvez de nouveau configurer l'affichage du gadget comme vu précédemment.

"Notes et commentaires"

Et vous pouvez enfin générer le code de votre gadget et l'insérer ensuite dans vos pages HTML.

Voici comment s'affiche ce gadget sur la page d'exemple de Friend Connect :

Gadget "Notes et commentaires"

Cela donne donc la possibilité à un utilisateur connecté la possibilité de laisser des commentaires et de visualiser les commentaires laissés par les autres utilisateurs.

6 - Sondages

Une autre possibilité qui vous est offerte par Google Friend Connect est la possibilité de poser des questions à vos membres.

En utilisant l'onglet "Centres d'intérêt" dans le menu de gauche, vous avez accès à la gestion des questions de centre d'intérêt de votre site. Cette vue a deux onglets :

- Questions : permet de configurer les questions qui sont posées à vos utilisateurs.

- Gadget de sondage : permet d'ajouter un gadget de sondage sur votre site.

Onglet Questions

Vous avez le choix entre plusieurs types de question : texte, texte long, choix multiples, case à cocher ou encore choix dans une liste.
Les questions que vous posez aux utilisateurs sont affichées dans le profil et le gadget de sondage si vous l'avez inséré dans votre site.

Ce gadget est des plus simple à configurer, il suffit en effet de renseigner une largeur et les couleurs du gadget et c'est tout.

Gadget de sondage

7 - Recommandations

Vous pouvez également permettre aux utilisateurs de recommander des pages de votre site aux autres utilisateurs. Pour cela, Friend Connect vous propose deux gadgets. Le premier permet d'afficher les pages recommandées par les autres utilisateurs et le second permet à un utilisateur de recommander une page.

Pour configurer ces deux gadgets, rendez vous dans la galerie des gadgets et choisir le gadget "Recommandations". Premièrement, configurez le titre d'en-tête du gadget, le nombre de recommandations à afficher ainsi que la largeur du gadget.

Gadget Recommandations

Ensuite, vous devez configurer le gadget permettant aux membres de recommander une page du site. Vous pouvez configurer l'aspect du bouton, l'icône à afficher ainsi que le texte du bouton. Vous pouvez également personnaliser ce sur quoi porte la recommandation avec les options avancées.

Bouton de recommandation

8 - Activités

Vous pouvez également afficher l'activité de vos membres ainsi que l'activité sur les différents gadgets sur votre site. Cela fait, encore une fois, avec un gadget à inclure sur votre site.

Ce gadget, justement nommé "Activités", est disponible dans la galerie des gadgets. Il vous faut commencer par indiquer si vous voulez afficher l'activité du site dans son entier ou alors l'activité de vos membres sur l'ensemble des sites dont ils font partie. A la suite de quoi, à l'image des autres gadgets, vous devez configurer la largeur et la hauteur du gadget puis les couleurs de ce dernier.

Gadget Activités

Enfin, vous pouvez générer le code de votre gadget et l'inclure dans vos pages Web. Voici comment est affiché ce gadget sur la preview dans mon cas :

Gadget Activités

9 - Contenu proposé

Vous pouvez également utiliser les centres d'intérêt de vos membres pour proposer une liste de contenu en fonction des intérêts de chaque lecteur. Pour cela, vous pouvez utiliser le gadget "Contenu proposé".

Vous devez d'abord renseigner la largeur du gadget. Ensuite, vous devez donner un titre au gadget. Vous pouvez également choisir de ne pas afficher ce titre. Dans le cas où aucune correspondance n'est trouvée, vous pouvez choisir d'afficher ou non les résultats de recherche de Google. Vous pouvez finalement choisir une source alternative de contenu à proposer à l'utilisateur.

Contenu proposé

Voici l'affichage du gadget sur le site d'exemple de Google :

Contenu proposé

10 - Newsletter

Une autre chose que vous pouvez faire sur votre site avec Friend Connect est d'envoyer une newsletter à vos membres qui ont le choix ou non de recevoir la newsletter.

En utilisant l'onglet "Lettres d'information" dans le menu de gauche, vous avez accès à la gestion des newsletters de votre site. Cette vue a trois onglets :

- Rédiger des lettres d'information : permet de rédiger et d'envoyer des lettres d'information à vos membres.

- Historique des lettres d'information : affiche un historique des lettres d'information déjà envoyées.

- Gadget "Lettre d'information" : permet d'afficher un gadget pour permettre aux lecteurs de s'inscrire à la newsletter.

Vous avez également accès à une option dans l'onglet "Rédiger des lettres d'information" pour ajouter un lien pour l'inscription à la lettre d'information.

Gadget Newsletter

Voici à quoi ressemble le gadget :

Gadget Newsletter

11 - Conclusion

En conclusion, Google Friend Connect vous permet facilement d'ajouter des fonctionnalités de réseau social à votre site de manière très simple. En plus des gadgets présentés dans cet article, il existe d'autres gadgets que vous pouvez insérer dans votre site :

- Barre de réseau social : affiche une barre en haut de votre site pour que l'utilisateur se connecte, accède à son profil et suive l'actualité du site.

- Gadget de connexion simplifié.

- Publication d'événement sur votre site.

- Liste des visiteurs récents.

- Petits jeux en ligne.

- ...

Voilà. En espérant que cet article vous sera utile pour votre site Web.

Commentez

11-1 - Remerciements

Merci à Wachter et Bérénice Maurel pour leur relecture orthographique.