Installer facilement Disqus sur Ghost

Prérequis :

  • avoir un compte disqus
  • pouvoir modifier ses fichiers de templates GHOST

Avoir un compte Disqus

Pour cela, je vous laisse faire ;-)
Rendez-vous sur la page officielle de Disqus et créez vous votre compte.

Une fois connecté, rendez vous dans votre espace d'administration de vos sites en cliquant sur le lien admin/

disqus_admin_link

Dans la nouvelle page d'administration qui s'affiche, à côté du logo Disqus vous aurez la possibilité d'accéder à la page d'administration du site que vous souhaitez gérer ou d'en créer un nouveau, via le bouton "+ New".

disqus_menu_admin

Installer Disqus

Une fois votre site créé et que vous accédez à sa page, vous avez un bouton qui vous propose l'installation de Disqus sur votre site.

disqus_installing

Disqus vous demande ensuite sur quelle plateforme vous souhaitez installer son système de commentaires. Evidemment, vous l'aurez compris on choisira Ghost !

disqus_platform_list

Disqus vous présente alors la démarche pour installer le composant:

disqus_install_instructions

L'étape 2 n'est pas nécessaire telle que décrite. En effet, le fichier post.hbs contient déjà (presque) tout ce qu'il faut. Il suffira de décommenter un bloc de code pour arriver à nos fins.

Décommenter la bonne portion de code

Il suffit de transformer la portion de code ci-dessous :

{{!--

If you use Disqus comments, just uncomment this block.
The only thing you need to change is "test-apkdzgmqhj" - which
should be replaced with your own Disqus site-id.

<section class="post-full-comments">
    <div id="disqus_thread"></div>
    <script>
        var disqus_config = function () {
            this.page.url = '{{url absolute="true"}}';
            this.page.identifier = 'ghost-{{comment_id}}';
        };
        (function() {
            var d = document, s = d.createElement('script');
            s.src = 'https://test-apkdzgmqhj.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();
    </script>
</section>
--}}

par celle ci-après :

<section class="post-full-comments">
    <div id="disqus_thread"></div>
    <script>
        var disqus_config = function () {
            this.page.url = '{{url absolute="true"}}';
            this.page.identifier = 'ghost-{{comment_id}}';
        };
        (function() {
            var d = document, s = d.createElement('script');
            s.src = 'https://test-apkdzgmqhj.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();
    </script>
</section>

Placer le bon identifiant Disqus dans le bloc de code

Il suffit enfin de remplacer le début d'url 'test-apkdzgmqhj' par votre identifiant attribué par Disqus.

Vous pourrez le retrouver sur la page de configuration de Disqus de votre site sous l'intitulé : "shortname". Pour accéder à cette page, il suffit de cliquer sur le lien "Edit Settings" :

disqus_edit_settings

Si votre identifiant est 'johndoe' alors le bloc de code deviendra :

<section class="post-full-comments">
    <div id="disqus_thread"></div>
    <script>
        var disqus_config = function () {
            this.page.url = '{{url absolute="true"}}';
            this.page.identifier = 'ghost-{{comment_id}}';
        };
        (function() {
            var d = document, s = d.createElement('script');
            s.src = 'https://johndoe.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();
    </script>
</section>

Redémarrer Ghost

On en a presque terminé.
Il suffit à présent de vous rendre via SSH sur votre serveur et de lancer les deux commandes suivantes dans votre répertoire root de Ghost :

ghost stop
ghost start

Rafraichissez votre navigateur et votre bloc de commentaire Disqus devrait apparaitre.

disqus_comment_bloc

Pouvoir modifier ses fichiers de templates Ghost

Bien évidemment à cette étape vous pouvez utiliser le bon vieux et fidèle FTP.
Vous pouvez également utiliser WinSCP et son mode "Garder le répertoire distant à jour" et éditer vos fichiers préalablement récupérés en local avec votre éditeur favori.

Un simple "CTRL + S" sauvegardera vos modifications (évidemment) mais les propulseront également illico presto vers votre site. Un refresh (F5) de la page et vos modifications apparaitront alors sur le site.

Télécharger winSCP
Télécharger Atom

Conclusion

Voilà, la manipulation est terminée et vous pouvez à présent recevoir les commentaires des lecteurs de votre blog et les modérer via l'interface de Disqus.

N'hésitez pas à nous faire part de vos commentaires sur cet article dans le bloc de commentaire Disqus ci-dessous ;-).