Skip to content

Latest commit

 

History

History

universal

README.md

Universal Code installation instructions

  1. Place the following code where you'd like Disqus to load:

    <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 () {
	// Replace PAGE_URL with your page's canonical URL variable
	this.page.url = PAGE_URL;  

	// Replace PAGE_IDENTIFIER with your page's unique identifier variable
	this.page.identifier = PAGE_IDENTIFIER; 
    };
    */

    (function() {  // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
	var d = document, s = d.createElement('script');

	// IMPORTANT: Replace EXAMPLE with your forum shortname!
	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" rel="nofollow">
	comments powered by Disqus.
    </a>
</noscript>

  2. (Recommended) Edit the RECOMMENDED CONFIGURATION VARIABLES section using your CMS or platform's dynamic values. See our documentation to learn why defining identifier and url is important for preventing duplicate threads.

Continue to the getting started guide.

How to display comment count

  1. Place the following code before your site's closing </body> tag:

    <-- IMPORTANT: Replace EXAMPLE with your forum shortname! -->
<script id="dsq-count-scr" src="//EXAMPLE.disqus.com/count.js" async></script>

  2. Append #disqus_thread to the href attribute in your links. This will tell Disqus which links to look up and return the comment count. For example: <a href="http://example.com/bar.html # disqus_thread">Link</a>.

Advanced scenarios

Disqus is designed to load at the bottom of your post content, but it is flexible and can be loaded in a variety of different layouts and with different user interactions.

NOTE: Each of these scenarios contains compromises you would have to weigh against their benefits:

  • Hiding the comments initially will significantly lower engagement from the community.
  • Deferring the loading of Disqus will eliminate the SEO benefits of Disqus.

Infinite scroll

Removes <div id="disqus_thread"></div> from the previous article DOM before reloading Disqus in the new article. Disqus is limited to one instance in the entire DOM at a time. If multiple are included, only one will be loaded. Uses the DISQUS.reset() function to reload a new Disqus thread after your page's content has updated.

Load after click

Uses an event handler like .onclick to refer to an anonymous function where you can place the Disqus Universal Code.

Show after click

Loads the Disqus Universal Code into a <div> that is hidden by default and is unhidden after user interaction like a click. Uses display: none on the parent <div> so that Disqus can detect it is hidden and prevent expected results.

Sidebar

Similar to preloading before a click, load the Disqus Universal Code into a sidebar <div> that is hidden by default and is unhidden after user interaction like a click. Uses display: none on the parent <div> so that Disqus can detect it is hidden and prevent expected results.

Lazy load

Defers loading Disqus until the user has brought comments into view. This is check is triggered after loading, when the user scrolls, and when the window size changes.

Site Examples

Additional customization

See our Tightening your Disqus integration documentation.