Using Disqus with your managed Ghost blog
The documentation about integrating Disqus Discussions in Ghost only applies to self hosted Ghost instances or at least self packaged themes. So I created a snippet which you can paste in your Blog footer via Ghost's Code Injection.
The documentation about integrating Disqus Discussions in Ghost only applies to self hosted Ghost instances or at least self packaged themes.
So I created a snippet which you can paste in your "Blog footer" via Ghost's "Code Injection":
<script id="disqus-script" data-disqusName="your-disqus-name" | |
data-element="selector-of-element-where-to-append-disqus-container" | |
src="https://cdn.rawgit.com/paulwellnerbou/a09e3819307851993df0aba65b266e86/raw/ee408decdfbb8df5180894741dc59a5423d706a6/embed-disqus.js"/> |
Where data-disqusName
is your name at Disqus and data-element
contains the CSS selector of the element, the Disqus container will be appended in. For Ghost 0.11 and the default Casper 1.4 theme, this should be .post-content
, for Ghost 1.0 and Casper 2 this works with article.post-full:not(.page)
. (The :not(.page)
part prevents comments beeing loaded on static pages. If you want them to do so, only use article.post-full
.)
By the way, this works for all Websites, not only for Ghost. After working on this, I wonder why Disqus is making the integration so complicated.
The script is hostet on Github:
/** Usage: | |
Place this tag at the end of your HTML: | |
<script id="disqus-script" data-disqusName="your-disqus-name" data-element="selector-of-element-where-to-append-disqus-container" | |
src="https://cdn.rawgit.com/paulwellnerbou/a09e3819307851993df0aba65b266e86/raw/ee408decdfbb8df5180894741dc59a5423d706a6/embed-disqus.js"/> | |
Original version: https://gist.github.com/paulwellnerbou/a09e3819307851993df0aba65b266e86 | |
*/ | |
var disqus = document.getElementById('disqus-script'); | |
var disqusName = disqus.getAttribute('data-disqusName'); | |
// The element where to append the Disqus discussion container, for Ghost 0.11 and the casper theme this is '.post-content' | |
var elementToAppendDisqusContainer = disqus.getAttribute('data-element'); | |
var postContent = document.querySelector(elementToAppendDisqusContainer); | |
if(postContent !== null) { | |
var div = document.createElement('div'); | |
div.setAttribute('id', 'disqus_thread'); | |
postContent.append(div); | |
var canonical = document.querySelector('link[rel=canonical]').getAttribute('href') | |
var identifier = canonical.slice(canonical.slice(0, -1).lastIndexOf('/') + 1, -1); | |
var disqus_config = function () { | |
this.page.url = canonical; | |
this.page.identifier = identifier; | |
}; | |
(function() { | |
var d = document, s = d.createElement('script'); | |
s.src = 'https://' + disqusName + '.disqus.com/embed.js'; | |
s.setAttribute('data-timestamp', +new Date()); | |
(d.head || d.body).appendChild(s); | |
})(); | |
} |
The disadvantage of this method is that it will not work anymore, if the URL changes, as there is no unique id. In this case, you will have to re-map URLs in your Disqus administration interface.
After implementing this, I found two similar solutions, both described more carefully, by Jambie Goodwin and Matt Enlow, although outdated. Wish I did find them before anyway.