Accueil » WordPress » BuddyPress en mode pas-à-pas – Episode 4

BuddyPress en mode pas-à-pas – Episode 4

Episode 4 : des activites pour animer votre communaute

Après avoir créé notre annuaire d’utilisateurs, permis à ces derniers de pouvoir se mettre en relation et d’interagir entre eux à l’aide de messages privés, après avoir mis en place de nouvelles zones au sein de notre blog afin de leur proposer de se regrouper et d’échanger autour de thèmes communs, aujourd’hui, je vous propose de découvrir les deux derniers composants de BuddyPress.

 BuddyPress en mode pas à pas – Episode 4 buddypress tuto part4

 

L’un d’entre eux est selon moi le plus important car il dynamise votre communauté : il s’agit des activités. Le second est intéressant dans la mesure où il fait le lien entre le contenu de votre site (ou de vos sites dans le cas d’une configuration multisite) et vos membres : je veux parler du composant de “site tracking”.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step01 300x173

Commençons par activer ces 2 composants. Pour cela il suffit de se rendre de nouveau dans l’interface d’administration de WordPress et plus particulièrement dans les réglages BuddyPress. Au niveau de l’onglet “Composants”, nous allons activer “Tous les flux d’activités” et “Traçage du blog”.

Alors que ce dernier ne nécessite pas de page WordPress, les activités, elles, en ont besoin. Nous avons donc à nous occuper de cette étape afin de terminer cette nouvelle configuration.

 

Les activites: tout le dynamisme de votre site résumé dans un un seul endroit

Suite à cette activation, BuddyPress nous indique qu’il est nécessaire d’associer le composant des activités à une page WordPress. Il s’agit donc de créer une nouvelle page que nous appellerons “Activités” avant de revenir dans les réglages BuddyPress, au niveau de l’onglet “Pages” pour effectivement procéder à cette association.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step02 300x197

Sitôt fait, voyons comment a évolué notre communauté.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step03 300x214

D’abord, la WP Admin Bar contient désormais une nouvelle navigation dédiée aux activités qui permet de rapidement accéder à ses différentes composantes : nos mentions publiques, notre activité personnelle, nos activités favorites, celles de nos amis et celles de nos groupes. Cela se matérialisera également par une modification de l’organisation des pages de profil des membres et des groupes. Nous y revenons dans un instant.

Ensuite, notre page WordPress “Activités” affiche un formulaire pour permettre à nos membres de publier de courtes news, 4 onglets permettent de sélectionner toutes les activités publiques, les activités de nos amis, de nos groupes ou encore nos mentions et une liste déroulante permet de filtrer ces dernières selon leur type.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step04 300x225

Sur la partie gauche de cette illustration, les pages d’accueil publiques des membres et des groupes affichaient jusqu’à présent respectivement le profil public du membre et la liste des membres du groupe. Depuis que nous avons activé les activités, une page les listant les a remplacé.

Inaugurons ce nouvel environnement en publiant depuis la page principale des activités une mise à jour. Vous constaterez d’abord que tout le fonctionnement de cet environnement repose sur l’utilisation d’Ajax pour ajouter en dynamisme. Dés publication, l’activité apparaît sous les 4 onglets.

En tant que créateur de l’activité, je dispose de 3 boutons d’action pour éventuellement commenter cette activité, la mettre en favoris ou la supprimer. En réalité les deux premières actions seraient plutôt réservées aux autres membres même si parfois on est tellement fier de ce qu’on écrit qu’on pourrait être tenté de se commenter pour se féliciter ou encore se garder l’activité en favoris ;)

L’ administrateur du blog est le seul à pouvoir supprimer l’activité des autres membres. Au sein d’un groupe, seul son administrateur a la capacité de supprimer les activités des membres du groupe.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step05 300x259

Ainsi le membre WP Formation ne peut que commenter ou mettre en favoris mon activité. S’agissant de cette dernière action, sitôt le bouton correspondant cliqué, un nouvel onglet est ajouté à la navigation principale des activités pour permettre à WP Formation d’accéder plus rapidement à ses activités préférées.

Le nombre à côté de chacun des onglets indique (de gauche à droite) le nombre de membres de la communauté, le nombre des amis du membre, le nombre de groupes dont il fait partie et le nombre d’activités mises en favoris.

WP Formation peut également avoir envie de commenter l’activité, c’est ce que nous illustrons ci-dessous.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step06 300x221

 

En cliquant sur le bouton commentaire, un formulaire apparaît pour accueillir sa réaction et dés qu’il valide son commentaire, il s’affiche sous l’activité et est à son tour “commentable”. Ainsi nos membres pourrons démarrer et suivre le fil de leurs conversations directement depuis le mur des activités globales du site. Enfin par défaut, si une activité est commentée, alors son auteur est averti par une notification email.

