here comes… BP Code Snippets

Publié le

par

J’ai dernièrement eu l’occasion de découvrir plus en détail Buddypress, cet excellent plugin de wordpress qui ajoute un réseau social à votre blog. Je me suis d’abord essayer au développement d’un composant pour gérer l’open innovation (normal, c’est un peu mon métier) et puis dans le cadre de mon nouveau projet qui consiste à utiliser wordpress comme plateforme de social coding, j’ai enchaîné sur ce que j’ai appelé BP Code Snippets.

Son rôle : permettre aux membres d’un groupe de partager des morceaux de code source.

Si pour le premier, sa trop forte personnalisation par rapport à mon entreprise ne me permettait pas de le partager, j’ai conçu le deuxième pour être utilisé de manière beaucoup plus générique. Vous lui trouverez peut-être un intérêt 😉

Installation de la bête

Une fois téléchargé, déposez le dossier bp-code-snippets dans le répertoire /wp-content/plugins/. Activez le plugin et c’est prêt! Enfin presque..

Réglages des options de BP Code Snippets

Depuis l’admin de wordpress et rattaché au menu Buddypress, vous retrouvez l’interface pour personnaliser le comportement du composant. Par défaut, il est activé pour les groupes. Si vous le désactivez, il ne sera plus disponible pour les groupes (le contraire aurait été surprenant!). Plus intéressant, vous pouvez personnaliser le thème du syntax highlighter.

Activation pour un groupe Buddypress

Concernant les groupes existants, il s’agira de se diriger dans un premier temps dans l’admin du groupe afin d’activer le composant. En effet, tous les groupes ne sont pas forcément intéressé par le partage de codes source! Lorsqu’on crée un nouveau groupe, une nouvelle étape « Snippets » est ajoutée qui se comporte de la même manière.

Réglages des langages dans les settings du groupe

Vous retrouvez dans l’admin un lien « Snippets » à partir duquel, vous allez pourvoir choisir les languages sur lesquels vous voulez échanger et par la même occasion activer le composant pour le groupe.

La liste des codes!

Au début, vous allez être accueilli par un gentil « y a pas de codes, ajoutes en un! ». Pour cela, il suffit de cliquer sur le lien « Ajouter un code »… Et au fur et à mesure la liste va s’étoffer.. Du coup faut paginer sinon ça devient illisible!

Le loop des snippets

Autrement, si vous n’avez pas envie d’écumer les x pages, vous pouvez utiliser le mini moteur de recherche ou la liste des catégories (laquelle s’affiche ssi count(cat)>1).

Juste à côté du lien qui ouvre le snippet, j’ai mis des liens pour éditer ou supprimer le code en question.. Faut bien modérer 🙂 Alors, les admins et les modérateurs du groupe pourront supprimer et éditer à tout moment. En revanche l’auteur du code ne pourra le faire que jusqu’au dépôt du premier commentaire.. sinon c pas du jeu !

Le single…

Ben c’est là qu’on voit le contenu intégral et qu’on peut commenter…

Le template single du snippet

Bien entendu, pagination des commentaires mais aussi possibilité d’ajouter du code source du même language que le « post ». Pour cela [pre]l’entourer[/pre]. Les Admins et Mods du groupe peuvent éventuellement supprimer un commentaire indésirable.

I almost forgot : it’s available in english 🙂 btw sorry if i made mistakes..


le 25/03/2011 : BP Code Snippets version 1.3.3

  • adaptation à WP 3.1 multi (network admin menu)

le 05/01/2011 : BP Code Snippets version 1.3.2

  • correction du bug lié au filter appliqué au moment de l’enregistrement des activités BuddyPress.

le 06/11/2010 : La version 1.3.1 est disponible 🙂

  • Tout est dans la vidéo et en franglish 🙂
  • Ajouter des codes sans passer par un enregistrement depuis un groupe..
  • NB : les backticks ont été préférés pour l’ajout de code sans passer par un groupe dans la mesure où lorsque BP enregistre une activité il supprime tout ce qui est entre [].
  • Intégration possible dans les pages
  • Warning ! : Un bug dans la Group API de BuddyPress 1.2.6 empêche le bon fonctionnement de l’extension. Selon Paul Gibbs, Développeur BuddyPress, la version 1.2.7 corrigera ce comportement. En attendant, BP Code Snippets fonctionne très bien sur la version 1.2.5.2 de BuddyPress.

