Facebook Style Comment Box

I have tweets and commenting system like this

This is the code block for one set of tweet and its comments and commenting box:

<li class="storyBlock">
  <div>
    <div class="grid userImageBlockL">
      <div class="imgMedium"> <a href="/bakasura1/users/harshamv"><img width="44" height="44" alt="image" src="/bakasura1/files/images/medium/12881703开发者_运维技巧63aca595cabb50.jpg"></a> </div>
    </div>
    <div class="grid userContentBlockL">
      <div class="userContentHeader">
        <h5> <a href="/bakasura1/users/harshamv">Harsha Vantagudi</a> <span class="storyMessage">Testing the Seconds</span></h5>
        <span class="user-status-time">6 hours ago</span> <span><a href="#" class="user-status-buttons">Comment</a> <a href="#" class="user-status-buttons">Delete</a></span> </div>
      <ul class="commentList">
        <li class="commentBlock">
          <div>
            <div class="grid userImageBlockS">
              <div class="imgSmall"> <a href="/bakasura1/users/harshamv"><img width="35" height="35" alt="image" src="/bakasura1/files/images/small/1288170363aca595cabb50.jpg"></a> </div>
            </div>
            <div class="grid userContentBlockS alpha omega">
              <h5> <a href="/bakasura1/users/harshamv">Harsha Vantagudi</a> <span class="storyMessage">Write your comment...</span></h5>
              <span class="user-status-time">27 minutes ago</span> <span><a href="#" class="user-status-buttons">Comment</a> <a href="#" class="user-status-buttons">Delete</a></span></div>
            <div class="clear"></div>
          </div>
        </li>
        <li class="commentBlock">
          <div>
            <div class="grid userImageBlockS">
              <div class="imgSmall"> <img width="35" height="35" alt="image" src="/bakasura1/files/images/small/1288170363aca595cabb50.jpg"> </div>
            </div>
            <div class="grid userContentBlockS alpha omega">
              <form accept-charset="utf-8" action="/bakasura1/account/saveComment" method="post">
                <div style="display: none;">
                  <input type="hidden" value="POST" name="_method">
                </div>
                <input type="hidden" id="StatusMessageReplyPid" value="67" name="data[StatusMessageReply][pid]">
                <input type="hidden" id="StatusMessageReplyItemId" value="1" name="data[StatusMessageReply][item_id]">
                <input type="hidden" id="StatusMessageReplyCommentersItemId" value="1" name="data[StatusMessageReply][commenters_item_id]">
                <textarea id="StatusMessageReplyMessage" name="data[StatusMessageReply][message]">Write your comment...</textarea>
                <input type="submit" name="" value="Comment">
              </form>
            </div>
            <div class="clear"></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="clear"></div>
  </div>
</li>

I am a little confused as to how to create an Ajax from submit when the comment is saved the new comment should stack top to bottom. Since there is no unique tweet identifier. I am not sure how to address this problem.

Can some one recommend an easy solution for the same?

---

http://demos.99points.info/facebook_wallpost_system/

nice demo and tutorial there

---

Did you try this plugin ,

http://timeago.yarp.com/

this should help