A l’instar de Twitter, il est également possible de mentionner publiquement un utilisateur en précédant son nom d’utilisateur (ou login WordPress ou terminaison de l’url de sa page de profil BuddyPress) d’une arobase, par exemple @betatest1.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step07 300x206

 

Si je me rends sur le profil de WP Formation, je m’aperçois que sous son nom, son nom d’utilisateur précédé de l’arobase est affiché. A gauche du bouton pour envoyer un message privé il y a également un bouton me permettant de directement être redirigé sur le formulaire de création d’activité, lequel sera initialisé avec la mention  “@betatest1”.

Une fois l’activité publiée, ce nom d’utilisateur devient un lien pour accéder au profil de WP Formation et par défaut une notification email ainsi qu’une “screen notification” lui seront envoyées pour l’informer de cette nouvelle mention publique.

Jusqu’à présent, nous avons publié des “activités de profil”, en effet, par défaut les activités que nous publions depuis la page principale des activités sont avant tout publiées dans notre profil de membre.

Notons également que les évènements publics liés aux membres tels que l’inscription, la modification de leurs avatars, leurs mise en relation, etc.. font l’objet de mini activités au sein du mur global.

 

Les activites des groupes.

Aussi, à l’aide de la liste déroulante “Publier dans” du formulaire de création de la page principale des activités, nous pouvons choisir d’ajouter notre mise à jour dans un des groupes dont nous sommes membre.

Bien entendu, au sein de la page d’accueil du groupe, il est également possible de directement publier une activité depuis le formulaire prévu à cet effet. Les mises à jour des groupes publics seront reprises dans le mur d’activité globale qui recense toutes les activités publiques de la communauté.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step08 300x290

Dans un groupe privé ou masqué, je vous le donne en mille, elles seront réservées à leurs membres et ne seront donc pas reprises dans le flux global du blog.

 

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step09 300x295

On constate bien, dans l’illustration ci-dessus, que le flux global reprend bien l’activité de notre groupe public, mais pas celle de notre groupe privée. Pour visualiser l’activité du groupe privé, je dois soit me rendre dans le groupe, soit utiliser l’onglet “Mes groupes” de la page principale des activités.

De la même manière que les évènements du groupe sont tracés grâce à ce composant (création, adhésion d’un membre...), les forums de groupe en bénéficient également, dans la mesure où à chaque nouveau topic ou réponse à un topic, une activité est créée dans le mur du groupe et selon sa visibilité dans le mur global.

C’est la raison pour laquelle, j’intitule cette partie “tout le dynamisme de votre site résumé dans un seul endroit”, car en effet, grâce à ce composant on peut très vite prendre connaissance et accéder à tous les contenus publics du blog. Pour un “community manager”, c’est l’idéal pour suivre les discussions, les mises en relation, les créations de groupe, les sujets de forum.. Bref quasiment tout!!!

Pour revenir aux forums de groupe, je vous propose de nous intéresser à un exemple illustrant tout l’intérêt du composant “Activités”.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step10 300x258

 

WP Formation répond à un topic de betatest2. Dans sa réponse, il intègre une mention @betatest2. Suite à la publication de sa réponse, le mur d’activité du groupe intègre un résumé de cette dernière et les liens nécessaires pour y accéder (bien entendu!).

L’intérêt d’avoir ajouté cette mention, est que betatest2 sera informé de cette nouvelle réponse et pourra la retrouver directement dans son profil sous l’onglet mention de ses activités. Au niveau du mur global des activités, on retrouve cette activité de groupe sous l’onglet “Mes Groupes” et si toutefois le groupe est public, sous l’onglet “Tous les membres”.

Si vous regardez les boutons d’action des activités liées aux forums de groupe, vous remarquerez que, par défaut, il n’est pas possible de les commenter. En effet, il peut être perturbant de jongler entre les commentaires d’une activité de forum et les réponses à un topic du forum.

Toutefois, si vous voulez autoriser les commentaires dans les activités liées aux forums (ou aux articles et commentaires de blog), il s’agit de vous rendre dans l’interface d’administration de WordPress, au niveau des réglages BuddyPress sous l’onglet “Réglages” pour activer cette option..

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step11 300x174

 

 

Zoom sur d’autres fonctionnalites du composant

Si vous observez une activité de profil de plus près, vous constaterez qu’un lien reprenant la date de l’activité au format “human time diff” vous permet de zoomer sur cette dernière.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step12 300x165

 

