With all the new features being introduced in blogger, there was still a feature I would like which was not included - Threaded Comments. So I decided to mix the existing comment system with a little bit of javascript and come up with my own version of threaded comments. The advantage of using this is that you are still allowing blogger
to manage your comments unlike a couple of other tools I have seen. Check out the Threaded version in action
by adding your comments below ;).
The idea behind this came from the simple observation that most of us use @AuthorName to reply to comments posted by other users in 'single' threaded comments. So the javascript I wrote just parses the comment bodies for this author name (or comment ids) and then searches for appropriate comments to find parents of the reply comments.
Below is an image of how after I implemented this idea the comments section on my blog changed:
Features:
In addition to the threaded support:
- Include multiple replies in your comment using multiple @replyTargets on separate lines in your comment
- Blog authors can have their comments highlightd differently - use css styles for 'blog-author-comment' and 'blog-nonauthor-comment'
- Include multiple replies in your comment using multiple @replyTargets in the comment
- Hide/Show individual comments
- Configurable template to display comments - use you custom template to call applyCommentTemplate();
How to install:
Note: Remember to back up your existing template before making any changes to it.
Here are the steps to follow:
- Include the java script file to the top of your template just before the <b:skin> tags starts
<script type="text/javascript">
//<![CDATA[
/*
--- Threaded Comments ---
v 0.9.3 15th March 2009
By Shams Mahmood
http://shamsmi.blogspot.com
*/
function Author(C,A,B){this.id=C;this.name=A;this.url=B;this.toString=function(F){var E="\t";if(F){for(var D=0;D<F;D++){E+="\t"}}return"Author[\n"+E+"id="+this.id+", \n"+E+"name="+this.name+", \n"+E+"url="+this.url+"\n"+E+"]"}}function Comment(E,H,G,C,B,D,F,A){this.id=E;this.sequenceNumber=H;this.postedTime=G;this.body=F;this.deleted=A;this.deleteUrl=B;this.deleteText=D;this.parentId="";this.children=new Array();this.level=0;this.author=C;this.getChildCount=function(){return this.children.length};this.addChild=function(I){this.children[this.getChildCount()]=I.id;I.parentId=this.id;I.level=this.level+1};this.toString=function(K){var J="\t";if(K){for(var I=0;I<K;I++){J+="\t"}}return"Comment[\n"+J+"id="+this.id+", \n"+J+"sequence="+this.sequenceNumber+", \n"+J+"deleted="+this.deleted+", \n"+J+"parentId="+this.parentId+", \n"+J+"children=["+this.children+"], \n"+J+"level="+this.level+", \n"+J+"author="+this.author.toString(1)+", \n"+J+"posted time="+this.postedTime+", \n"+J+"body="+this.body+"\n"+J+"]"}}function trimBrsFromString(C){var F=trimString(C);var B=["<br>","<br >","<br/>","<br />","<BR>","<BR >","<BR/>","<BR />"];if(F){var E=true;while(E){E=false;for(var D in B){var A=B[D];if(F.indexOf(A)==0){F=F.substring(A.length);F=trimString(F);E=true}var H=F.length;var G=F.lastIndexOf(A);if(G>=0&&G==H-A.length){F=F.substring(0,G);F=trimString(F);E=true}}}}return F}function trimString(A){var E="";if(A){var D=false;for(var B=0;B<A.length;B++){var F=A.charAt(B);if(!D&&F!=" "&&F!="\n"&&F!="\t"){D=true}if(D){E+=F}}D=false;var C=-1;for(var B=E.length-1;!D&&B>0;B--){var F=E.charAt(B);if(!D&&F!=" "&&F!="\n"&&F!="\t"){D=true;C=B}}if(C>0){E=E.substring(0,C+1)}}return E}function addItem(A,B){A[B.id]=B}function getAllItems(C){var D=new Array();var B=0;for(var A in C){D[B]=C[A];B++}return D}function getItemsCount(C){var B=0;for(var A in C){B++}return B}var ALL_AUTHORS=new Object();var ALL_COMMENTS=new Object();function getNewAuthorId(){var C=1;for(var A in ALL_AUTHORS){if(ALL_AUTHORS[A]&&ALL_AUTHORS[A].id){var B=ALL_AUTHORS[A].id;if(B>=C){C=B+1}}}return C}function createAuthor(C,A,B){return new Author(C,A,B)}function addAuthor(A){addItem(ALL_AUTHORS,A)}function getAllAuthors(){return getAllItems(ALL_AUTHORS)}function getAuthorsCount(){return getItemsCount(ALL_AUTHORS)}function findAuthor(C,B){for(var A in ALL_AUTHORS){if(ALL_AUTHORS[A]){if(ALL_AUTHORS[A].name==C&&ALL_AUTHORS[A].url==B){return ALL_AUTHORS[A]}}}return null}function getNewCommentSequence(){var C=1;for(var A in ALL_COMMENTS){if(ALL_COMMENTS[A]&&ALL_COMMENTS[A].sequenceNumber){var B=ALL_COMMENTS[A].sequenceNumber;if(B>=C){C=B+1}}}return C}function createComment(E,H,G,C,B,D,F,A){return new Comment(E,H,G,C,B,D,F,A)}function addComment(A){addItem(ALL_COMMENTS,A)}function getAllComments(){return getAllItems(ALL_COMMENTS)}function getRootComments(){var D=new Array();var C=0;for(var A in ALL_COMMENTS){var B=ALL_COMMENTS[A];if(B&&B.level==0){D[C]=B;C++}}return D}function getCommentsCount(){return getItemsCount(ALL_COMMENTS)}function findComment(B){for(var A in ALL_COMMENTS){if(ALL_COMMENTS[A]){if(ALL_COMMENTS[A].id==B){return ALL_COMMENTS[A]}}}return null}function findLastCommentByAuthorName(C){var B=null;for(var A in ALL_COMMENTS){if(ALL_COMMENTS[A]){if(ALL_COMMENTS[A].author.name==C){B=ALL_COMMENTS[A]}}}return B}function findLastCommentByPartialAuthorName(C){var B=null;for(var A in ALL_COMMENTS){if(ALL_COMMENTS[A]){if(ALL_COMMENTS[A].author.name.toLowerCase().indexOf(C.toLowerCase())==0){B=ALL_COMMENTS[A]}}}return B}function addCommentHierarchy(D,C){if(D){C[C.length]=D;var A=D.children;for(var B in A){addCommentHierarchy(findComment(A[B]),C)}}}function getCommmentsInSortedOrder(){var D=new Array();var A=getRootComments();for(var B in A){var C=A[B];addCommentHierarchy(C,D)}return D}function ParsedResult(A,B){this.parentComment=A;this.body=B;this.toString=function(){return"[parentComment="+this.parentComment+", body="+this.body+", ]"}}function findParentCommentFromDescriptor(A){var B=findComment(A);if(B==null){B=findLastCommentByAuthorName(A)}if(B==null){B=findLastCommentByPartialAuthorName(A)}return B}function parseCommentBody(B,F){B=trimString(B);var A=B.indexOf("@");if(A==0){var H=B.indexOf("\n",0);var G=B.indexOf("<",0);var D=H;if(G>0&&(G<D||D<0)){D=G}if(D>2){var O=B.substring(1,D);O=trimString(O);var K=findParentCommentFromDescriptor(O);if(K==null){var J=O.indexOf(" ");if(J>0){var N=trimString(O.substring(0,J));K=findParentCommentFromDescriptor(N);if(K!=null){D=J+1}}}if(K!=null){var P=null;var Q=D;var C=B.indexOf("@",Q+1);if(C>Q){var M=trimString(B.substring(C));P=parseCommentBody(M,C)}if(P&&P.length>0&&P[0].parentComment!=null){var L=trimString(B.substring(D,C));var I=new ParsedResult(K,L);var E=[I].concat(P);return E}else{var L=trimString(B.substring(D));var I=new ParsedResult(K,L);return[I]}return E}}}var I=new ParsedResult(null,B);return[I]}function buildComment(C,K,H,L,G,I,M,A){var F=findAuthor(C,K);if(!F){F=createAuthor(getNewAuthorId(),C,K);addAuthor(F)}var D=parseCommentBody(A,0);for(var J in D){var E="";E=D[J].body;E=trimBrsFromString(E);var B=createComment(H+"."+J,getNewCommentSequence(),L,F,I,M,E,G);addComment(B);if(D[J].parentComment!=null){D[J].parentComment.addChild(B)}}}function substituteConstant(A,D,C){var B=A;while(B.indexOf(D)>=0){B=B.replace(D,C)}return B}function substituteConstantIfValueExists(D,A,I,C,H){var J=D;var F=J.indexOf(A);var E=J.indexOf(I);while(F>0&&E>F){var B=J.substring(F,E+I.length);var G=null;if(H&&H.length>0){G=substituteConstant(B,C,H);G=G.substring(A.length,G.length-I.length)}else{G=""}J=J.replace(B,G);F=J.indexOf(A);E=J.indexOf(I)}return J}function isBlogAuthor(B){var A=false;if(window.BLOG_AUTHORS){for(var C in BLOG_AUTHORS){if(BLOG_AUTHORS[C]==B){A=true;break}}}else{if(window.BLOG_AUTHOR){A=(BLOG_AUTHOR==B)}}return A}function applyCommentTemplateToComment(F,E){var A=F;A=substituteConstant(A,"${COMMENT.ID}",E.id);A=substituteConstant(A,"${COMMENT.TIMESTAMP}",E.postedTime);A=substituteConstant(A,"${COMMENT.AUTHOR.NAME}",E.author.name);var C=(E.level>3)?"gt3":E.level;A=substituteConstant(A,"${COMMENT.LEVEL}",C);A=substituteConstantIfValueExists(A,"${COMMENT.AUTHOR.URL.EXISTS.START}","${COMMENT.AUTHOR.URL.EXISTS.END}","${COMMENT.AUTHOR.URL}",E.author.url);A=substituteConstant(A,"${COMMENT.AUTHOR.URL}",E.author.url);A=substituteConstant(A,"${COMMENT.DELETE.URL}",E.deleteUrl);A=substituteConstant(A,"${COMMENT.DELETE.TEXT}",E.deleteText);A=substituteConstant(A,"${COMMENT.BODY}",E.body);var D=isBlogAuthor(E.author.url)?"blog-author-comment":"blog-nonauthor-comment";A=substituteConstant(A,"${BLOG.AUTHOR}",D);A=substituteConstant(A,"${BLOG.POST.COMMENT.LINK}",BLOG_POST_COMMENT_LINK);var B=(E.deleted)?"deleted-comment":"";A=substituteConstant(A,"${COMMENT.DELETED.STYLE}",B);document.writeln(A)}function applyCommentTemplate(C){var D=getCommmentsInSortedOrder();for(var A in D){var B=D[A];applyCommentTemplateToComment(C,B)}}function setElementDisplay(B,C){var A=document.getElementById(B);if(A){A.style.display=C}}function setElementsDisplay(B,C){for(var A in B){setElementDisplay(B[A],C)}}function showElements(A){setElementsDisplay(A,"block")}function hideElements(A){setElementsDisplay(A,"none")}function showElement(A){setElementDisplay(A,"block")}function hideElement(A){setElementDisplay(A,"none")}function toggleElementDisplays(C,B,D){if(C.innerHTML=="[hide]"){for(var A in B){if(D[A]=="both"||D[A]=="hide"){hideElement(B[A])}}C.innerHTML="[show]"}else{for(var A in B){if(D[A]=="both"||D[A]=="show"){showElement(B[A])}}C.innerHTML="[hide]"}};// ]]>
</script>
Next you need add the css tyles for the comments section inside you <b:skin> section. Below is the one I am using in my blog:.comment-segment {
margin-top: 10px;
margin-right: 10px;
}
.comment-level-0 {
margin-left: 10px;
}
.comment-level-1 {
margin-left: 25px;
}
.comment-level-2 {
margin-left: 40px;
}
.comment-level-3 {
margin-left: 55px;
}
.comment-level-gt3 {
margin-left: 70px;
}
.blog-author-comment {
background-color: #F0F0BE;
border: 1px solid #FFFF99;
}
.blog-nonauthor-comment {
background-color: #B4C8F0;
border: 1px solid #7296E2;
}
.deleted-comment {
color: gray; font-STYLE: italic
}
.delete-comment-icon {
background: url("http://www.blogblog.com/rounders3/icon_delete13.gif")
no-repeat;
}
.comment-time {
font-size: 80%;
margin: inherit;
padding-left: 10px;
padding-bottom: 10px;
}
.reply-guide {
background-color: #FFFFFF;
border: #076a93 1px dotted;
display: none;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 0.75em;
padding-top: 5px;
margin-right: 10px;
margin-bottom: 10px;
}
.reply-guide-header {
color: #076a93;
padding-top: 10px;
}
.reply-guide-list {
list-style: none;
padding-left: 2px;
margin-left: 2px;
}
.reply-guide-example {
font-size: 85%;
margin-right: 5px;
margin-bottom: 10px;
float: right;
border: 1px dotted #076a93;
padding: 5 5 5 5;
}
Lastly you need to insert the template for to render the threaded blog comments.
You need to find the portion in your template responsible for rendering comment. In my template it started with:<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
...
</div>
</b:includable>
I just replaced that <b:includable> with the following:
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>:
<b:else/><data:post.numComments/><data:commentLabelPlural/>:
</b:if>
</h4>
<b:if cond='data:post.numComments > 0'>
<!-- Include a post comment link before rendering the comments -->
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>
<!-- Loop through the comments adding the comment bodies in a hidden div -->
<b:loop values='data:post.comments' var='comment'>
<div style="display: none;" expr:id='"comment-body-" + data:comment.id' >
<data:comment.body/>
</div>
</b:loop>
<!-- Now create the comment using our javascript -->
<script type="text/javascript">
// USE THIS if YOU Have multiple Authors adding them in a comma separated form after removing the '//' from the next line
// var BLOG_AUTHORS = ['http://www.blogger.com/profile/firstauthor', 'http://www.blogger.com/profile/secondauthor', 'http://www.blogger.com/profile/thirdauthor'];
// Use this if you have just one author like this blog :)
var BLOG_AUTHOR = 'http://www.blogger.com/profile/10301627897367423203';
var BLOG_POST_COMMENT_LINK = '<data:post.addCommentUrl/>';
var eCommentDelete = false;
var eAuthorUrl = '';
<b:loop values='data:post.comments' var='comment'>
eCommentDelete = false;
eAuthorUrl = '';
<b:if cond='data:comment.authorUrl'>
eAuthorUrl = "<data:comment.authorUrl/>";
</b:if>
<b:if cond='data:comment.isDeleted'>
eCommentDelete = true;
</b:if>
buildComment("<data:comment.author/>", eAuthorUrl,
"<data:comment.id/>", "<data:comment.timestamp/>", eCommentDelete,
"<data:comment.deleteUrl/>", "<data:top.deleteCommentMsg/>",
document.getElementById('comment-body-<data:comment.id/>').innerHTML);
</b:loop>
// <![CDATA[
var eCommentTemplate = '' +
'<div class="comment-segment comment-level-${COMMENT.LEVEL} ${BLOG.AUTHOR} ${COMMENT.DELETED.STYLE}" >' + '\n' +
' <a name="comment-${COMMENT.ID}"></a>' + '\n' +
' <span style="float: right; margin-right: 5px; " >' + '\n' +
' <a href="#" ' + '\n' +
' onclick="toggleElementDisplays(this, ' +
'[\'comment-${COMMENT.ID}-body\', \'comment-${COMMENT.ID}-footer\', \'reply-guide-${COMMENT.ID}\'], ' +
'[\'both\', \'both\', \'hide\']); return false;" >[hide]</a>' + '\n' +
' </span>' + '\n' +
' <span class="comment-author" >' +
'${COMMENT.AUTHOR.URL.EXISTS.START}' +
'<a href="${COMMENT.AUTHOR.URL}" rel="nofollow">' +
'${COMMENT.AUTHOR.URL.EXISTS.END}' +
'${COMMENT.AUTHOR.NAME}' +
'${COMMENT.AUTHOR.URL.EXISTS.START}' +
'</a>' +
'${COMMENT.AUTHOR.URL.EXISTS.END}</span>' + '\n' +
' said... ' + '\n' +
' <div id="comment-${COMMENT.ID}-body" class="comment-body" ><p>${COMMENT.BODY}</p></div>' + '\n' +
' <span class="comment-time">on ${COMMENT.TIMESTAMP}</span>' + '\n' +
' <div id="reply-guide-${COMMENT.ID}" class="reply-guide comment-level-0 " >' + '\n' +
' <span style="float: right;" ><a href="#" onclick="hideElement(\'reply-guide-${COMMENT.ID}\'); return false;" >[hide]</a></span>' + '\n' +
' <h4 class="reply-guide-header">How to Reply to this comment</h4>' + '\n' +
' <span>' + '\n' +
' To reply to this comment please ensure that <b>one</b> of the following lines: ' + '\n' +
' <ul class="reply-guide-list">' + '\n' +
'<li>@${COMMENT.ID}</li>' + '\n' +
'<li>@${COMMENT.AUTHOR.NAME}</li>' + '\n' +
' </ul>' + '\n' +
' is the <b>first line</b> of your comment. ' + '\n' +
' <br />' + '\n' +
' <a href="${BLOG.POST.COMMENT.LINK}"' + '\n' +
' >Click here to enter your reply</a>' + '\n' +
' </span>' + '\n' +
' </div>' + '\n' +
' <div id="comment-${COMMENT.ID}-footer" class="comment-footer">' + '\n' +
' <span><a ' +
'href="#" onclick="showElement(\'reply-guide-${COMMENT.ID}\'); return false;" >Reply</a></span> ' + '\n' +
' <span><a href="#comment-${COMMENT.ID}">Permalink</a></span> ' + '\n' +
' <span><a href="${COMMENT.DELETE.URL}" title="${COMMENT.DELETE.TEXT}" style="text-decoration: none;" ><span class="delete-comment-icon"> </span></a></span>' + '\n' +
' </div>' + '\n' +
'</div>' + '\n';
applyCommentTemplate(eCommentTemplate);
// ]]>
</script>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
Remember to replace the
var BLOG_AUTHORS =OR
['http://www.blogger.com/profile/firstauthor',
'http://www.blogger.com/profile/otherauthor'];
var BLOG_AUTHOR = 'http://www.blogger.com/profile/onlyauthor';segment with your appropriate profile url(s).
A sample blogger template is also available in case you want to skip some of the work.
Future work:
Unfortunately the way blogger comments need to be posted it is the responsibilty of the user now to include a @replyTarget line to the top of her comment. Once blogger supports inline comment forms completely (currently it is available only in draft mode) it will be possible to relieve the user of this task and use javascript to auto insert the @replyTarget line into the form.
Feel free to use this in your blogs and let me know your thoughts/bugs you find while using this :)
255 comments :
Post a Comment
and this is a reply to the first comment
Nice idea
Thanks
hi bro nice idea, blog annotation ;)
why not support annotation argument such as -
@shams(type: THUMBSUP)
Yup, the @authorName works properly only if you reply before that author has posted another message :). The @commentId will work always :)
Ya nice idea, will definitely look to implement it :). Keep the ideas coming.
Btw, currently the script will stop indentation after 5 levels, all following messages will then have the same indentation :)
Firstly the template should end with </body></html>
The other parts have come due to some bug in google site upload mechanism, cant get rid of it.
Secondly, code responsible for rendering the comments are the commnt template and the call to render the comments:
var eCommentTemplate = '' + ...;
applyCommentTemplate(eCommentTemplate);
Hope this helps, feel free to ask if you have more queries.
thanks, but I don't know how to apply that; I still don't understand where to put your step 3 in my template html. how do I figure that out?
You need to find (using your word processor like notepad) the following in your template:
<div class='comments' id='comments'>
...
<div>
I've seen a page at http://musebookreviews.blogspot.com/2008/07/book-thief-by-markus-zusak.html and I know that your template contains such a segment.
You just need to replace the inside of the div segment as mentioned in step there here
Again, thank you, but you were looking at the code for a specific entry in my blog. I can't find that code string you told me to find in the html for the general blog template. I searched for the line as you typed it (no results), then I searched for "comments", "div", and "id" and found nothing that even resembles "div class='comments' id='comments'". Could you take another look?
(Sorry to be such a hassle.)
I would be glad to help you out (no hassles ;) )
Do you think you can send me your blogger template where I can have a look at shamsDOTmahmoodATgmailDOTcom
Remember to replace the uppercase words :)
I have, however, noticed that it's slightly buggy on mine-- the next person to comment propagates his URL-- everyone who has posted before him now has their name hyperlinked to either his manually-entered URL (via the Name/URL option) or his blogger profile (if logged in).
Obviously, this isn't happening on your blog :) Do you happen to have any ideas of why this is happening? Thanks!!
Firstly, you are welcome.
Found the problem, you seem to have a loop running inside to generate the author url just before the call to buildComment(...). As a result the author url is always set to the last persons url. Found it by looking at the generated source. You will see so many assignments to eAuthorUrl before a call to buildComment(...)
I think there is an additional b:loop for comment during the author url generation
Also you need to correct the value for BLOG_AUTHOR
Thanks for the help!
When I first pasted in the code from your blog, there was a missing closing tag for that loop right before buildComment(), blogger complained about it when I tried to save my template. I didn't know where it was supposed to close, so obviously, I put the closing tag in the wrong place ;-)
And I could've sworn I changed the BLOG_AUTHOR value to my profile, but I guess I must've accidentally reverted to an older version through my many change iterations.
Thank you again, I appreciate it! With this feature, everything I want in a blogging service is on blogger :-D
you're welcome, glad I could be of help.
One thing - would it be possible to somehow modify the code to allow e-mail notifications for specific replies only? I can't seem to figure out how.
Hi, if you can mail me the template you are trying I can fix it for you. Probably missing a closing tag somewhere.
Just FYI, I had this exact same problem, too, so I believe the closing tag is also missing from the code you're having us copy and paste.
From my earlier comment here, this is where it's missing:
"there was a missing closing tag for that (generate author url) loop right before buildComment()"
On a side note-- months later I'm still chugging along just fine with my blog, still enjoying nested comments. Thank you again! :)
ur welcome. great to hear it is working just as good for you.
I think I fixed that error in the post after u mentioned it last time. So not sure if brazen lass is facing the same problem :(
Btw, I'll be updating some of the code in early decemeber-be sure to check the latest version.
To reply please follow the instructions ;)
test
this should work :)
THIS is the reply.
So how do you go about using javascript to auto insert the replyTarget? Is it at all possible to insert it after the user clicks the Post button so that they never even have to see the replyTarget line?
I think what he means is that once this features becomes built-in... in Blogger itself, we won't have to manually copy and paste those @replyTarget tags anymore, like I did just now. We won't have to insert Shams' code into our template.
Kind of like on Myspace blogs, or LiveJournal-- each individual comment has a "reply to this" link that you can simply click on, type in your stuff, post it, and voila! It's automatically put in the right spot. Which... I think is exactly what you are describing, and what Shams says is currently under development on Blogger itself.
Actually Helly, I was referring to using javascript have insert the @target into the comment when the form is submitted. I'm not sure whether blogger is developing the reply feature like in myspace or other sites.
I thought he was referring to the embedded comment form that appears at the bottom of the blog page (i.e. you don't have to go to a separate comment page to leave a comment).
I've been playing with his code and was able to make the comment form appear under the individual comment when the Reply link is clicked, but without being able to somehow automatically insert the replyTarget, it's not really useful. It was not immediately obvious to me how I might do that, hence my original question.
Did I misunderstand what was meant by "inline comment form"?
Try attaching a javascript onsubmit event to your comment form. And inside it prepend the @replyTarget with a newline to the comment
The inline comment "form" looks like this: http://h1.ripway.com/jerrade/comment-form.gif (it won't let me post a snippet here).
Am I allowed to add an event handler somewhere in there? There is no Form element to work with, and I don't get direct access to the submit button.
The form element is present inside the iframe. You need to attach the event handler to that form.
This link might come in handy:
http://www.michaelminella.com/javascript/unobtrusive-event-handling-with-prototype.html
Thanks for your help.
When I try to access the form in the iframe (document.getElementById('comment-editor').contentDocument.forms), I get a permission denied error. From what I've read, I'm assuming this is because the source of the iframe is at www.blogger.com/..., and my page is at blogspot.com. Apparently you get an error if the domains don't match. So close, yet so far...
I can view all the objects in Firebug, but when I try to access them in code, I get the access denied error.
that's bad news :(
need to keep using the @target then
can you mail me your template?
I think you have misplaced the comment-form in your template.
sent
and replied ;)
All fixed. Thanks!
test
test reply
The javascript changed from: if(G==H-A.length)
to: if(G>=0&&G==H-A.length)
Updated the post and sample template too
you should be able to see 'sent' now after fix :D
Works! Thanks!
you're welcome
Very fun!
good idea
testing comment
@Jack
testing comment
I'm having the same problem. Is there an easy fix?
Here's the blog in question:
http://srknipe.blogspot.com/2009/02/debatable_8500.html#comments
Excerpt from solution for jumco's problem:
I think I found the problem :)
<b:if cond='data:post.numComments > 0'>
<!-- Include a post comment link before rendering the comments -->
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>
The first if condition is stating that enter only if there are more than zero comments.
Inside the b:if you have the code (<b:include data='post' name='comment-form'/>)
to render the comment form. Hence when you have zero comments you never get to see
the comment form :).
Please try fixing this and let me know if you face more problems. I would remove the
outermost b:if unless you have some other reason for having it.
What a strange piece of code. Anyway, it seems to be working now...thank you!
great and you're welcome ;)
It´s working! ;)
I have one problem, the function moderate comments is always on but it dosent work with nested comments. Can you please help me??
any links where I can see this in action?
http://dkqa.blogspot.com/
I just checked the moderated comments and it worked for me. Moderated comments don't appear unless you have published them from blogger.
Wow, this is great. thank you! i haven't tried it myself but i definitly would :D
you're welcome :)
ps : sorry for my bad english.
firstly, you're welcome.
great to hear you're using it too. I've also change the reply instruction as you've done on your site. Also notified blogger buster - that was a very nice idea.
One way to skip the problem of tracking comments is to provide two toggling views: threaded and non-threaded. You can toggle visibility of those two sections depending on what the user wants to see.
Dilarang Melarang appears to be a very popular blog and many thanks to Marzuki to including a translation of this article in his blog. Best of luck with your post and thanks in advance for the credits. :D
thanks for including a translation on your site.
I've been looking everywhere for a way to thread comments - was almost going to sign up for Intense Debate but didn't really like the idea of it handling my blogger comments
Cheers :)
you're welcome. glad you found it useful :)
can you see that post.
my comment form do not appears if thera are no comments yet.
data:post.numComments 0'
I already change the number 0 to 1 but it do not work on my blog.
can you fix it for me?
sorry for my bad english but i hope you understand.
later i will send you my templet to you,
thank you
thanks for fix it up!
great. thanks
But I also have the same problem - when I write a new post, the embedded 'post comment' box doesn't show up because there are 0 comments
I tried reading your solution, and found the data:post.numComments html
From the solution - "The first if condition is stating that enter only if there are more than zero comments."
I understand that - but what is the code that I should replace it with to allow comments even when there are zero?
cheers anyway!
http://dilarangmelarang.com/2009/01/siapa-nak-rekues-tutorial-dipersilakan.html
i can't open certain page in my blog, then my firefox got the problem.
nice one!
myTest
Thank you!
Thank you.
What exactly would you like updated?
The sample template is already up to date. You can mail me if you have more questions.
test~
Can u help me?
Hello Shams, thank you very much for your quick reply - I would like to e-mail you but can't find your address anywhere - so I'll ask here again - in step 1 and 2 - do I need to only paste the new code into do old one or do I need to replace some of the original code? Thank you
you need to add them
my gmail acct. is mentioned here in the comments section and also there on the profile page ;)
I'm having the same problem!
XML error message: XML document structures must start and end within the same entity." What now?
Unfortunately the way blogger comments need to be posted it is the responsibilty of the user now to include a @replyTarget line to the top of her comment. Once blogger supports inline comment forms completely (currently it is available only in draft mode) it will be possible to relieve the user of this task and use javascript to auto insert the @replyTarget line into the form.I think that Blogger now supports inline comment forms. Can you provide us the code of javascript to auto insert the @replyTarget line into the form?
A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.
Script: http://jariketot.blogspot.com/2009/05/overload.html:156
if you email me ur template I can have a look and find out what's wrong
unfortunately embedded comments form is loaded in an iframe from another domain (blogger.com). Hence you cannot have javascript from your blog execute to fill in the comment form.
sorry for the late reply, have been busy lately. I'm going to rewrite the parsing script soon and hopefully will be able to fix any issues.
if you use the @ with the numbers it appends to appropriate post. If you use @ with names it will append to the last reply from the user
what is the error you're facing?
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "F" must be followed by either attribute specifications, ">" or "/>".
append
sort what?
Thanks a ton for your thoughtfulness! Nested comments was something I've really missed in blogger for quite some time. Your template worked great, albeit I had to find my way around with the code. :)
Anyways, I have 3 requests -
1. How can I enable threaded comments in the pop-up comments window? As of now, I see that threaded comments appear only in each post page.
2. I would like to increase the space around the "Reply" and "Permalink" at the bottom of each comment. Mainly add an extra empty line after them, it'd also help if I can increase the font size of "Reply" and "Permalink". I tried adding an extra + '\n' after the "reply" and "Permalink" tags, but it kind of screwed up the entire comments formatting.
3. I haven't had time to look into it, but I'm lazy, so can you just point to where I can change the bg color for the comments?
Thanks a ton again Shams! Great work!
Kaushik
I was able to figure out how to change the bgcolor of the comments. :)
If you can just help me figure out the other two, it'd be great.
1. How can I enable threaded comments in the pop-up comments window?
You need to modify your template to place the comments in a div and then use some javascript library like jQuery to display it in a modal.
2. I would like to increase the space around the "Reply" and "Permalink" at the bottom of each comment.
Again modify your blogger template :)
Hope that helps.
The final part....I don't know where in my blog template to insert the code.
Can you help please??
here is my blog add: http://angiesrecipes.blogspot.com
Not like twitter, I guess. It needs to be alone on its own line.
i think dis is yew...
try satu
Can we put avatar in this threaded comments
I'll need to update the script to support avatars. I've been wanting to update the script but just havent been getting any time :(
Hopefully will turn out a new version in the new year.
And you et an account on Twitter?
Hiding the comments can be done through javascript (though this one doesn't do it yet :) )
Auto replying from e-mail is a feature blogger will have to support, don't think it does support it currently.
if we're used this hack...any some hack not work.
Like : emoticon on comment, and that delete for comment not worked, number and bubble number on comment no work too.
but is one good hack.
may be you forget add saids for delete in
<span><a href="${COMMENT.DELETE.URL}" title="${COMMENT.DELETE.TEXT}" style="text-decoration: none;" >.........here......<span class="commentDeleteIcon"></span></a></span>
i am confuse to add in new comment methode
sip banget
However, my comment box is above my comments. Any ideas? :)
It is difficult to say without looking at your template. I think you have duplicated the comments section. So you have both the threaded comments part and your old comment part - hence both are showing up.
Testing reply
MY TEST
MY TEST
test but,why no picture avatar?
Nice
First let me tell you that this is an amazing work which you have done..three claps for you :)
I embedded the script in my page i.e. http://pupadhyay.blogspot.com/
Now there are two things which I want, first I would like to put my commentbox below the comments.. presently its coming on the top of the comments..
2nd thing, I want to fill the comment box, automaticaly with the '@ comment id' when user clicks on a 'reply'.. I tried it but did not get much success.. would love if you can help me out..
regards,
Pankaj
http://www.kancilbiru.com/
http://www.kancilbiru.com
I mean it would be good if you can guide me how to go for it..
http://belajarnge.blogspot.com
your attached sample template shows error as !
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Content is not allowed in prolog.
Zenegra | Kamagra
Test from OH
Test Reply . . .
http://msueroomz.blogspot.com/2010/04/membuat-reply-to-comment.html
Test
@Shams
testing =D
just test
Firstly, thank you so much for this, exactly what I was looking for. However, follow your guidelines step-by-step, when I get to step 3 I get this error:
http://img.photobucket.com/albums/v285/carola_pics/error.png
Please could you advise in what should I do as, as far as I can see, all my tags are closed?
Thank you for your time :-)
You can email me if you wish carola(dot)steedman(at)gmail(dot)com :-)
Wanted to reply to myself
I altered the codes a little to fit my tastes.
Do you have any thoughts on how to redirect the commenter to his/her just-posted comment?
Gracie
Test
Just testing to see where this will end up.
Post a Comment