Captain_Planet
Captain_Planet

Reputation: 1338

Wordpress, Disqus comments and the wrong URL

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?

Upvotes: 2

Views: 710

Answers (1)

Ahsan
Ahsan

Reputation: 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.

Upvotes: 1

Related Questions