Tumblr : installer des commentaires Disqus

Publié le 12 août 2010 by agweb

Un article gourmand à ne pas manquer : Tartinades : produits gourmands et sains

Voilà, vous avez enfin votre Tumblr (avec le thème génial que vous avez eu du mal à trouver), vous allez enfin pouvoir présenter vos plus belles photos, vos vidéos, vos musiques préférées, vos plus belles citations…
(rayez la mention inutile ou complétez) ! 😎

Mais, un problème, Tumblr n’a pas prévu les commentaires par défaut !
Pourtant, ce serait bien que vos amis puissent vous laisser leurs avis sur les superbes photos que vous avez prises (ou trouvées lors de vos « errances » sur le web).

Voici une solution à ce problème avec Disqus !

Première étape : s’inscrire sur Disqus (si cela n’est pas déjà fait)
et choisissez un nom d’utilisateur (username).

Dans votre profil, vous pouvez faire toutes sortes de réglages pour connecter votre Disqus avec Twitter, Facebook, Yahoo, OpenID, Tumblr… : http://disqus.com/profile/connections/

Vous pouvez accéder à des guides pour vous aider à installer les commentaires Disqus sur votre site ou blog : http://disqus.com/comments/install/
que ce soit sous WordPress, Blogger, Tumblr, Type pad, Joomla, Drupal…
ou universel pour un site simple.

Donc pour votre Tumblr (puisque c’est le sujet de cet article), nous allons choisir la page
http://disqus.com/comments/tumblr/

Deuxième étape : installation sur Tumblr :

Deux options s’offrent à vous :
– le thème Tumblr prévoit d’ajouter un commentaire Disqus : solution simple,
– le thème ne prévoit pas cette option : il faudra modifier le code source de votre Tumblr.

Tout d’abord, se connecter à son compte Tumblr.
Ensuite, afficher la page d’accueil et cliquer sur le bouton en haut, à droite.

Solution simple :

Choisissez le menu « Appearence » :

Si l’option « Disqus Shortname » est disponible, vous avez de la chance !
Il vous suffit d’entrer votre username Disqus dans la case
puis de cliquer sur le bouton « Save » (si vous prévoyer d’autres modifications)
ou le bouton « Save + Close » pour retourner à votre dashboard Tumblr.

Solution « pas de chance » :

le choix n’est pas disponible avec le thème que vous avez choisi, la manipulation est un peu plus compliquée…

Choisissez le menu « Theme » et cliquer sur le bouton « Use Custom HTML » : le code source apparaît.

Placer le code suivant entre <HEAD> et </HEAD> :
<meta name='text:Disqus Shortname' content='' />

Copier le code ci-dessous et remplacez le texte USERNAME par votre username Disqus :

{block:IfDisqusShortname}</p> <div id="disqus_thread"></div> <p><script type="rocketlazyloadscript" data-rocket-type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'USERNAME'; // Required - Replace USERNAME with your forum shortname</p> <p> /* * * DON'T EDIT BELOW THIS LINE * * */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script><br /> <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript><br /> <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a></p> <p>{/block:IfDisqusShortname}<br />

dans votre code source Tumblr, répérez la ligne {/block:Posts}
et coller le code copié juste après.

Ensuite copiez la partie ci-dessous et coller juste avant la ligne {/block:Posts}

<a class="dsq-comment-count" href="http://uncafemonblocnote.fr/tumblr-installer-des-commentaires-disqus/">Comments</a><br /> <script type="rocketlazyloadscript" data-rocket-type="text/javascript"> var disqus_shortname = '{text:Disqus Shortname}';</p> <p> (function () { var s = document.createElement('script'); s.async = true; s.type = 'text/javascript'; s.src = '//' + disqus_shortname + '.disqus.com/count.js'; (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s); }()); </script>

Ceci affichera le nombre de commentaires déjà écrits pour chaque article.

N’oubliez pas de cliquer sur le bouton « Save » (si vous prévoyer d’autres modifications)
ou le bouton « Save + Close » (pour retourner à votre dashboard Tumblr).

