Gadget Lecteur Playlist Deezer (TextList Custom)

Le service de musique en ligne Deezer a sorti cette semaine une nouvelle version de son lecteur exportable. C'est l'occasion de le tester et de l'utiliser dans un développement spécifiquement prévu pour Blogger.
Le gadget TextList a été reconstruit de A à Z afin que vous puissiez dans un premier temps, utiliser les ID de chaque chanson dans les paramètres du gadget, et dans un second temps, afficher le lecteur sur votre blog.

Présentation

Ce développement converti le gadget TextList de Blogger en un lecteur multi-pistes Deezer.
Ce qui vous permet d'intégrer à la place des éléments traditionnels, les ID des chansons.
Le nouveau code du gadget TextList combine tous les ID qui sont ensuite ajoutés dans le code du player.
En bref,

• Vous ajoutez l'identifiant des pistes Deezer directement dans les paramètres du gadget Liste
• Vous gérez l'ordre et le nombre de pistes
• Vous ne vous préoccupez pas des dimensions. Le lecteur s'adapte automatiquement à la taille de son conteneur.
• Vous personnalisez les paramètres du lecteur
• Vous définissez les conditions d'affichage (Types de pages, accueil, version mobile personnalisée)

Installation

Configurez les paramètres et suivez les instructions d'installation.

Paramètres du gadget	N° Identifiant ? Titre
Paramètres du lecteur	Démarrage automatique ? Afficher la playlist ? Hauteur de la playlist 200px ? Thème du lecteur Sombre (par défaut) Clair Couleur ? Orientation Horizontal Vertical
Affichage du gadget ?	Articles Pages autonomes Index Archive Pages 404 Uniquement à la page d'accueil Appareils Uniquement la version web Uniquement la version mobile personnalisée Version web + Version mobile personnalisée

Le code du gadget

<b:widget id='TextList607' locked='false' mobile='no' title='Playlist Deezer' type='TextList'>
  <b:includable id='main'>
      <b:include name='content'/>
  </b:includable>
  <b:includable id='content'>
    <!-- Gadget Playlist Deezer (Widget TextList custom) - Blogger Config.
         Ref.: http://goo.gl/PRG41T -->
    <h2><data:title/></h2>
    <div class='widget-content'>
      <div expr:id='&quot;BCplayer&quot; + data:widget.instanceId' />
      <b:include name='quickedit'/>
    </div>
    <script>
      var deezercontainer = &quot;BCplayer<data:widget.instanceId/>&quot;;
      var deezerlist = &quot;<b:loop index='songCount' values='data:items' var='deezerId'><b:if cond='data:songCount not in {0}'>,</b:if><data:deezerId/></b:loop>&quot;;
      // <![CDATA[
        var       autoplay = "false";    // "false" (default) or "true"
        var         format = "classic";  // "classic" (default) or "square"
        var       playlist = "true";     // "false" (default) or "true"
        var playlistHeight = 200;        // number - only playlist
        var         layout = "dark";     // "dark" (default) or "light"
        var          color = "FE6602";   // hexadecimal value without the #
        var widgetBC = document.getElementById(deezercontainer);
        var containerWidth;
        if (widgetBC.offsetWidth) { containerWidth = widgetBC.offsetWidth; }
        if (format == "classic") { var playerSingleHeight = 92; } else { var playerSingleHeight = containerWidth; }
        if (playlist == "true") { var playlistHeight = playlistHeight; } else { var playlistHeight = 0; }
        var containerHeight = playerSingleHeight+playlistHeight;
        var src = "https://www.deezer.com/plugins/player?format="+format+"&autoplay="+autoplay+"&playlist="+playlist+"&width="+containerWidth+"&height="+containerHeight+"&color="+color+"&layout="+layout+"&size=medium&type=tracks&id="+deezerlist+"&app_id=1";
        var player = document.createElement('iframe');
            player.setAttribute('src', src);
            player.setAttribute('allowtransparency', 'true');
            player.setAttribute('scrolling', 'no');
            player.setAttribute('frameborder', '0');
            player.setAttribute('marginwidth', '0');
            player.setAttribute('marginheight', '0');
            player.setAttribute('width', containerWidth);
            player.setAttribute('height', containerHeight);
        document.getElementById(deezercontainer).appendChild(player);
      // ]]>
    </script>
  </b:includable>
</b:widget>

Où recopier ce code ?

Le code doit être ajouté dans l'éditeur HTML du modèle :

• Tableau de bord
• Modèle
• Modifier le code HTML

Recopiez le code au-dessus de :

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'>

Lorsque le modèle sera enregistré, le gadget sera positionné juste au-dessus du gadget des articles. Pour le déplacer dans une autre colonne, rendez-vous dans le volet "Mise en page".

• Tableau de bord
• Mise en page
• Glisser/Déposer gadget "Playlist Deezer"

Le gadget apparaîtra sur le blog, lorsque vous aurez commencé à introduire des identifiants des pistes Deezer dans les paramètres du gadgets.

Pour retrouver l'identifiant d'une chanson, rendez-vous sur une page Deezer, cherchez une chanson, et cliquez sur la fonction "exporter" pour accéder au Deezer Player Widget.
L'identifiant se trouve dans la cellule Tracks ID.

• Note 1 : Le gadget ne vérifie pas le contenu des listes. Si la liste contient un élément qui n'est pas un identifiant (par exemple un texte), le lecteur ne fonctionnera pas correctement.
• Note 2 : Le player Deezer peut accueillir jusqu'à 200 pistes.
• Note 3 : Les recommandations Deezer
  • Se connecter à Deezer... O_o
  • Avoir un marteau sous la main si les boutons ne fonctionnent pas.
• Note 4 : Un élément de la liste peut contenir plusieurs identifiants. Ceux-ci doivent être séparés par une virgule.

Les lecteurs

• YouTube - Gadget Player
• YouTube - Gadget Playlist
• Deezer - Gadget Playlist