Integrating Disqus

Posted by paul on 2013.11.07

Disqus

Tutorial from Disqus for integrating Universal Code into a website is not that great imo. It was simplified (too simplified) for easier implementation but definitely not a recommend implementation in my opinion. As I added Disqus on my site, I took notes. Below is my note.

Requirements

  1. You need to have a website that normal internet users can access. Disqus set up can be tested/used only when it is set up on a real world website.
  2. You need to be able to add/edit codes on the server.

Sign up at disqus.com

  1. Sign up at Disqus.com
  2. I recommend not using your primary, personal email account for signing up. Just get a second gmail account.
  3. Go through the setup process and register your site.
  4. Stop at the point where you pick Installation Platform and go on to the next step in this procedure.

Test.html

First create test.html to use for testing.

<!DOCTYPE html>
<html>
<head>
<title>Disqus Test</title>
</head>

<body>
<p>
Test content
</p>

</body>
</html>

Choosing Universal Code for installation

  1. When choosing platform to install, pick Universal Code.
  2. You will be given following code. You can copy and paste the code into 'each' html file and it will work. BUT do not do it. Before copying/pasting any of the code onto your web pages, you first need to separate the code into 3 separate parts: HTML, CSS, and JavaScript. Again, do not copy and paste the code from Disqus yet.
  3. <div id="disqus_thread"></div>
    <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'paulco'; // required: replace example with your forum shortname
    
        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
    disqus.js
  4. In above code, paulco is the disqus_shortname. Replace paulco with your own and save the file as disqus-code.txt for now. You will copy and paste snippets of code from disqus-code.txt

Splitting up code

  1. Three separate files (test.html, disqus.css, disqus.js) will be created/updated. Some of the lines from the Universal Code will be copied/pasted into the 3 files. For this tutorial, all 3 files are assumed to be in the same directory.
  2. Copy and paste following into bottom of test.html, before </body>. All of these lines are from the Universal Code from Disqus. Replace paulco with your own.
  3. <div id="disqus_thread"></div>
    
    <script src="disqus.js" language="JavaScript" async></script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
  4. At this point, test.html will look like this.
  5. <!DOCTYPE html>
    <html>
    <head>
        <title>Disqus Test</title>
    </head>
    <body>
    <p>
    Test content
    </p>
    
    <div id="disqus_thread"></div>
    
    <script src="disqus.js" language="JavaScript" async></script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
    
    </body>
    </html>
  6. Create disqus.css. Copy and paste the following lines into disqus.css. Note none of these are present in the Universal Code from Disqus. You can of course change the look/feel if you like.
  7. #disqus_thread {
        margin: 2.5em 2.5em 1em 2.5em;
        padding: 1em 1.5em 1.5em 1.5em;
        font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
        background-color: gainsboro;
        word-wrap: break-word;
        white-space: pre-wrap; /* css-3 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
    }
  8. Copy and paste following into disqus.js. All of the lines are from the Universal Code from Disqus.
  9. /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'paulco'; // required: replace example with your forum shortname
    
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();

Final touches in test.html

  1. Now tie the 2 files (disqus.js and disqus.css) into test.html
  2. <!DOCTYPE html>
    <html>
    <head>
        <title>Disqus Test</title>
        <link rel="stylesheet" type="text/css" href="disqus.css" />
    </head>
    <body>
    
    <p>
        Test content
    </p>
    
    <div id="disqus_thread"></div>
    
    <script src="disqus.js" language="JavaScript" async></script>
    
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
    
    </body>
    </html>

Testing

  1. Upload all 3 files (test.html, disqus.js, disqus.css) to your website (ex.: http://yoursite.com/test.html) to test. Keep all 3 files in same directory for simplicity. You can not test the files when they are saved locally on your PC because Disqus needs to be able to send back their code to a real world website.
  2. You will see following if everything is set up properly.

That is it!