J'adore MyBlogLog mais tant que cela a du sens, sinon cela m'énerve grave.

Il y a quelques temps, j'ai supprimé des contacts de ma communauté : j'estime qu'un contact, c'est quelqu'un avec qui on est en contact.

Idem pour les communautés et là, cela a commencé à merder, je m'explique :

Je me suis retiré de plusieurs communautés. Sans que je sache pourquoi, dans certaines j'étais bien retiré, dans d'autres j'étais toujours présent quand je retournais voir les communautés en question. Et je ne faisais pas d'erreur, je ne confondais pas avec les contacts, je ne peux pas agir sur ce que les autres indiquent comme contacts.

Bref, ensuite je me retrouvais avec encore 108 "members" dans ma communauté alors qu'il y en a un paquet qui n'en font plus partie, ne sont là que pour avoir un nom en plus dans la leur, j'en passe et des meilleures.

J'ai donc viré l'auteur de mon ancienne communauté et pouf, je suis parti (sauf qu'en pratique, elle existe toujours dans MyBlogLog mais bon...). Si vous avez mon ancien avatar MyBlogLog (1loup) dans vos contacts et/ou mon ancienne communauté (unloupblesse) , vous pouvez les effacez si vous le voulez, j'ai fait place net et tout remis à zéro.

Mon "gravatar", pour l'instant, reste le même qu'avant mais mes "MyBlogLog" changent.

Ma communauté (ULB) et mon avatar "MyBlogLog" (ULB) sont maintenant symbolisés de cette façon :

J'avais aussi noté que certains visiteurs n'apparaissaient pas par moment et si parfois, sans que je comprenne pourquoi ! A suivre...

Bon, puis tant que j'y étais, j'ai revu les sidebarres : j'ai viré des trucs qui ne servent pas à grand chose et que j'ai remisé dans mon "bordel" et réorganisé un peu tout cela.

C'est reparti pour un tour...

Voici mon premier "plugin" pour WordPress, enfin, plugin, c'est un bien grand mot, tout au plus un "filtre" mais comme tout le monde à l'air d'appeler cela un plugin...

Je me suis inspiré du WordPress Video Plugin d'Olivier Wunder.

Ce filtre intègre donc une playlist Deezer, une playlist imeem (ou un titre) dans WordPress, de façon simple, avec un code valide XHTML et accessible.

La syntaxe est la suivante :

- Pour une playlist Deezer [deezer + path + id + texte alternatif],
par exemple [deezer + 2548914 + 328169 + BestOf Editors (en flash)] affichera la playlist Deezer ayant un path=2548914, un id=328169 et rajoutera le texte alternatif "BestOf Editors (en flash)".

- Pour une playlist imeem [Pimeem + id + texte alternatif],
par exemple [Pimeem + VHIDyftK8k + Pardonne moi (Mylene Farmer/Benny Benassi)-Crazy (Seal)-The world is mine (David Guetta) (en flash)] affichera la playlist imeem ayant un id=VHIDyftK8k et rajoutera le texte alternatif "Pardonne moi (Mylene Farmer/Benny Benassi)-Crazy (Seal)-The world is mine (David Guetta) (en flash)".

- Pour un titre unique imeem [Mimeem + id + texte alternatif],
par exemple [Mimeem + akKQVny8q2 + Zazie - Je suis un homme (en flash)] affichera le titre ayant un id=akKQVny8q2 et rajoutera le texte alternatif "Zazie - Je suis un homme (en flash)".

Le code est donc à mettre entre crochet et chaque paramètre est séparé du suivant par un espace, le signe plus et un autre espace.

Le premier paramètre est le type de playlist (deezer, Pimeem, Mimeem avec P pour playlist, M pour monotitre).

Le dernier paramètre, le texte alternatif, ne doit pas contenir de caractères accentués (é, è, à, ...), il sert aux personnes n'ayant pas le plugin flash d'installé, aux aveugles, aux moteurs de recherches et devrait contenir une très courte description du contenu.

Vous pouvez allez voir sur mon blog de test WordPress, un billet contenant les 3 codes et leur rendu.

Je n'ai pas testé ce plugin ailleurs que sur le WordPress français 2.3.1 que j'ai installé, je ne sais donc pas s'il fonctionne avec d'autres configurations, il est livré tel quel, point !

Vous pouvez télécharger l'archive zip, décompactez là, uploadez le fichier di.php dans le dossier wordpress/wp-content/plugins, ensuite activez-le dans votre menu Plugins et c'est tout.

Suis-je clair ?

Je vais essayer de vous montrer qu'il est possible d'intégrer un player Deezer / Blogmusik dans un billet de WordPress, malgré la présence de l'éditeur visuel qui casse la code et le tout passant la validation XHTML.

1 - Prérequis :

- Je ne suis pas un pro de WordPress, je fais cela pour aider, alors attention aux commentaires. Si vous êtes un pro de WordPress et que vous savez mieux faire que moi, commencez déjà par vous poser la question comment cela se fait que c'est à moi qu'on vienne demander de l'aide et pas à vous... Par contre, tout commentaire venant apporter sa pierre à l'édifice est le bienvenu.

- Dans Options / Ecriture (de votre WordPress), assurez-vous d'avoir décoché l'option "WordPress doit automatiquement corriger les balises XHTML non valides". Parce que si vous ne savez pas mettre vos "simples" balises XHTML valides et que vous comptez sur WordPress pour le faire à votre place, on n'est pas sortie de l'auberge ! D'ailleurs, dans ce cas, je ne sais même pas ce que vous faites ici à lire ce tutoriel, c'est pour vous du chinois, ne vous infligez pas ce supplice

2 - Afin de travailler sur du concret, je vais résoudre le problème de Jérôme du blog Playmobils Estropiés & Associés : intégration d'une playlist Deezer dont il m'a donné le code fourni par Deezer.

Le code non valide :

<div style="width:180px;height:236px;">
<object width="180" height="236">
<param name="movie" value=" http://www.deezer.com/embedded/widget.swf?path=2548914&lang=fr&autoplay=0&id=328169"></param>
<embed src=" http://www.deezer.com/embedded/widget.swf?path=2548914&lang=fr&autoplay=0&id=328169" type="application/x-shockwave-flash" width="180" height="220">
</embed>
</object>
</div>

En suivant le protocole que j'avais donné pour rendre un code Blogmusik valide XHTML, cela ne fonctionne pas, pourquoi ? (alors que cela fonctionne très bien avec DotClear 1 et DotClear 2)

Le code obtenu est pourtant valide XHTML :

<div style="text-align: center;">
<object type="application/x-shockwave-flash" data="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" width="180" height="220">
<param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" />
<p>Editors - BestOf (en flash)</p>
</object>
</div>

Parce que l'éditeur visuel de WordPress tente de modifier le code et le "casse" ! Je vais donc vous proposer plusieurs façon de faire et vous laisser choisir celle qui vous plait le mieux :

• a) Utiliser les propriétés du Doctype transitionnel - Intégration à l'aide d'une iframe

