Wordpress, Disqus comments and the wrong URL - wordpress

Question

I have a Wordpress page that uses Disqus comments. At the bottom of the page I have this:
<!-- DISQUS COMMENTs -->
<div id="comments">
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
var disqus_config = function () {
this.page.url = '<?php the_permalink(); ?>'; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = '<?php the_ID(); ?>'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://example.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
</div>
<!-- /#comments -->
and in my page I display how many comments have been made on the current post like so:
0 Comments
The trouble is, it's not working. The comments always appear as zero even though there are comments on the page. And I think I know why this happens, but I'm not sure how to property resolve it.
So:
My 'comments' anchor renders like so:
0 Comments
And in my JavaScript code at the bottom, the page URL gets set correctly like so:
this.page.url = 'https://www.example.com/blog/my-post-name'
However if I post a comment and log in to my Disqus control panel and hover over the post URL, the URL format is like so:
https://www.example.com/blog/?p=232
So it seems like the Disqus JavaScript is reading the URL of the page before the URL has been rewritten! Does that make sense?
A potential way to resolve it is to make my comments anchor render like so:
0 Comments
But that feels a bit hacky. Any ideas anyone?
Thanks!
UPDATE
I can confirm that rendering my comments anchor like so will work:
0 Comments
However this is more of a workaround. How can I make Disqus store my rewritten (cleaner looking) URLs instead of the Wordpress 'Plain' (and ugly) URL?

Answer 1

function disqus_embed($disqus_shortname) {
global $post;
wp_enqueue_script('disqus_embed','http://'.$disqus_shortname.'.disqus.com/embed.js');
echo '<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = "'.$disqus_shortname.'";
var disqus_title = "'.$post->post_title.'";
var disqus_url = "'.get_permalink($post->ID).'";
var disqus_identifier = "'.$disqus_shortname.'-'.$post->ID.'";
</script>'; }
Use this code
<?php disqus_embed('myexampleblog'); ?>//replace myexampleblog with your blog or site name register on disqus.
anywhere you want in your single.php and page.php files to embed and show Disqus comments for that page.