Juste avant de retourner à votre dashboard, regardez dans la rubrique « Apparence » et remplir votre username Disqus en face de « Disqus Shortname ».

Voilà, vous pouvez vérifier : vos posts Tumblr contiennent maintenant un commentaire à la fin.

——————————————————————————————————————————-

Vous pouvez également profiter de cet accès au code source pour ajouter d’autres choses à votre page, si cela n’a pas été prévu par le thème que vous avez choisi :
– des liens vers Twitter, Facebook, votre blog…
– des bannières de publicités (j’ai choisi, pour ma part, d’afficher de la publicité Geewizz),
– d’autres personnalisations de votre choix…

Pour afficher ma bannière de publicité, juste après la description du Tumblr,
j’ai collé le code fourni et je l’ai placé après la ligne
<div class="description"><p>{Description}</p></div>

et la publicité apparaît à la place désirée.

N’hésitez pas à visiter mes Tumblr avec leurs commentaires Disqus pour voir comment cela se présente :
http://franky37110.tumblr.com/
http://photodebiere.tumblr.com/
Il est parfois nécessaire de cliquer sur « comments » pour faire apparaître la boîte de dialogue Disqus.

Articles qui pourraient vous intéresser :

Vous aimez cet article ? Partagez-le !

54 commentaires sur “Tumblr : installer des commentaires Disqus”

Le 5 septembre 2010 à 16 h 07 min, kiwix a dit :

j’ai installer les commentaires comme vous l’avez dit, sauf qu’ils n’apparaissent pas en bas a gauche… comment ça se fait ?

Répondre ↓
- Le 5 septembre 2010 à 17 h 21 min, Franck a dit :
  
  Il semble que le problème de commentaire Disqus soit déjà résolu sur cock-a-doodle-do.tumblr.com ! 🙂
  
  Répondre ↓
Le 22 septembre 2010 à 0 h 19 min, Enrics-web a dit :

Merci pour cette information interessante

Répondre ↓
Le 17 décembre 2010 à 11 h 08 min, John... a dit :

Hello Im John ,Ive been a tea addict, adore the smell & the flavor of tea as the very first thing after getting up. I Guzzle minimum seven cups every single day.
Well nice blog, Hope you have a awesome day.

Répondre ↓
Le 18 décembre 2010 à 9 h 38 min, instant payday loans a dit :

To be sure completely together with your conclusions and believe that you’ve made some excellent points. Also, I favor design of one’s site plus the ease of navigation. I’ve bookmarked your website and will return often!

Répondre ↓
Le 21 décembre 2010 à 3 h 35 min, Black Tea a dit :

I found your blog on google. I think it’s pretty nice.

Répondre ↓
Le 21 décembre 2010 à 4 h 18 min, florida contractors a dit :

Thanks for posting, I like this blog!

Répondre ↓
Le 23 décembre 2010 à 3 h 46 min, solar energy companies a dit :

Admiring the commitment you put into your blog and detailed information you present. It’s good to come across a blog every once in a while that isn’t the same unwanted rehashed material. Wonderful read! I’ve bookmarked your site and I’m adding your RSS feeds to my Google account.

Répondre ↓
Le 25 décembre 2010 à 20 h 12 min, Crystal Turco a dit :

Great article! I just saw these at Target the other day and was impressed. Your review answered the questions I had about the seats – now I just need to scrape together the cash! Ouch!

Répondre ↓
Le 27 décembre 2010 à 10 h 32 min, Bearshare a dit :

I know this is really boring and you are skipping to the next comment, but I just wanted to throw you a big thanks – you cleared up some things for me!

Répondre ↓
Le 28 décembre 2010 à 4 h 03 min, mp3 music a dit :

Wow!, this was a real quality post. In theory I’d like to write like this too – taking time and real effort to make a good article… but what can I say… I keep putting it off and never seem to get something done

Répondre ↓
Le 29 décembre 2010 à 0 h 08 min, HTC Desirehd a dit :

It is nice of you to share this beneficial information with us. It’s really a nice and useful piece of information. It is a nicely written blog

Répondre ↓
Le 29 décembre 2010 à 0 h 52 min, TMobile G2 a dit :

