Tutoriel: Utiliser Yozik sur Tumblr

D’un côté, Yozik fournit de nombreux outils aux artistes, labels et groupes de musique, à insérer sur leur site ou blog.
De l’autre, Tumblr, à mi chemin entre Twitter et les blogs classiques, et surtout l’un des services les plus simples pour créer son blog

D’où l’idée de ce tutoriel pour insérer facilement les widgets Yozik, sur son Tumblr.

Voir ici un exemple dans le Tumblr de Yozik d’un panier permettant de vendre un morceau en téléchargement.

De la même manière, on pourra, comme sur wordpress, insérer tous les codes fournis par Yozik pour afficher tous les liens vers ses différents articles (un morceau ou un album en téléchargement, un cd, un tee-shirt, …), une mini-boutique, un player, une playlist, l’inscription à la newsletter, ….

Pour commencer il faudra, si ce n’est déjà fait, ouvrir un compte Yozik et un compte Tumblr. Les deux services proposent une offre gratuite et il suffira de renseigner les classiques email et mot de passe et pour ensuite configurer ses comptes respectifs.

Une fois le premier article créé sur Yozik, on peut commencer par insérer le script nécessaire à l’ouverture des fenêtres Yozik dans Tumblr.
Le script sera effectif pour tous les différents liens dans le blog.
Il n’est donc pas nécessaire de répéter ce processus par la suite sauf en cas de changement de thème.

Dans l’onglet Articles de l’admin Yozik, sélectionner l’article souhaité.

Dans le cadre CODE A COPIER/COLLER, choisir le type de lien Iframe Html (sélectionné par défaut)
Pour configurer le positionnement du panier dans le blog Tumblr, cliquer sur le lien options de l’iframe .
Pour mon exemple je choisi de fixer l’iframe pour que le panier suive la barre de scroll, et de le positionner à 30 pixels du haut de la page et à 10 pixels du bord droit
Dans le cadre CODE A COPIER/COLLER, copier le premier code, celui à ajouter après la balise body.
Sur sa page Tumbl maintenant, cliquer sur Customize, puis sur Theme

Dans le code du thème qui vient de s’afficher, rechercher la balise <body> et coller le code qui vient d’être copier juste après. Sauvegarder les modifications en cliquant sur Save Changes.

Voyons maintenant comment insérer le panier comme dans l’exemple ci-dessus:

Copier le code du lien vers l’article dans l’admin de yozik
Sur le dashboard de Tumblr, modifier les préferences d’édition du compte en cliquant sur Account, Preferences. Dans le cadre Editor choisir Edit posts using: plain text/HTML
Toujours sur le dashboard de Tumblr, créer un Post de type Text