La plupart des thèmes sous WordPress ont un Doctype XHTML transitionnel et permettent donc l'utilisation des "iframe" (qu'il n'est pas possible d'utiliser lorsque l'on code en XHTML strict). En intégrant le code du player Deezer par iframe, l'éditeur visuel ne verra pas le code du player, n'y mettra pas son nez et ne le cassera pas, nananère !

Commencez donc par vérifier que votre Doctype est bien un transitionnel en vous positionnant sur l'une des pages de votre blog et en demandant à votre navigateur d'afficher le code source. La première ligne se doit d'être le Doctype, si cette ligne contient le mot "Transitional", c'est gagné, vous pouvez utiliser les "iframe". (Si vous préférez regarder les fichiers de votre thème, jetez un oeil du côté du header.php)

La manipulation que je vous propose est donc toute simple, copiez le code valide XHTML utilisé juste au-dessus dans un fichier que vous nommez par exemple "Deezer1.html". Uploadez-le dans un répertoire précis sur votre hébergement (je l'ai mis dans un répertoire /share/ de mon répertoire wordpress) et utilisez ce code que vous mettez dans votre billet :

<p style="text-align: center"><iframe src="http://votrenomdedomaine/share/Deezer1.html" class="deezer" align="middle" frameborder="0" width="220" height="270" ></iframe></p>

Il faut bien évidemment adapter le chemin du src selon votre paramétrage.
Si vous avez envie de personnaliser la présentation par CSS, rajouter une classe "deezer" dans votre "style.css".
Attention, le player ayant width="180" et height="220", il faut que l'iframe soit plus grande que lui si vous ne voulez pas voir apparaitre de disgracieux ascenseurs ! Après plusieurs essais avec différents navigateurs, il semblerait que width="220" et height="270" soient les meilleurs paramètres pour l'iframe.

Lorsque vous voudrez intégrer une autre playlist, il suffira de recopiez le fichier Deezer1.html dans par exemple un Deezer2.html, de modifiez les DEUX "path", les DEUX "id" et le texte alternatif (compris entre <p> et </p>) puis de mettre dans votre billet, le même code de l'iframe en remplaçant Deezer1.html par Deezer2.html etc...

Pour voir le rendu ou vérifier la validité XHTML de cet exemple, je vous invite à lire "Deezer dans une iframe" sur mon blog de test WordPress.

• b) Méthode "à l'arrache"

