Hacking Blogger: Creating Customized Comments for "Your" Blog

It’s your blog and it should behave as you want it too. Blogger is the obvious choice for most when choosing a blogging platform; however being apart of the Blogger family often means being limited to the Blogger family. For those wanting to add customized comments to your Blogger blog, there is now an easy copy-n-paste solution!

Blogger.com

To integrate the comment form on your site within your blog post as well as let any and all of your readers post; simply copy and paste the below code where you would like your comment form to appear.


<form id="cFrm" action="http://www.blogger.com/login-comment.do" method="post">
<h3>Post a comment</h3>
<script type=”text/javascript”>
//<![CDATA[
var expires = new Date();
expires.setFullYear(expires.getFullYear()+1);
function setCookie(name, value) {
document.cookie = name +’='+ escape(value) +’; expires=’+ expires.toGMTString();
}
function getCookie(name) {
var key = name + ‘=’;
var c = document.cookie;
var i = c.indexOf(key);
if (i < 0) return ”;
var j = c.indexOf(’;', i + key.length);
if (j < 0) j = c.length;
return unescape(c.substring(i + key.length, j));
}
function trim(text) {
return text.replace(/^\s+|\s+$/g, ”);
}
var bgPosted = false;
function cFrmPost() {
with (cFrm) {
anonName.value = trim(anonName.value);
anonURL.value = trim(anonURL.value);
postBody.value = trim(postBody.value);
if (anonName.value == ”) {
alert(’Please enter your name’);
anonName.focus();
return false;
}
if (postBody.value == ”) {
alert(’Please enter a comment’);
postBody.focus();
return false;
}
anonURL.value = anonURL.value.replace(/^http:\/\//g, ”);
}
bgPosted = true;
return true;
}
function bgpostLoad() {
if (bgPosted == true) {
if (cFrm.remember.checked) {
setCookie(’anonName’, cFrm.anonName.value);
setCookie(’anonURL’, cFrm.anonURL.value);
}
window.location.reload();
}
}
//]]>
</script>
<iframe style=”position:absolute;left:-9999px;top:0″ name=”bgpost” onload=”bgpostLoad()”></iframe>
<div>
<input type=”hidden” name=”blogID” value=”<$BlogID$>” />
<input type=”hidden” name=”postID” value=”<$BlogItemNumber$>” />
<input type=”hidden” name=”isPopup” value=”false” />
<input type=”hidden” name=”iden” value=”Other” />
</div>
<dl>
<dt><label for=”uname”>Name</label></dt>
<dd><input type=”text” id=”uname” name=”anonName” maxlength=”100″ /></dd>
<dt><label for=”url”>Website</label></dt>
<dd><input type=”text” id=”url” name=”anonURL” maxlength=”100″ /></dd>
<dt><label for=”comment-body”>Comment</label><br /><span class=”subtle”>Some XHTML tags allowed, such as <strong>, <em>, <a></span></dt>
<dd><textarea id=”comment-body” name=”postBody” cols=”60″ rows=”10″></textarea>
<script type=”text/javascript”>
//<![CDATA[
var cFrm = document.getElementById(’cFrm’);
cFrm.target = ‘bgpost’;
cFrm.onsubmit = function(){return cFrmPost()};
if (document.cookie != ”) {
cFrm.anonName.value = getCookie(’anonName’);
cFrm.anonURL.value = getCookie(’anonURL’);
}
cFrm.postBody.value = ”;
if (cFrm.captcha) cFrm.captcha.value = ”;
document.write(
‘</dd><dd><label for=”remember”>Remember me</label><br />’+
‘<input type=”checkbox” id=”remember” />’
);
//]]>
</script>
</dd>
</dl>
<div class=”buttons”><input type=”submit” name=”post” value=”Post” accesskey=”p” /></div>
</form>

Credit: Jasper de Vries of BrowserVulsel is the brains behind the script.

Why bother? Those using Bloggger know that there are only two out-of-the-box solutions for comments; either a pop-up window (never ideal) or separate page, hosted and branded by Blogger — really limiting the customization and integration of your blog within your website. The big kicker is with the posting of comments; users only have two choices, to login with a Blogger account or post “anonymously”.

GoogleEnlarge

Rockin' 20 Comments

Agree with me, rant with me or complain your little heart out ... share a comment

  1. How

  2. Simply copy and paste the [above] code where you would like your comment form to appear

  3. Gosh, I am sorry my comment got messed up.

    What I was trying to ask was “How does it work?” because I feel like i should not paste javascript without knowing what it does.

  4. That can be a complicated or simple answer – I am going to go with simple. Essentially we are doing two things, the first is setting a cookie for the “remember me” action – completely Blogger independent; a nice little add-on.

    The second thing we are doing is sending information directly to the http://www.blogger.com/login-comment.do command.

    This allows you to send the specific information you want through Blogger, which in turn posts back to your site (via Blogger). The magic is really in the communication between your site and Blogger’s login-comment.do command (the power behind posting to your website).

    You have no need to worry about third-party vulnerability, as all of the scripts are specific to your local site and the only communication is between you and Blogger and back again. If you still have hesitations, view my source; I am using here within this blog.

  5. anonName

    Editing your last comment [to hyperlink your link]….

    More on this script can be found on BrowserVulsel; the brains behind the script.

  6. Is it possible to create new form fields, that you could do something with on the Blogger ’show comments’ template code?
    e.g. checkboxes for “I am/am not employed by a PR firm”, “this is my real name”, etc
    (I’m guessing not, but it sure would be great…)

  7. First one to supply the code gets $1.00

  8. sorry dude, just having problems with my page reloading, wanted to see if it was just me.

  9. works great …. thanx

  10. stocktube –> glad it could be of help!

  11. hi,

    thankyou for posting this coding. I got the coding up on my page ok but when i went to test it out by leaving a comment at one of my blog posts it is not going through. What have i done wrong?

    thankyou,

  12. No problem, hope it is working for you. I can’t be exactly sure what is wrong. Make sure you have comments turned on in blogger. I will say that I have not upgraded to the Blogger beta — as they are pushing it on me everyday; have you? I don’t know (and highly doubt) this will work with the new Blogger.

  13. do you know how to crack the password attached to a private blog?

  14. No, sorry — sounds like you are up to no good, ha!

  15. the “http://www.blogger.com/login-comment.do” dosen’t work anymore…
    what to do?

  16. UPDATE

    Sorry about that! Seems like Blogger Beta — or I guess it is just Blogger now has upgraded and for the worse. Seems like those with “NEW” blogger accounts don’t have the same flexibility as the pre-Google accounts.

    My advice — leave Blogger. LOL, sorry.

  17. so, there is no way to do this kind of comments in blogger, like you do here in you site?
    there must be a WAY!

    thanks…

  18. If anyone knows, please share — I’ve been Google’ing and have found nothing. I was under the impression that you can’t even host your blog anymore; that everything had to be on blogspot.com now.

  19. Still not working?

  20. I should note that this post was written back in October of 2006 … before Blogger system had an upgrade. I am going to close comments and this post is probably no longer relevant to anyone anymore.

Curious about the redesign? It's more of a design satire then a reflection of personal taste: Read More