Sure I can do that. In my theme, I have a partials called “disqus-comment.hbs” which is what takes care of rendering the comments for my particular theme. In casper, this is located in the “ghost_root_directory/content/themes/casper/post.hbs” file. You’re looking for <section class="post-full-comments"> in casper. In my theme, it’s literally called “comments-block”.
You want to do the following code, which is both disqus and facebook comments, encapsulated with the javascript load button:
<div class="comment-container">
<div class="section-title">
<span>{{t "Comments"}}</span>
</div>
<div id="fb-root"></div>
<div class="fb-comments" data-href="https://www.binarycomputer.solutions{{url}}" data-width="100%" data-numposts="5"></div>
<div class="comments-block">
<button id="show-comments" onclick="disqus();fbcomment();return false;">Display and Interact with Comments</button>
</div>
<div id="disqus_thread"></div>
<script>
var disqus_loaded = false;
var fb_loaded = false;
var disqus_shortname = 'SHORTNAME_HERE'; //Add your shortname here
function disqus() {
if (!disqus_loaded) {
disqus_loaded = true;
var e = document.createElement("script");
e.type = "text/javascript";
e.async = true;
e.src = "//" + disqus_shortname + ".disqus.com/embed.js";
(document.getElementsByTagName("head")[0] ||
document.getElementsByTagName("body")[0])
.appendChild(e);
//Hide the button after opening
document.getElementById("show-comments").style.display = "none";
}
}
function fbcomment() {
if (!fb_loaded) {
fb_loaded = true;
var e = document.createElement("script");
e.type = "text/javascript";
e.async = true;
e.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2&appId=FACEBOOK_APP_ID&autoLogAppEvents=1";
(document.getElementsByTagName("head")[0] ||
document.getElementsByTagName("body")[0])
.appendChild(e);
//Hide the button after opening
document.getElementById("show-comments").style.display = "none";
}
}
//Opens comments when linked to directly
var hash = window.location.hash.substr(1);
if (hash.length > 8) {
if (hash.substring(0, 8) == "comment-") {
disqus();
}
if (hash.substring(0,11) == "fb-comments") {
fbcomment();
}
}
//Remove this if you don't want to load comments for search engines
if(/bot|google|baidu|bing|msn|duckduckgo|slurp|yandex/i.test(navigator.userAgent)) {
disqus();
fbcomment();
}
</script>
In short, what this code is doing is wrapping the default disqus comment handler, as well as the facebook handler provided by facebook, inside a container that’s only loaded if the user clicks on the button, OR it’s a search bot.
To see this in action, check it out: Installing FFmpeg on CentOS without a lot of trouble Scroll to the very bottom, where the comment section is. Hope this helps someone out.