le 26/09/2010 : BP Code Snippets version 1.3 is live !!

  • Il est désormais possible d’ajouter des Snippets directement dans un article de blog (voir la vidéo ci-dessus)
  • Il est également possible d’ajouter des Snippets dans un post de forum !!
  • Si vous animez un réseau de blog, vos blogs en profiteront également
  • Pour activer ces deux nouvelles fonctionnalités, il suffit de se rendre dans l’admin WordPress -menu BuddyPress-sous menu Réglages Code Snippets.
  • Etant donné qu’Erlend (cf commentaires plus bas) a inspiré ces nouvelles fonctionnalités, j’ai baptisé cette version « Erlend » 😉

le 04/08/2010 : BP Code Snippets version 1.2.1

  • correction du bug lié à l’activation du répertoire principal et de sa navigation

le 03/08/2010 : BP Code Snippets version 1.2

  1. Dans la page d’accueil des groupes, il est possible d’afficher quelques stats si toutefois votre thème prévoit l’affichage du tag « bp_custom_group_boxes() ». Plus d’infos ici.
  2. Des améliorations ont été apportées au widget afin que son contenu s’adapte si la page en cours est un groupe afin d’afficher les snippets du groupe uniquement.
  3. Le titre du widget est désormais personnalisable
  4. Ajout d’un Répertoire de Snippets. Dans le menu principal, un onglet « Snippets » permet d’afficher tous les codes sources ayant été posté dans un groupe public.
  5. Ajout des feeds RSS pour le répertoire principal, pour les groupes, la page membre ainsi que pour suivre les commentaires d’un snippet partagé.
  6. correction d’un bug de mise à jour du nombre des commentaires

le 28/07/2010 : BP Code Snippets version 1.1

  1. Ajout au niveau de la zone membres BuddyPress d’une vue présentant tous les codes que l’utilisateur affiché a rédigé.
  2. Un widget peut être ajouté à la sidebar (ou autre zone « widgetized ») pour afficher les derniers codes sources déposés
  3. de nouveaux langages sont supportés (Java, Java FX, Perl, Python, Ruby, ColdFusion, AppleScript, CPP, CSharp, VB, Bash)

