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