Blogger custom comment form [Wordpress like] - Part I

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

I was playing with Blogger's comment form using Firebug . If you don't know, Blogger uses an iframe to display the form , So because of the Cross-domain we can't style the form neither apply any Javascript code on it .

First, you need to know the major inconvenient of this method : comments will be considered as spam , So you have to check Not spam manually every time to make the comment visible (if you already administrating comments then you are used to).

Let's look at the next HTML code :

 
<form id="commentForm" method="POST" action="http://www.blogger.com/comment-iframe.do">
    <input type="text" id="user" placeholder="User Name" />
    <input type="email" id="email" placeholder="email" />
    <input type="url" id="url" placeholder="Website" />
    <textarea id="text"  placeholder="Text..."></textarea>
    <input type="hidden" name="commentBody" id="commentBody" />
    <input type="hidden" name="security_token" value="AAAAAAAAAAAAAAAAAAAAAAAAAA:***********" />
    <input type="hidden" name="blogID" value="**************" />
    <input type="hidden" name="postID" expr:value="data:post.id" />
    <input type="hidden" name="identityMenu" value="ANON" />
    <button id="sub">Submit</button>
</form>

 

1. url : http://www.blogger.com/comment-iframe.do
2. security_token : It's a key used by Blogger to check the source of the request you can extract it from your comment box using Firebug or similar.
3. blogID : Blog identifier (you can get it easily from the admin panel )
4. postID : Post identifier (expr:value="data:post.id" is a data tag in Blogger )
5. identityMenu : This is the id of the select that displays different types of identifications we choose ANON which stands for Anonymous (you have to set Who can comment? to Anyone)
6. commentBody : the comment text.

Now you need to replace the <b:include data='post' name='comment-form'/> by  the html code above.
Next step is to create a JSON object that will contains the dataset :

 
{
    "comment" :
    {
        "user" : "" ,
        "email" : "" ,
        "url" : "" ,
        "avatar" : "",
        "text" : ""
    }
}

And a function that will format the comment to be ready for saving as JSON :

$('#sub').click(function () {
        var text = '{' 
                    + '"comment":{'
                    + '"user": "' + $('#user').val() + '",'
                    + '"email": "' + $('#email').val() + '",'
                    + '"url": "' + $('#url').val() + '",'
                    + '"avatar": "http://www.gravatar.com/avatar/' + MD5($('#url').val()) + '?s=80&d=DEFAULT_AVATAR_URL",'
                    + '"text": "' + escape($('#text').val()) + '"}}';
        $('#commentBody').val(text);
        $('#commentForm').submit();
});

I used the Gravatar URL to get avatar from the email , so we need to encode the email using MD5 , I used the implementation from webtoolkit.info .
Don't forget to set the DEFAULT_AVATAR_URL it's the default avatar URL , What a surprise :D !!!

Now our comment form is ready to save comments , Next time we will create the parser that will load and display comments . See you soon !!

Part II : http://jawbfl.blogspot.com/2012/02/blogger-custom-comment-form-wordpress_20.html