Very fascinating posts in your site. Already bookmarked for future references, in the event you do not mind, I would additionally like to this site to deliver you extra traffic. Sustain the good work.

Répondre ↓
Le 29 décembre 2010 à 14 h 32 min, Nokia N8 a dit :

Thanks for sharing your standpoint, I’ll move this among my associates who might be interested on this topic, you have got your self some common readers, and I am one in every of them.

Répondre ↓
Le 29 décembre 2010 à 16 h 37 min, Samsung Continuum a dit :

Good Morning, I used to be on the lookout for some ideas for the lay out of my new website online and found your website through Google. I’m actually amazed by the detail data given on your web site, I will probably be bookmarking it for future references, I also wish to say excellent work accomplished with the good design of your website.

Répondre ↓
Le 29 décembre 2010 à 21 h 18 min, Samsung Fascinate a dit :

Pretty cool article, I will put some hyperlinks on my web sites to redirect them right here, for those who don’t mind. Keep it up, and I will examine back soon.

Répondre ↓
Le 31 décembre 2010 à 0 h 54 min, Droid Eris a dit :

It is good to return across a weblog every once in a while that is not the identical boring material. I’ve bookmarked your site and I’m including your RSS feeds to my Google account.

Répondre ↓
Le 31 décembre 2010 à 13 h 54 min, HTC Incredible a dit :

Two thumb up for this article! I just handed this onto a fellow worker who was doing a little research on that If potential, as you acquire experience, would you mind updating your weblog with extra info?

Répondre ↓
Le 31 décembre 2010 à 17 h 34 min, Smart Phones a dit :

Thank you so much for article! I think you’ve got it, no matter that means in blogging. Keep on inspiring the folks!

Répondre ↓
Le 8 janvier 2011 à 1 h 53 min, john a dit :

Admiring the commitment you put into your blog and detailed information you present. It’s good to come across a blog every once in a while that isn’t the same unwanted rehashed material. Wonderful read! I’ve bookmarked your site and I’m adding your RSS feeds to my Google account.

Répondre ↓
Le 10 janvier 2011 à 23 h 23 min, Tim a dit :

Hey there! Someone in my Facebook group shared this website with us so I came to look it over. I’m definitely enjoying the information. I’m bookmarking and will be tweeting this to my followers! Superb blog and superb design and style.

Répondre ↓
Le 15 janvier 2011 à 0 h 55 min, Htc Desire a dit :

Thanks for taking the time to debate this, I really feel strongly about it and love studying extra on this matter, bookmarked.

Répondre ↓
Le 21 janvier 2011 à 18 h 44 min, Trevor Bayne a dit :

What a lovely post, I don’t know how you continuosly mangage to come up with unique information, where do you get it all from?

Répondre ↓
Le 30 janvier 2011 à 13 h 41 min, program tv a dit :

Excellent information once again. Thanks a lot.

Répondre ↓
Le 3 février 2011 à 0 h 18 min, Nathaëlle a dit :

Étrangement, il n’y a pas possibilité de commenter les images que je poste, alors que cela marche très bien sur les autres types de publications… Comment ça se fait ?

Répondre ↓
- Le 3 février 2011 à 8 h 39 min, Franck a dit :
  
  Il arrive que, selon le thème Tumblr utilisé, on n’ait pas le même comportement de Disqus…
  il faut un peu adapter ! :-/
  
  Répondre ↓
Le 4 février 2011 à 5 h 33 min, Burberry Mens Blazer a dit :

Hello there, I just became aware of your blog through Google, and found that it’s very informative. I am going to watch out for your next post. I’ll appreciate if you continue this in the future. Lots of people will benifit from your excellent posts. Cheers!

Répondre ↓
Le 30 septembre 2011 à 14 h 08 min, Agence Web La Rochelle a dit :

Je te remercie pour super ce plan.

Répondre ↓
Le 21 octobre 2011 à 9 h 46 min, Référencement Web Trois-Rivières a dit :

Excellent article. DisqUS et rien d’autre! 🙂