Au tout début de cette partie, j’ai abordé le filtre par type d’activité. Il peut être intéressant de n’afficher que les mises à jour par exemple. L’avantage, c’est qu'une fois le filtre activé, il nous suit sur les différents environnements du blog.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step13 300x279

 

Si toutefois aucune activité ne correspond à notre filtre, un message nous invite à en changer.

Au sein de la page de profil du membre, ou depuis l’annuaire des membres, la dernière activité du membre est reprise.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step14 300x243

 

Au sein de l’administration WordPress, Le menu Activité vous permet de gérer vos activités afin d’éventuellement en marquer certaines comme spam, d’en supprimer ou d’en modifier d’autres ou encore de répondre directement à l’une d’entre elles depuis cet espace.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step15 300x157

 

Si toutefois, vous disposez d’un compte Akismet, sachez que BuddyPress en tirera profit pour vous simplifier la tâche dans cette modération.

Enfin, depuis sa page de profil, le membre peut ajuster ses réglages quant aux notifications email qui lui sont envoyées en cas de mention ou commentaire à l’une de ses activités.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step16 300x88

 

 

Site Tracking: le contenu de votre blog integre les activites

L’intérêt de ce composant réside dans le fait qu’il permet à vos membres de garder le contact avec les contenus principaux de votre blog directement depuis le mur des activités globales de la communauté.

Il est à l’écoute de deux types d’évènement : la publication d’un nouvel article de blog ainsi que la publication d’un nouveau commentaire à l’un des articles de votre blog. S’il “entend” que l’une de ces deux opérations s’est réalisée, alors il automatisera la publication d’une activité reprenant un résumé de l’article ou du commentaire ainsi que les liens menant à ces derniers.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step17 300x210

 

Dans le cas d’un article de blog, si toutefois cet article intègre des éléments média, la première image trouvée illustrera le résumé de l’activité générée par le composant de “Tracking”. Comme nous l’avons vu plus tôt pour le cas des forums. Afin d’éviter d’avoir à jongler entre commentaires d’activité et ceux de l’article de blog, les activités générées ne sont pas “commentables” par défaut.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step18 296x300

 

De la même manière, les commentaires aux articles du blog font donc l’objet d’activités non “commentables” par défaut, notons que les membres peuvent attirer l’attention d’un ou plusieurs utilisateurs en les mentionnant publiquement dans leur commentaire.

Pour terminer, BuddyPress peut également être activé au niveau d’un réseau de blogs (configuration multisite de WordPress). Dans ce cas, une nouvelle page associera la liste des blogs “publics” du réseau à une page WordPress du site principal du réseau.

Si toutefois un des blog du réseau ne souhaite pas que ses articles ou commentaires fassent l’objet d’activités dans le mur global du site principal, son administrateur peut se rendre dans ses réglages de lecture pour désactiver sa visibilté des moteurs de recherche.

BuddyPress s’appuiera sur ce réglage pour ne plus écouter le site en question et le sortir de la liste des blogs “publics” du réseau.

 BuddyPress en mode pas à pas – Episode 4 wpformation tuto4 step19 300x200

 

Voilà qui “presqu’achève” notre découverte en mode pas à pas du plugin BuddyPress. Au cours de ces 4 premiers épisodes, nous avons vu qu’il s’agissait en fait d’un ensemble de composants modulables (et activables selon le besoin de l’administrateur) orientés vers la gestion des interactions entre les membres qui compose le blog devenu “communauté”.

En activant BuddyPress sur votre blog, vous associez donc beaucoup plus vos fidèles lecteurs (devenus membres) à son contenu et son dynamisme notamment à l’aide du composant Activités. Car en effet, les différentes activités générées accélèrent le rythme de renouvellement du contenu de votre blog.

 

Conclusion de l'episode 4

Depuis ce vendredi 15 février 2013 (c’est devenu une date importante!!), John James Jacoby, l’un des leaders de BuddyPress a annoncé la mise à disposition de la première bêta de la prochaine version majeure du plugin : la 1.7.

Aussi, je vous propose d’aborder les évolutions introduites par cette dernière lors de notre prochain tutoriel, avec en vedette : la compatibilité avec tout thème WordPress !

 

 BuddyPress en mode pas à pas – Episode 4

A propos de l’auteur

iMath : Amoureux de WordPress et de BuddyPress depuis 2010, je m'amuse à créer des extensions pour ces deux fabuleux outils. Vous pouvez me retrouver sur mon site iMathi.eu, sur Twitter ou Google+.

