I iterated through the solutions above, and none worked out of the box. Checking through source, I cobbled this, which works. It's not far off, but makes all the difference it seems.
<script type="text/javascript">
var disqus_shortname = 'superchocolate',
disqus_identifier = 'default',
disqus_title = 'I Heart Chocoloate',
disqus_config = function(){
this.language = 'en';
};
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
function loadDisqus( identifier, url, title )
{
DISQUS.reset({
reload: true,
config: function ()
{
this.page.identifier = identifier;
this.page.url = url;
this.page.title = title;
this.language = 'en';
}
});
}
</script>
In your markup, put the standard:
<div id="disqus_thread"></div>
And then in your click actions, it's pretty simple. I had a member called 'data' that I was getting back from an AJAX call.
loadDisqus( 'ugc-' + data.id, location.protocol+'//'+location.hostname + "/ugc-submission-" + data.id + "/", data.title );
This worked for me, solving a problem in the code above that had similar comments being passed between several threads.
I'm showing my Disqus thread in a Bootstrap modal, I call loadDisqus before the call to $(el).moda('show') and it is seamless.