Répondre ↓
Le 30 novembre 2011 à 17 h 25 min, Xavier GILBERT a dit :

Bravo pour ton site. Je ne le connaissais pas. Bonne continuation.

Répondre ↓
Le 4 février 2012 à 23 h 32 min, blen2r a dit :

salut! merci pour le post, par contre ça marche pas sur ma page…
ça affiche « 0 Comments » en haut à gauche de tout, mais ça ne se met pas à la fin de chaque article! vous ne sauriez pas à quoi c’est dû ?

Répondre ↓
- Le 4 février 2012 à 23 h 58 min, Franck a dit :
  
  As-tu bien ajouté les 2 parties ?
  Je crois que certains thèmes Tumblr (mal codés) bloquent le fonctionnement normal de Disqus !
  
  Répondre ↓
Le 17 février 2012 à 13 h 21 min, Elisa a dit :

Bonjour j’ai essayer de suivre les étapes commes vous les expliquez sur mon tumblr , mais les commentaires n’apparaissent que pour les 6 ou 7 premieres articles et pas les autres je voudrais donc savoir s’il y aurait un moyen de pouvoir les mettre partout

Répondre ↓
- Le 17 février 2012 à 15 h 08 min, Franck a dit :
  
  Comme je répondais au commentaire précédent : selon les thèmes Tumblr, cela ne réagit pas toujours très bien…
  D’après mes tests sur ton blog, ça a l’air de fonctionner partout, mais dans les articles où il y a beaucoup de reblog, cela apparaît en dessous !
  Le format est un peu plus large que la largeur réservée pour chaque article et il faudrait bricoler dans le code mais cela est plus compliqué !
  
  Répondre ↓
Le 21 février 2012 à 22 h 13 min, tche a dit :

Merci pour les infos! Comme je suis novice, je me pose la question suivante: est-ce que si j’installe disqus sur mon site tumblr dont le thème l’accepte, le captcha se met d’office, comme ici, ou est-ce une manipulation html supplémentaire ?

Répondre ↓
- Le 21 février 2012 à 22 h 38 min, Franck a dit :
  
  Ce blog n’est pas un Tumblr mais un blog WordPress (donc pour le captcha, on ne l’a pas par défaut avec Disqus).
  Pour voir à quoi ressemble les commentaires Disqus sur Tumblr, va plutôt là :
  http://franky37110.tumblr.com/post/17819189682#disqus_thread
  En cliquant sur « s’identifier », le visiteur peut commenter en étant inscrit sur Disqus, Google, Twitter, Facebook, Yahoo ou OpenID.
  
  Répondre ↓
Le 3 mai 2012 à 11 h 01 min, Allie a dit :

Je ne comprends pas, chez moi, ça ne marche pas. Il y a bien écrit « comments », mais quand je clique dessus, rien n’apparait…

Répondre ↓
- Le 3 mai 2012 à 11 h 12 min, Franck a dit :
  
  Ben si ça marche : j’ai testé et laissé un message ! 🙂
  
  Répondre ↓
Le 10 mai 2012 à 18 h 32 min, Cecile a dit :

Bonjour

Merci beaucoup pour ces infos.

