Blogger custom comment form [Wordpress like] - Part II

May Allah`s peace , mercy and blessing be upon you

Last time we transformed all inputs to a single JSON object which would be stored in a plain text comment and sent to the server , this time we will try to display those comments.

Ok we need to get the JSON string stored in comment's body from Blogger's database using :

<b:loop values='data:post.comments' var='comment'>
      <data:comment.body />
</b:loop>

But first we want to add more information that we need to display. So we will define another JSON object that contains the previous one (which is into the body text of the comment)+ time & id :

{"root": {
    "comments": [
      {
      "id": "",
      "time": "",
      "text" : ""
      }
    ]
  }
}}

Using Blogger's data tags we build the JSON string :

<script type="text/javascript">
var json= {"root": { "comments": [
<b:loop values='data:post.comments' var='comment'>
{
    "id": <data:comment.id />,
    "time": "<data:comment.timestamp />",
    "text" :  <data:comment.body />
},
</b:loop>
]}}};
</script>

All we need to do now is to read data using a simple loop through the JSON object and fill a pre-defined HTML template :

for(i in json.root.comments){
    html='<dialog id=com'+json.root.comments[i].id+'>';
    html+='<dt>';
    html+='<h1>'+json.root.comments[i].text.name+'</h1>';
    html+='<h3>'+json.root.comments[i].text.email+'</h3>';
    html+='<a href="'+json.root.comments[i].text.url+'>' +json.root.comments[i].text.url+'</a>';
    html+='<img src="'+json.root.comments[i].text.avatar+'"/>';
    html+='<time datetime="'+json.root.comments[i].time+'">'+ json.root.comments[i].time+'</time>';
    html+='</dt>';
    html+='<dd>';
    html+='<p>'+json.root.comments[i].text.text+'</p>';
    html+='</dd>';
    html+='</dialog>';
    $("#comments").html($("#comments").html() + html );
}

You can use more effects like a loading image or anything else .. of course a CSS style is a must and HTML still need some work.

That's it using this method you can do anything with Blogger's comment box : add more inputs , advanced features like rating , sub-comments , bb code , comment using Twitter or Facebook ... It's up to you to innovate :)