title: Load Disqus comments on blogger post using jquery colorbox
body: <p>I am working on a <strong>blogger</strong> site with <strong>Disqus</strong> comments on and I am trying to make it load comments into jquery <strong>colorbox</strong>.</p>
  
  <p>I have two scripts at the top of <code>&lt;/body&gt;</code> tag that loading some Disqus <code>js</code> files. The first script loads the <code>count.js</code> and the second one loads the <code>embed.js</code>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;i class='fa fa-comment'/&gt;
  &lt;a class='show-comments'&gt;
      &lt;span class="disqus-comment-count" data-disqus-url='***'&gt;Counting...&lt;/span&gt;
  &lt;/a&gt;
  &lt;div id='disqus_thread'/&gt;
  </code></pre>
  
  <p><strong>Call of count.js</strong></p>
  
  <pre><code>&lt;script id="dsq-count-scr" src="//***.disqus.com/count.js" async='async'&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>Call of embed.js</strong></p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
      $(document).ready(function() {
          $('.show-comments').on('click', function(){
              var disqus_shortname = '***'; // Replace this value with *your* username.
  
              // ajax request to load the disqus javascript
              $.ajax({
                  type: "GET",
                  url: "http://" + disqus_shortname + ".disqus.com/embed.js",
                  dataType: "script",
                  cache: true
              });
              // hide the button once comments load
              $(this).fadeOut();
          });
      });     
  &lt;/script&gt;
  </code></pre>
  
  <p>So, after all, I also want when user click on <code>show-comments</code> link to load Disqus comments into colorobox!!!</p>
  
  <p>I tried some stuff like add <code>inline</code> class to the link and point <code>href</code> to <code>#comments</code> id of Disqus comments body, but nothing. Any idea?</p>