Enabling Commenting with DISQUS in Ghost on Azure

If you are like me new and you are new to Ghost, DISQUS and Azure Web Apps you will find that the instructions out there are a bit unclear. Below are the unambiguous steps I used to get this working.

  1. Navigate to DISQUS and create an account with DISQUS.

  2. Click the gear icon on the top right corner and choose "Add Disqus to Site".

  3. Click Start Using Engage.

  4. Give your blog a name and unique URL, amd category. Make note of the unique URL.

  5. Keep clicking next until you get to the choose platform page. Choose Universal Code.

  6. Copy the code in section 1 to your clipboard.

  7. Navigate to the Kudu interface for your Azure Web App by browsing to https://YOURSITE.scm.azurewebsites.net.

  8. Choose CMD under Debug Console

  9. Navigate to \site\wwwroot\content\themes\casper and click the edit button next to post.hbs

  10. Now you need to paste the code you copied in step 6. You want to paste it beween </section> and </article>. The final product should look like the below image.
    Make sure that you change PAGE_URL to your preferred URL and PAGE_IDENTIFIER with '{{post.id}}'
    OPTIONAL STEP: In the code pasted above you can add var disqus_identifier = 'ghost-{{id}}'; between this.page.url and this.page.identifier

    var disqus_config = function () {
    this.page.url = blog.contoso.com;  
    var disqus_identifier = 'ghost-{{id}}';
    this.page.identifier = '{{post.id}}' 
    };
    

    According to support.ghost.org this step should provide added reliability in making sure that you don't end up with duplicate threads based on varying URLs.

  11. Click the blue save button the top left.

  12. Navigate to your azure portal and manage.windowazure.com and find your web app. On the bottom of the dashboard page click restart.
    When the Web App reboots your should have DISQUS comments enabled.

OPTIONAL If you want to enable comment counts there are a few more steps to follow.

  1. Go back to the Disqus universal code page and copy the text in the second box labeled 1.

  2. Head back to Kudu and navigate to \site\wwwroot\content\themes\casper following steps 8 and 9 above. and click the edit button next to default.hbs.

  3. Paste the code copied in step 1 in front of the final </body> tag.

  4. Click the blue save button.

  5. Next you need to appened the #disqus_thread reference to the href attribute of your links. You will need to find your post-meta information for your homepage, if you are using Casper this will be in loop.hbs which is located in \site\wwwroot\content\themes\casper\partials It took me a long time to find this file as the tutorials I followed, specifically at support.ghost.org did not give the path. Note that according to ghost.org if you are using a different theme the metadata you are looking for may be in index.hbs in the main theme folder. Click the edit button next to loop.dbs

  6. Find </time> and paste <a href="{{url}}#disqus_thread">Comments</a> right after </time> but before </footer>

  7. Click the blue save button and follow the instructions in step 12 above to restart your web app.

  8. Wait a few minutes for the web app to restart. If all worked you should have comment counts on your home page.

You should now have DISCUS fully integrated with your Ghost Blog.

Adam Smith

Read more posts by this author.