Mon thème me permet de me relier très facilement à Disqus et le bloc de commentaire apparaît très bien sous chaque post.
Cependant je souhaiterai rajouter cette fonctionnalité sur les pages html créées en plus (http://www.tumblr.com/docs/fr/pages). Savez-vous si cela est possible ? Parce que je ne vois pas très bien où rajouter la partie code vue que la page html est vierge et ne contient pas de balise {/block:Posts} ?

Merci d’avance

Répondre ↓
- Le 10 mai 2012 à 19 h 35 min, Franck a dit :
  
  Pour une page HTML, il suffit de suivre les infos de cette page :
  http://docs.disqus.com/developers/universal/
  (en anglais)
  et pour d’autres blog ou CMS :
  http:// [utilisateur] .disqus.com/admin/install/
  en remplaçant [utilisateur] par votre pseudo Disqus.
  
  Répondre ↓
Le 12 juin 2012 à 11 h 31 min, Agathe a dit :

Bonjour,
Je viens de créer mon Tumblr il y a quelques jours donc je suis encore un peu beaucoup novice cest pour ça que je viens vous demander votre aide, toujours en matière de commentaires biensûr … Pour ma part, j’aimerais activer les commentaires à côté des petits onglets rebloguer et tableau de bord, je voudrais que l’on puisse commenter l’ensemble de mes billets et non pas un par un, est-ce possible ? Merci de votre aide …

Répondre ↓
- Le 12 juin 2012 à 18 h 07 min, Franck a dit :
  
  J’aurais bien aimé vous aider mais mes compétences sur Tumblr ne me permettent pas de répondre comment placer des commentaires Disqus à cet endroit, désolé !
  
  Répondre ↓
Le 16 juin 2012 à 10 h 58 min, Ploopy a dit :

Bonjour !

Alors moi, je cherche désespérément quelqu’un qui pourrais m’aider à résoudre mon problème : j’ai fait exactement comme expliqué sur ce site (et d’autres) : j’ai créé un compte Disqus (moustachedefille), je suis allé chercher un p’tit thème sur mon Tumblr (easy reader 2 par cubicle 17) et j’ai la chance d’avoir le « Disqus Shortname », je mets donc le mien à côté : moustache-de-fille et là…

Ben ça marche pas. Tout simplement. Mon site n’a pas les commentaires :

Alors si quelqu’un pouvait m’aider à résoudre cet incompréhensible dilemme…

Merci d’avance ! 🙂

Répondre ↓
- Le 16 juin 2012 à 11 h 39 min, Franck a dit :
  
  Ben, j’ai fait un test sur ton Tumblr et ça marche ! 😉
  
  Répondre ↓
Le 3 juillet 2013 à 21 h 41 min, Juliette a dit :

merci!! ça m’a pris 3 min… grâce au cet article.

Répondre ↓
- Le 3 juillet 2013 à 21 h 49 min, Franck a dit :
  
  Avec plaisir ! 😉
  
  Répondre ↓
Le 17 mai 2014 à 2 h 29 min, Aduls Dandjinou a dit :

Très Bon Post que j’apprécie

Répondre ↓
Le 19 mai 2014 à 19 h 26 min, Clarisse a dit :

Merci pour ce post très bien expliqué, cependant je ne sais pas pourquoi, chez moi ça ne marche pas !
J’ai bien fait tout ce qui est indiqué, le mot « Comments » apparaît sous mes billets mais impossible de commenter !
J’ai refait la manip plusieurs fois mais ça ne change rien …

Répondre ↓
Le 10 juin 2014 à 12 h 09 min, Benneji a dit :

Bonjour ,
SVp j’aimerai savoir si on peut insérer un evènement « onClick » ou « Onsubmit » sur les commentaires disqus ,pour executer une fonction après avoir envoyer un commentaire ?

Répondre ↓
- Le 10 juin 2014 à 12 h 27 min, Franck a dit :
  
  Je ne pense pas que l’on puisse rajouter d’événement mais il faudrait regarder sur le site de Disqus.
  
  Répondre ↓
Le 13 septembre 2014 à 20 h 46 min, Morgane a dit :

Bonjour, j’ai fait comme dans le tutoriel, ajouté mon pseudo Diskus et enregistrer mais cela ne marche pas, est-ce que je dois éditer le html aussi? Merci!

Répondre ↓
- Le 13 septembre 2014 à 21 h 01 min, agweb a dit :
  
  Bonjour,
  je viens d’aller sur ton Tumblr et tout semble fonctionner dans un article !
  En revanche pour la page d’accueil, pou voir le nombre de commentaires sur chaque article, il faut peut-être aller dans le code HTML !
  
  Répondre ↓

Laisser un commentaire Annuler la réponse.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Un café, mon bloc note…

Un blog qui ne révolutionnera pas la blogosphère… mais c'est le mien ! ;-)

Tumblr : installer des commentaires Disqus

WordPress:

Articles similaires

54 commentaires sur “Tumblr : installer des commentaires Disqus”

Laisser un commentaire Annuler la réponse.