11 commentaires

  1. Salut !

    Bon, je suis dedans, et jusqu'au cou ((:
    J'ai acheté un thème spécial pour BP, installé BP, importer mon acien forum vers bbpress.
    Jusque là, tout va bien.
    Et là, c'est le drame ! :p
    Je suis la tête dans la doc du thème, de bp, bref, c'est la pagaille, mais c'est rigolo !

  2. Bonjour,

    C'est en forgeant qu'on devient... etc ;)
    Pour le thème c'est spécifique, en revanche pour BP, il y a un excellent site http://bp-fr.net/

  3. @ Stéphane, on en rediscute en privé à l'occase :)

    Par contre, pour terminer de spoiler mon dernier tutoriel, étant donné que la 1.7 est en approche, si tu démarre ton projet, je te conseille de l'utiliser (si ce n'est pas le cas) ça t'ouvrira de nouvelles perspectives en terme de thème : la quasi intégralité du WordPress repo et des premiums WordPress thèmes ;)

    bp-fr.net est effectivement un bon moyen de trouver de l'aide, j'essaye d'y aller régulièrement et Dan est un des tous premiers contributeurs de BuddyPress.

    BuddyPressez bien : cette année est l'année BuddyPress !

  4. @imath : Yop ! Je te confirme, y'a un bug dans l'saucisson ! Et pas un petit, ça merdouille dans l'intégration de bbpress avec les groupes... Et visiblement, je ne suis pas tout seul (:

  5. Effectivement, je me suis aperçu hier qu'avec la version 2.2.4, le groupe n'intégrait pas la navigation forum suite à sa création malgre que l'option ait été activée au moment de sa création. Il s'agit alors d'aller dans l'onglet Admin du Groupe une fois créé pour activer de nouveau le forum du groupe. Toutefois, c'est la navigation qui ne se crée pas car l'association entre le groupe et le forum s'effectue bien.
    Du coup, comme bbPress va prochainement sortir une version 2.3 (beta 2 dispo ici http://bbpress.org/blog/2013/02/bbpress-2-3-beta-2/ ) j'ai testé et c'est réparé.
    En plus je me suis aperçu que l'éditeur de topic contenait désormais une icône pour ajouter des images ;)
    Voilà une bien belle discussion d'early adopters (BP 1.7-beta1 et bbP 2.3)

  6. C'est plus pire que ça en fait.
    Tu peux créer ton groupe, un forum, le tout est lié. pas de soucis.
    mais pas moyen de poster un seul topic dans le forum, génial non :p

    Ensuite, aucune explication pour mapper un forum existant avec un groupe, avec ça, t'es pas arrivé.

    Le couple bp 1.7 / bbp 2.2.x résou cela en partie.

  7. @Stéphane @iMath,
    du reste puisqu'on en parle, avez-vous contacté l'auteur du thème "codé avec les pieds" ;)

  8. oué, j'ai mis un commentaire sur TF pour lui dire que son truc ne fonctionnait pas avec bp 1.7 (:
    Au passage, je l'ai pourris ! Joli css, mais code de merde.

  9. Hello !
    Eh bien moi ! Je voulais tout simplement dire Merci !

    Je viens de passer une grande partie de mon après-midi (un peu ce soir), à suivre les 4 étapes, tout en mettant les étapes en action, sur mon domaine de teste.
    Et c’est tout simplement Top Délire Super Génial.
    Du coup quelques modif s’imposent sur mon projet, mais en même temps plein de nouvelles idées en perspective grâce à Buddypress.
    Si vous le souhaitez ! Je vous inviterai sur la version beta dans quelques semaines!

    Encore un Grand Merci à @imath, et @Fabrice pour ce mode pas-à-pas.

  10. Merci pour le tutoriel et pour les fonctions !!

  11. Bonjour, et merci pour ce tuto très appréciable !
    Je me permet de revenir sur le dernier point abordé (en multisite) puisqu'il va être important pour mon futur site.
    Comme sur votre dernier "imprim écran", lorsqu'une personne est active sur un blog du réseau, on aperçois une activité. Malheureusement, elle est trop succincte à mon goût.
    Pour reprendre votre exemple :
    "Buddy16 : "actif il y a 2 mois et 2 semaines" "sur le blog blabla (non visible sur l'imprim ecran mais déjà existant)"
    Est-il possible d'avoir l'activité plus précise comme par exemple :
    "Buddy16 : "a laissé le commentaire blabla sur l'article blabla il y a 2 mois et 2 semaines" "sur le blog blabla (non visible sur l'imprim ecran mais déjà existant)".

    J'espère être compréhensible!

Et si vous laissiez votre commentaire ?



Recherches liées : " bouton répondre buddypress"