Blog digiBiDiToute l'actu de la BD numérique

Tutoriel – Intégrer le player digiBiDi à un site ou un blog

Vous l’avez peut-être remarqué, il est possible d’exporter notre Player, c’est-à-dire d’intégrer les planches gratuites d’une bande dessinée sur votre site web ou votre blog. Vous vous posez des questions sur cette opération ? Suivez le guide.

Notes :

• – Si l’intégration ne semble pas marcher, essayez de coller le code dans l’éditeur HTML (au lieu de l’éditeur « visuel », également appelé WYSIWYG)
• – Pensez toujours à mettre un lien vers www.digibidi.com, afin que vos visiteurs puissent également récupérer le code de la BD et intégrer eux aussi le Player à leur site !

Sommaire :

• 1 – Récupérer le code de la BD
• 2 – Intégrer le Player à un site web
  • 2.1 – Cas général
  • 2.2 – Que faire si le Player « disparaît » de l’éditeur ? (cas de TinyMCE)
• 3 – Intégrer le Player à un blog
  • 3.1 – CanalBlog ou Blogger/Blogspot (blogs Google)
  • 3.2 – Hautetfort
  • 3.3 – WordPress & Dotclear
  • 3.4 – Over-Blog
  • 3.5 – Jimdo
  • 3.6 – Carbonmade
• 4 – Et si ce n’est vraiment pas possible…

Nous espérons que cela vous aidera à intégrer le Player à votre site ! Evidemment, cette aide n’est pas exhaustive et il existe beaucoup d’autres plate-formes de blogs. N’hésitez pas à laisser un commentaire pour nous faire profiter de vos expériences !

1- Récupérer le code de la BD

Chaque BD dispose de son propre code. Vous le trouverez sur la page Titre de la bande dessinée . C’est ce bout de code qu’il faudra coller dans votre blog ou votre site web.

Par exemple, dans la capture d’écran ci-contre (Le Miroir des templiers, aux éditions Tartamudo), il s’agit du code encadré en rouge.

Faites bien attention à copier l’intégralité du code.

2 – Intégrer le Player à un site web

2.1 – Cas général

Collez le code à l’endroit où vous souhaitez insérer le Player, et voila !

2.2 – Que faire si le Player « disparaît » de l’éditeur ? (cas de TinyMCE)

Certains modules bloquent par défaut les iFrames (et donc le Player). Par exemple, lorsque vous ajoutez du code dans l’éditeur HTML de TinyMCE, celui-ci élimine tout ce qui lui semble non acceptable.

Si vous avez le contrôle sur les modules (i.e. vous gérez vous-même votre site), il est presque toujours possible de forcer la validation des iFrames. Ainsi, dans le cas de TinyMCE, une recherche Google « insert iFrame TinyMCE » nous permet de trouver une page expliquant comment forcer ce module à accepter les iFrames.

3 – Intégrer le Player à un blog

3.1 – CanalBlog ou Blogger/Blogspot (blogs Google)

Collez le code à l’endroit où vous souhaitez insérer le Player, et voila ! A gauche, l’aperçu du post après avoir collé le code dans un blog Blogger.

3.2 – Hautetfort et Typepad

Collez le code iFrame dans l’éditeur HTML (disponible en cliquant sur le bouton/l’onglet « HTML »), et mettre à jour.

3.3 – WordPress & Dotclear

Par défaut, WordPress et Dotclear n’aiment pas trop les iFrames, et cherchent à les supprimer. Il est cependant possible de contourner cette limitation.

(1) « De l’art de feinter WordPress et Dotclear »

Cette méthode consiste à ne pas laisser la possibilité à WordPress (ou Dotclear) d’éliminer l’iFrame.

Pour ce faire, il faut intégrer le Player juste avant la publication de l’article. Ainsi, la procédure à suivre est :

• 1 – Rédigez votre article
• 2 – Passez dans l’onglet d’édition HTML
• 3 – Collez le code du Player
• 4 – Publiez l’article (sans repasser par le mode visuel !)

J’insiste sur le fait de ne pas repasser par le mode visuel, sinon WordPress « nettoiera » le code (et supprimera donc le Player). En revance, si vous publiez directement l’article, le Player sera correctement intégré.

(2) Le plugin Include It (pour WordPress uniquement)

L’extension Include It est une autre option à votre disposition. Elle permet de s’affranchir des contraintes liées au « nettoyeur html » de WordPress, mais a comme inconvénient d’obliger à modifier un peu le code de l’iFrame.

Commencez par installer le plugin, puis récupérez le code de la BD que vous souhaitez intégrer. Pour que le Player digiBiDi fonctionne avec Include It, il faut modifier un peu le code d’intégration. Par exemple, pour intégrer Le Miroir des templiers, on écrira :

[    include iframe=true file=http://www.digibidi.com/player/embed/le-miroir-des-templiers-1-new-paris width=396 height=515 scrolling=no frameborder=0]

à la place du code initial :

<iframe src= »http://www.digibidi.com/player/embed/le-miroir-des-templiers-1-new-paris » width= »396″ height= »515″ scrolling= »no » frameborder= »0″>XXX</iframe>

Attention ! J’ai rajouté des espaces entre le « [ » et le « include », pour pouvoir afficher le code (sinon le player se serait affiché). Ces espaces doivent être supprimés pour que le code fonctionne. Si vous n’êtes pas à l’aise avec ce type de codes, je vous conseille de copier-coller le code utilisant le include dans votre post, puis de modifier les paramètres en fonction de la BD que vous souhaitez afficher (adresse du Player, hauteur (height), largeur (width), et ne pas oublier de retirer les espaces après le « [« ).

3.4 – Over-Blog

Attention : Maintenant Over-Blog bloque l’utilisation des iFrames pour les comptes gratuits 🙁

Pour intégrer le Player, il vous faut donc un compte Privilège ou un compte Prémium.

Lors de la rédaction d’un post, cliquez sur l’onglet « édition avancée », puis sur le bouton « HTML » (voir la capture d’écran pour l’emplacement de ces boutons). Vous pouvez ensuite coller le code et valider.

3.5 – Jimdo

Une fois en mode édition de page, cliquez sur « Ajouter nouvel élément » puis sur le bouton « Widget / HTML » . Vous pouvez ensuite coller le code dans le cadre fraichement créé !

3.6 – Carbonmade

Allez dans (ou créez) le projet correspondant au titre. Le Player peut être intégré en tant que légende d’une image (Image caption). Il suffit pour cela de coller le code dans le champ correspondant. On peut également intégrer le Player dans l’onglet « About ».

4 – Et si ce n’est vraiment pas possible…

Vous pouvez toujours faire un lien la page du Titre sur www.digibidi.com !
.

Billets similaires :

• – Mise à jour du site : flux RSS, export des previews, et page d’accueil
• – Mise à jour du Player : donnez votre avis !
• – Collaboration entre De Poort et digiBiDi
• – digiBiDi ouvre son service de « BD à la demande  » !
• – HTML Comics : oubliez ce site ! Anders Bengtson : un nom à retenir.

Cet article a été posté le mercredi, 28 janvier, 2009 à 20:30 et est classé dans News digiBiDi. Vous pouvez suivre les commentaires de cet article via le Flux RSS 2.0. Vous pouvez laisser une réponse, ou faire un Rétrolien depuis votre propre site.