display disqus comment on the homepage of blogger

Question

what I see is the disqus comment will only be shown in the item page, so how to display disqus comments at the home page of my blog that hosted on blogger.com. so anyone can write a comment from the home page. not necessarily in the item page. so if the home page of my blog there are 7 posts articles, then the Disqus comment form will appear at the bottom of each post. is this possible for me to do?

here's the code

     <script type='text/javascript'>
        var disqus_shortname = &quot;nameorid&quot;;
        var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
        if (!disqus_blogger_current_url.length) {
            disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
        }
        var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
        var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
     (function() {
                var bloggerjs = document.createElement(&quot;script&quot;);
                bloggerjs.type = &quot;text/javascript&quot;;
                bloggerjs.async = true;
                bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;;
                (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
            })();
        (function() {
            var bloggerjs = document.createElement(&quot;script&quot;);
            bloggerjs.type = &quot;text/javascript&quot;;
            bloggerjs.async = true;
            bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;;
            (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
        })();
        </script>

Answer 1

First of all you should know that Disqus doesn't support showing more than one form per page by default.

So the given code you've sent will not help you. You have to attach showing disqus form to an event (click, scroll ... etc). I've made simple code for click and scroll events.

Method one (Click Event): check result here

1- Place a button within posts loop inside Blog1 widget to pass each post data to show disqus form function:

<button expr:onclick='"placeDisqus(this, \"" + data:post.id + "\", \"" + data:post.url + "\", \"" + data:post.title + "\")"' type='button'>Show Disqus</button>

2- Place this code before </body> :

<script type='text/javascript'>/*<![CDATA[*/

// prepare disqus holder div
var disqusContainer = document.createElement("div");
disqusContainer.setAttribute('id','disqus_thread');


function placeDisqus(button, identifier, postLink, postTitle){

  // check if first time for loading disqus 
  if( document.body.classList.contains('disqusLoaded') ){

    // remove old holder set new holder
    var oldContainer = document.getElementById('disqus_thread');
    oldContainer.parentNode.removeChild(oldContainer);
    button.after( disqusContainer );

    // reset disqus form
    DISQUS.reset({
      reload: true,
      config: function () {  
        this.page.url        = postLink;
        this.page.identifier = identifier;  
        this.page.title      = postTitle;
      }
    });

  } else {

    // set disqus holder
    button.after( disqusContainer );

    // initializing disqus for first time
    window.disqus_config = function () {
      this.page.url         = postLink;
      this.page.identifier  = identifier;  
      this.page.title       = postTitle;
    };
    var d = document, s = d.createElement('script');
    s.src = 'https://testmultipledisqus.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);


    // add class to prevent re-initializing 
    document.body.classList.add('disqusLoaded');
  }
}
/*]]>*/</script>

Method Two (ScrollEvent): check result here

1- You have to pass each post data using attributes for <article> tag, so you should add data-id and data-url as attributes. like that:

<article expr:data-id='data:post.id' expr:data-url='data:post.url'>

2- Place this code before </body> :

<script type='text/javascript'>/*<![CDATA[*/

  // prepare disqus holder div
  var disqusContainer = document.createElement("div");
  disqusContainer.setAttribute('id','disqus_thread');

  // attach disqus init to scroll event 
  document.onscroll = function(){

    document.querySelectorAll('article').forEach(function(article){
      var art_id = article.getAttribute('data-id');
      var art_url = article.getAttribute('data-url');
      var win_bottom = window.pageYOffset + window.innerHeight;

      // check user scroll 
      if( ( window.pageYOffset >= article.offsetTop ) && (article.offsetTop + article.offsetHeight ) > win_bottom  ){

        // check if first time for loading disqus at on same article 
        if( !article.classList.contains('active-disqus-article') ){

          // check if first time for loading disqus on page
          if( document.body.classList.contains('disqusLoaded') ){

            // remove old holder set new holder
            var oldContainer = document.getElementById('disqus_thread');
            oldContainer.parentNode.removeChild(oldContainer);
            article.querySelector('.comments-head').after( disqusContainer );

            // reset disqus form
            DISQUS.reset({
              reload: true,
              config: function () {  
                this.page.url       = art_url;
                this.page.identifier    = art_id;  
              }
            });

          } else { // first time to load disqus on page

            // set disqus holder
            article.querySelector('.comments-head').after( disqusContainer );

            // initializing disqus for first time
            window.disqus_config = function () {
                this.page.url       = art_url;
                this.page.identifier    = art_id;   
            };
            var d = document, s = d.createElement('script');
            s.src = 'https://testmultipledisqus.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);


            // add class to prevent re-initializing on same page 
            document.body.classList.add('disqusLoaded');
          }
            // add class to prevent re-initializing on same article
          if( document.querySelector('.active-disqus-article') ){
            document.querySelector('.active-disqus-article').classList.remove('active-disqus-article');
          }
          article.classList.add('active-disqus-article');
        }
      }
    });
  }
/*]]>*/</script>

!! remember that it's a sample code, you have to edit it to be convenient for your template tags.