41 réponses à “here comes… BP Code Snippets”

  1. […] Ce billet était mentionné sur Twitter par imath, tom_plays. tom_plays a dit: Insert code snippets in #buddypress plugin http://bit.ly/d7OguB by @imath #owni […]

  2. Avatar de normen
    normen

    Hey, I checked out your plugin and I really like it.
    Since I mainly want to use it for java I had to tweak it a bit, supporting all languages that the highlighter supports would be nice. Also, I had problems with the which only used half of the horizontal space when displaying the code, so I removed the class parameter.
    Great work, hope to see an update soon 😉
    Cheers,
    Normen

  3. Avatar de normen
    normen

    Sry, I used tags in the previous post :rolleyes: I wanted to say I had problems with the [div class= »code_in_content »] on the view page..

    Normen

    1. Avatar de imath

      Hi Normen,
      thanks a lot for your comments and suggestions. I’m actually working on an update that i will soon add. BP Code Snippets will be able to :

      Display all the languages that the highlighter supports
      Display all the snippets written by a member on his member area
      Add a widget for the sidebar in order to display the latest or most commented snippets
      Add a way to simply customise the way the html is displayed by using template so it will be easier to override it from the theme directory

      I’m really glad you like my plugin. Have a nice time playing with it 😉

  4. Avatar de normen
    normen

    Cool, looking forward to that, thanks for the quick reply!

    1. Avatar de imath

      ur welcome 😉
      Just added version 1.1 into the WordPress directory.. You will be able to update soon i guess.

  5. Avatar de Rob Davidson
    Rob Davidson

    Hi

    thankyou for this excellent plugin, been playing around with it today.

    Couple of ideas, do you plan to offer ‘Recently commented’ option and editable title for the widgets?

    I plan to try to add an extra field to the snippets – source link/url field. Any pointers on how easy this would be to achieve? I’m not a programmer but am comfortable copy n pasting!

    Once again, thankyou for a great plugin.

    cheers Rob

    1. Avatar de imath

      Hi Rob,
      Thank you for your comment, i’m really happy you like the plugin !! I’m actually working on a new version of it that will reply to one of your need !
      Version 1.2 will add the widget an editable title. As you can see in this pic
      I will add the ‘Recenty Commented’ option to it as well.. no big deal 🙂
      In order to make it possible add an extra field to the snippet, i need to do it the right way by adding a new table to store it. So i guess i will do it later (for version 1.3 !) Meanwhile, you can tweak the plugin by adding a bit of javascript :
      Snapshot of the snippet 😉
      this is the code so you can paste it 🙂
      // 1st in add-code-snippets.php under the js tag on line 71, add this function :
      function addUrl(){
      url = prompt(« Please paste the source url of your snippet, then click OK. »);
      oldPurpose = jQuery(« #snippet_purpose »).val();
      newPurpose = ‘Open Source Urln’+oldPurpose;
      jQuery(« #snippet_purpose »).val(newPurpose);
      }

      /* 2nd still in add-code-snippets, somewhere in the form,
      i advise you under the textarea snippet_purpose,
      you can add a button like this :
      <input type= »button » id= »addsrcurl » value= »Please add the link to your source »
      onclick= »addUrl() »/>
      onclick will call your function*/

      Have a nice time playing with the plugin 🙂

  6. […] Ce billet était mentionné sur Twitter par imath, tom_plays. tom_plays a dit: BuddyPress code snippets v1.2 plugin by @imath http://bit.ly/bpCSv12 BP congrats ! […]

  7. Avatar de Rob Davidson
    Rob Davidson

    Wow! Thankyou for the jQuery code. Much appreciated.

    rob

    1. Avatar de imath

      you’re welcome 😉

  8. Avatar de Erlend Sogge Heggen

    Hey Imath,

    I come from the same project as Normen, who you’ve exchanged a couple messages with earlier.

    We’ve been playing with your plugin a lot on our new community site jmonkeyengine.org, and we’re loving it! We want encourage site-wide use of the plugin, and an idea came up: Why not enable embedding of code snippets in to all sorts of post types, even forum posts?

    Example: I want to reply to someone’s post with a generally useful code snippet, that would also be well suited in a snippets directory. Clicking the « Embed Code » button above the reply box, a window opens that lets me decide which snippet directory I want to post this in, and a space to paste the code into.

    FollowUp: I want to post that same code snippet again, in a post this time. All I have to do is find it in the directory (maybe it’s even been updated since last time, thanks to feedback) and based on the URL or maybe some code provided on the snippet page, using embed tags I can easily insert this snippet into my post. Whenever the snippet is updated, so will the embedded code inside of the forum and blog post.

    Please let me know what you think 🙂

    1. Avatar de imath

      hey Erlend,
      First of all : thank you for the interest you and Normen showed for this plugin, and i’m really happy to read that you like it 🙂
      Your 2 ideas are very interesting and really worth spending some time to work on it.
      First the regular blog post : i think the best way to achieve that is to add a button on the media bar (just above the editor area) in order to load a thickbox window in order to select the snippet we want to embed. Then when the writer of the blog post selects the snippet desired, it adds a shortcode with the id of the snippet.
      I think the display of the snippet can only be in the single.php view (avoiding the loading of different js scripts to render the highlight of the chosen type of language). In other views the shortcode would have to be replaced by the permalink to the single.
      Then the forum posts/replies : i dont know enough how bbPress works to give you an answer.. But i will study it.

      So, i guess i will work on an update of the plugin 🙂
      TY 4 your comment.

  9. Avatar de Erlend Sogge Heggen

    Fantastic! When you’ve got a beta in need of testing, you have our e-mails 😉

  10. Avatar de Erlend Sogge Heggen

    First of all, thank you so much for ability to insert code snippets into posts. We just need to ease users into using BuddyPress groups as a whole, and not just as boards, then this plugin will be used to its full potential.

    Unfortunately we have a problem now. Since many users are just posting small pieces of code that don’t need to be stored as snippets (they’d be deprecated within a week anyhow), we rely on the « Syntax Highlighter Evolved » plugin with a custom v3 script update and a small tweak applied for bbPress, in order to allow code pasting in forum replies. Here’s the tweak:
    http://wordpress.org/support/topic/plugin-syntaxhighlighter-evolved-syntax-highlight-for-buddypress-forum-posts?replies=14#post-1700643

    This has caused some conflicts. We would much rather rely on a single plugin for all of our code highlighting needs, so here’s the big request:
    We want to let users paste their code, without having to store new code snippets, into their posts&replies. It might be a lot to ask, but I was hoping since you’ve already integrated Alex Gorbatchev’s script so well with WordPress, this last part might only be a matter of another few lines of code, possibly borrowed straight from Syntax Highlighter Evolved or Compress:
    http://wordpress.org/extend/plugins/syntax-highlighter-compress/

    Maybe one of the two plugin developers would be interested in a simple collaboration to maintain the plugin.

  11. Avatar de imath

    Hi Erlend,

    Well in order to highlight the code (by adding the right class) and load only the necessary js files, you need to know what type of code people pasted.
    So from my point of view it can’t be a simple copy/paste.
    I think a modal window need to be open in order to select the type of code, then paste the code in a textarea in this modal window. Then on submit the reply/post box must be filled with something like [snippet type= »js »]the js code pasted[/snippet].
    So i guess i’ll try this for a new version of the plugin 😉

  12. […] here comes… BP Code Snippets Sur le même sujet […]

  13. Avatar de anib
    anib

    Salut Imath

    J’ia la dernière version de buddypress fonctionnant sous wordpress 3.0, j’ai telechargé votre plugin mais malheureusement il altère une fonction de buddypress reliée aux activity streams, par exemple si j’active votre plugin et ke je fais un update de mon profil, l’update ne s’affiche pas, si je desactive ça remarche.

    Peux tu stp me dire ce qu’il faut faire pour corriger ce bug, votre plugin est tres pratique je veux l’utiliser sur mon site

    merci

  14. Avatar de imath

    Salut @anib,

    Difficile à diagnostiquer.. Je viens de faire des tests chez moi et pas de problème particulier..

    Mais bon, tu peux toujours désactiver les fonctions responsables du filtre des activités ou désactiver la possibilité d’ajouter des snippets dans les posts et forums depuis Code Snippets Manager au choix…

    si tu veux désactiver les fonctions en questions, il s’agit de commenter les lignes 386 à 395 soit :

    /*if(function_exists(get_blog_option)){
    if(get_blog_option(‘1′,’cs-ep-enable’) || get_blog_option(‘1′,’cs-ef-enable’)){
    add_filter(‘bp_activity_content_before_save’, ‘bp_code_snippets_filter_activity_content_before_save’, 10, 2);
    }
    }
    else{
    if(get_option(‘cs-ep-enable’) || get_option(‘cs-ef-enable’)){
    add_filter(‘bp_activity_content_before_save’, ‘bp_code_snippets_filter_activity_content_before_save’, 10, 2);
    }
    }
    */
    Vérifies que tu as la dernière version de BP code snippets, car il me semble que j’avais corrigé ce bug..
    A+

  15. Avatar de 4ella.com

    Hello I use a Snippets in a buddypress , can anybody tell me how can I use snippets only in 1 group and how can I exclude step for creating snippets from other groups creation?

  16. Avatar de Rad
    Rad

    Felicitations pour ce plugin.

    Je l’ai essayé cependant si des visiteurs ne font pas encore partie de la communaute ils peuvent pas voir les codes sources ! Y a til un moyen de rendre ces codes accessibles meme pour les non membres ?

    Bravo pour ce travail

    1. Avatar de imath

      Bonjour Rad,
      Pour activer les liens pour les non membres du ‘snippet public directory’, il suffit d’éditer home-code-snippets.php comme c’est expliqué sur le forum BuddyPress du Plugin :
      http://buddypress.org/community/groups/bp-code-snippets/forum/topic/group-api-trouble-since-buddypress-version-1-2-6/#post-81513

  17. Avatar de rad
    rad

    Salut IMATH

    Je voudrais mettre la page des snippets (public snippets directory) en homepage sur mon buddypress pour cela je suis alle voir Settings->reading mais ya pas la page myurl.com/snippets

    Pouvez vous suggerer un moyen de le faire ?

    Merci

    1. Avatar de imath

      Pour mettre les snippets en page d’accueil, tu peux éventuellement faire une redirection vers la page des snippets en utilisant cette fonction dans le script functions.php du thème que tu as activé pour ton blog :

      function bp_code_snippets_as_homepage()
      {
      global $bp;

      if($_SERVER[‘REQUEST_URI’]==’/’)
      {
      $home_page = get_bloginfo(‘siteurl’) . ‘/snippets/’;
      wp_redirect( $home_page );
      }
      }
      add_filter(‘get_header’,’bp_code_snippets_as_homepage’,1);

  18. Avatar de Rad
    Rad

    I am running a website where users aree for a big part R programmers, it could be useful and nice to have R langage even with no highlighting in the list of langages, cheers, Rad

  19. Avatar de Rad
    Rad

    Is it possible to have a custom code that once inserted in a post or a page list the last 10 or 20 source codes or snippets ? but in a way different than the widget, I mean a page that looks really similar to what we can see displaying http://url.com/snippets url

    Rad

  20. Avatar de Abu Alhaytham

    hi there,

    plz i found this error

    Fatal error: Call to undefined function bp_is_group_forum() in /public_html/wordpress/wp-content/plugins/bp-code-snippets/bp-code-snippets.php on line 578

    any way ??

    1. Avatar de imath

      hi,

      bp_is_group_forum() is a BuddyPress function located in /wp-content/plugins/buddypress/bp-core/bp-core-templatetags.php.

      line 578 to 585 is an if statement to load javascript if the group forum or forum is displayed, if you don’t want to use the function to add snippets in forum, you can delete these lines.

  21. Avatar de imath

    Rad,

    S’agissant du language « R », comme j’utilise le js d’Alex et qu’il y ait pas, pas de coloration syntaxique et donc pas dans la liste. Dsl.

    S’agissant de ton 2e commentaire en anglais, je ne saisis pas trop où tu veux en venir.. Une fois un snippet inséré dans un post lister les 10 à 20 derniers snippets ?? Merci de préciser.

    A+

  22. Avatar de Rad
    Rad

    Merci pour tes commentaires,

    Au fait pour mon deuxieme probleme, supposons ke lon a nomdedomaine.com et linstallation de votre plugin donne nomdedomaine.com/snippets la page index de votre plugin je veux la repliquer et linserer ds une page que je cree ds wordpress, cette derniere va etre utilisee que homepage ds mon theme vu kil ya pas possibilite dintegrer votre /snippets dans settings->reading de wordpress.

    Est il possible de faire ca ?

    1. Avatar de imath

      Salut Rad,

      Tu peux éventuellement faire comme c’est expliqué ici :
      http://pastebin.com/y3vw7Kbh

      A+

  23. Avatar de Rad
    Rad

    Merci IMATH

    J’ai suivi les recommandations mais le CSS est totalement chamboule, il doit y avoir un bug kke part mais j.arrive pas a mettre la main dessus, un coup de main ?

    1. Avatar de imath

      url du site en question ?

  24. Avatar de Rad
    Rad

    URL du site envoyee en prive sur FB
    Merci

  25. Avatar de Rad
    Rad

    Salut

    j’ai eu quelques problemes avec mon buddypress pour l’update des profis et les reponses a des profils d’autres utilisateurs, et en pistant la possibilite que ca soit un conflit avec un plugin j’ai trouve que ca venait de BP code snippets, pour avoir le coeur net, jai tout installe en localhost, et c confirme, ca vient de BP code snippets, en message d’erreur j’ai eu cela :

    Warning: Parameter 2 to bp_code_snippets_filter_activity_content_before_save() expected to be a reference, value given in C:Program Files (x86)EasyPHP-5.3.6.1wwwwordpress-3.2.1wordpresswp-includesplugin.php on line 170

    Y a t-il une solution a ce message d’erreur ?

    Merci

  26. Avatar de Rad
    Rad

    bug fixed
    Dans la fonction mentionne il ya un ‘&’ a enlever

    Rad

    1. Avatar de imath

      Ok 😉

      étrange malgré tout, car pour moi sans enlever le &, ça fonctionne nickel chrome (WP 3.2.1 et BP 1.2.9 sur env de dev MAMP Pro)

      A+

  27. Avatar de Erlend Sogge Heggen

    Hi. I’ve encountered some bugs in the latest version of your plugin. I reported them on the WordPress forum:
    http://wordpress.org/support/topic/plugin-bp-code-snippets-partially-broken-in-buddypress-15?replies=2

    Could you kindly take a look?

    1. Avatar de imath

      hi, i know it’s not working on BP 1.5. I gave a look on it: my main problem is on managing activities once a forum or blog post is submitted. I will try to fix it as soon as i find some time.. sorry for that.