Enfin, pas tout à fait car même en forçant, l'éditeur fait des siennes mais enfin bon, on en est pas très loin...

Reprenez le code valide XHTML du dessus. Positionnez votre curseur sur le début de la dernière ligne (le </div>) et faite un "backspace" pour la coller à la ligne précédente. Recommencez la même chose avec la ligne précédente (le </a> que vous collez à l'<img...> du dessus) et encore et encore jusqu'au <div style et obtenir un bloc supprimé de ses retours à la ligne. Faites la même chose avec le deuxième </div> et supprimer les deux balises <p> et </p> du texte alternatif pour obtenir quelque chose de ce genre :

<div style="text-align: center;"><object type="application/x-shockwave-flash" data="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" width="180" height="236"><param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" />Editors - BestOf (en flash)</object></div>

Ecrivez votre billet sous WordPress comme d'habitude mais sans insérer le code du player. Allez désactiver l'éditeur visuel (Utilisateurs / Modifier / décochez "Utiliser l'éditeur visuel pour écrire" puis cliquez sur le bouton "Mettre à jour l'utilisateur"). Retournez dans votre billet, insérer le bloc de code modifié (supprimé de ses retours charriots) et publier directement. Vous pouvez ensuite réactiver l'éditeur visuel mais si vous le réactivez, si vous retournez voir votre billet, surtout ne le modifiez pas, le code serait "cassé" ! Pour modifiez votre billet, il faut IMPERATIVEMENT penser à désactiver l'éditeur visuel avant de retourner sur le billet.

Pour voir le rendu ou vérifier la validité XHTML de cet exemple, je vous invite à lire "Deezer à l'arrache" sur mon blog de test WordPress.

• c) Méthode "Je veux modifier le billet après coup avec l'éditeur visuel actif mais pas utiliser d'iframe", alors il va falloir plus de deux neurones en marche" - Not blonde inside - Brun très foncé exigé

Je vais modifier le code utilisé dans le point (b) afin qu'il dérange le moins possible l'éditeur visuel. Il le dérangera quand même donc il faudra faire attention avant de publier ou de modifier votre billet de le remodifier légèrement à chaque fois.

Insérer donc ce code à la place :

<p style="text-align: center"><object type="application/x-shockwave-flash" data="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" height="236" width="180"><param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169"></param>Editors - BestOf (en flash)</object></p>

D'une fois sur l'autre, quand vous changez de playlist, il faut changer les DEUX "path", les deux "id" et le texte alternatif compris entre la balise </param> et la balise </object> (dans cette exemple, j'ai mis "Editors - BestOf (en flash)" comme texte alternatif).

Vous intégrez ce code dans votre billet au dernier moment, juste avant la publication, comme indiqué au point (b) précédent.

Lorsque vous voulez modifier votre billet, juste avant d'enregistrer, retournez sur le code du player. Vous constaterez que l'éditeur a rajouté un saut de ligne derrière le width="180"> soit juste avant le <param name="movie" . Il suffit de se positionner devant le <param name="movie" et de faire un backspace pour le recollez au width="180">. Si vous ne le faites pas, la fois suivante, il déplacera carrément le </object></p> derrière le width="180"> et le code sera complètement inutilisable, non seulement vous perdrez la validité XHTML mais aussi le player ne fonctionnera plus correctement. Et oui, c'est cela que d'avoir un éditeur visuel qui se mêle de ce qui ne le regarde pas

Pour voir le rendu ou vérifier la validité XHTML de cet exemple, je vous invite à lire "Deezer" sur mon blog de test WordPress.

AMUSEZ VOUS BIEN...

(Vous pouvez poser des questions s'il y a des choses qui ne vous semble pas claires, je ne mords pas, enfin, pas souvent )