Wordpress, Disqus comments and the wrong URL

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 <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
        </div>
        <!-- /#comments -->

and in my page I display how many comments have been made on the current post like so:

<a href="<?php the_permalink(); ?>#disqus_thread">0 Comments</a>

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:

<a href="https://www.example.com/blog/my-post-name#disqus_thread">0 Comments</a>

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:

<a href="https://www.example.com/blog/?p=232#disqus_thread">0 Comments</a>

But that feels a bit hacky. Any ideas anyone?

Thanks!

UPDATE

I can confirm that rendering my comments anchor like so will work:

<a href="<?php echo home_url(); ?>/?p=<?php echo get_the_ID(); ?>#disqus_thread">0 Comments</a>

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?

Ahsan Ahsan · Accepted Answer · 2018-10-23T06:51:11

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.

Wordpress, Disqus comments and the wrong URL

1 Answers