Widget Lecteur Playlist Spotify [TextList Custom]

Gadget VersionLayouts Version
1
1
2
Attention ! Les catégories Fonctionnalités et Développements vont bientôt faire l'objet d'une révision.

Nous vous rappelons que lorsque vous accédez à ce blog, vous signez automatiquement un accord avec Blogger Code.
Consultez les CGU.


Gadget Lecteur Playlist Spotify
Intégrer le lecteur exportable du service de musique en ligne Spotify et créer sa playlist sur Blogger. C'est ce que propose ce développement qui customise le gadget TextList de Blogger.
Personnalisez le lecteur, installez-le dans le XML de votre modèle, déplacez-le dans la mise en page sans vous soucier des dimensions, ajoutez les chansons dans les paramètres du widget et écoutez...

Présentation

Ce développement converti le gadget TextList de Blogger en un lecteur multi-pistes Spotify.
Ce qui vous permet d'intégrer à la place des éléments traditionnels, les identifiants 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 Spotify 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)

Un petit air de déjà vu ? Oui oui. C'est exactement le même principe de développement que vous avez déjà testé avec le lecteur YouTube et Deezer.


Le gadget dans une colonne latérale, vue avec pochettes
Le même gadget dans une colonne latérale, vue liste
Le même gadget déplacé entre l'entête et le reste du blog


Installation

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

Paramètres du gadget
N° Identifiant ?
Titre
Paramètres du lecteur
Vue de la playlist ?
Thème de la liste ?
Affichage du gadget ?
Appareils

Le code du gadget
<b:widget id='TextList608' locked='false' mobile='no' title='Playlist Spotify' type='TextList'>
  <b:includable id='main'>
      <b:include name='content'/>
  </b:includable>
  <b:includable id='content'>
    <!-- Gadget Playlist Spotify (Widget TextList custom) - Blogger Config.
         Ref.: http://goo.gl/8mVZME -->

    <h2><data:title/></h2>
    <div class='widget-content'>
      <div expr:id='&quot;BCplayer&quot; + data:widget.instanceId' />
      <b:include name='quickedit'/>
    </div>
    <script>
      var spotifyPlaylistTitle = &quot;<data:title/>&quot;;
      var spotifycontainer = &quot;BCplayer<data:widget.instanceId/>&quot;;
      var spotifylist = &quot;<b:loop index='songCount' values='data:items' var='spotifyId'><b:if cond='data:songCount not in {0}'>,</b:if><data:spotifyId/></b:loop>&quot;;
      // <![CDATA[
        var     view = "list";   // "list" (default) or "coverart"
        var    theme = "black";  // "black" (default) or "white"
        var playlist = "true";   // "true" (default) or "false"
        var widgetBC = document.getElementById(spotifycontainer);
        var containerWidth;
        if (widgetBC.offsetWidth) { containerWidth = widgetBC.offsetWidth; }
        if (playlist == "false" || containerWidth < 210) { var containerHeight = 80; } else { var containerHeight = containerWidth+80; }
        var src = "https://embed.spotify.com/?uri=spotify:trackset:"+spotifyPlaylistTitle+":"+spotifylist+"&theme="+theme+"&view="+view;
        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(spotifycontainer).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 Spotify"

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

Ajouter des identifiants de musique Spotify dans les paramètres du gadget TextList

Pour retrouver l'identifiant d'une chanson, rendez-vous sur une page Spotify, cherchez une chanson, et copiez l'url Spotify dans votre presse-papier.
L'identifiant se trouve à la fin de l'url.

https://play.spotify.com/track/6DFzpa0eHyEkvQ2oeewmA2

  • 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 Spotify peut accueillir jusqu'à 200 pistes. Toutefois, le nombre de jetons est également limité. Le lecteur commencera à dérailler approximativement au-delà de 80 pistes (maximum recommandé).
  • Note 3 : Les recommandations Spotify
    • Se connecter à Spotify... O_o
    • La largeur minimum du conteneur doit être de 210 pixels pour pouvoir afficher la playlist.
    • La hauteur de la playlist est directement proportionnelle à la largeur du conteneur.
    • La largeur minimum recommandée du conteneur est de 250 pixels.
  • Note 4 : Un élément de la liste peut contenir plusieurs identifiants. Ceux-ci doivent être séparés par une virgule.

Fiches populaires cette semaine

Les opérateurs d'URLs [path/params/appendParams/fragment]

Ajouter des boutons au menu de partage