Reply to Blogger comments hack

Update January 18th 2012: A new and easy to install threaded commenting hack version 2 includes this hack's functionality, you might consider using it.

There is one hack with variations circulating in internet which gives you the opportunity to reply to individual comments in Blogger. There are some shortcomings in that code. It always uses a popup and the popup does not position (scroll) to the comment form when opened, this is a bug and annoying if there are many comments. You can correct it by changing https to http, after that it jumps to the anchor as it should. From this exactly same bug you can tell that all the variations of that hack are from the same source.

Not satisfied with code quality ;) and windows popping up when I did not want to, I did my own hack.

With popup and full page commenting the code uses either popup or full page, which ever the blog uses. With embedded comment form text cannot be injected into iframe (from another domain), so separate comment page is opened (not popup). Comment form is prefilled with @ + link to the comment the user is replying to.

How to install

Open blog template html for editing, expand widget templates. Search line that contains:

<data:commentPostedByMsg/>

Just after that paste the following code, but change 12345CHANGETHIS6789 to your blog's id number. You can find your blog id by going to Design, it is in the url: http://www.blogger.com/rearrange?blogID=HEREISYOURBLOGID (old interface) or http://www.blogger.com/blogger.g?blogID=HEREISYOURBLOGID#template (new interface). And here's the code:

Data provided by Pastebin.com - Download Raw

Remember, change the blog ID! It is there in the url when you are editing the template, too. Save, and you're done. You can style the CSS class "comment-reply-link", if you like, but it is not necessary. With CSS you can have hover effect for the link etc. You might also want to use an image instead of the [reply] text.

The ultimate hack for broken Blogger navbar search

My first workaround for navbar search was not too shiny: it redirects user to google search with the keywords user entered, search limited to your blog. Works though. But I wanted something better, and finally came up with this hack. For this hack you need custom Google search installed in your blog, see How to add Custom Google Search to your Blogspot blog. You also better have getElementsForClassName installed for better old browser support, and count blogger posts on page hack.

This is quite a long story, so to get you motivated, I'll first show you how it works. With keyword "bedica" the "original" navbar search found nothing from my MS-potilas blog (in Finnish), but with my hack, it looks like this:

Navbar search has had problems since 2009. Also the search gadget is now broken (broke this year). Search gadget can be replaced by custom Google Search, but what about navbar? We certainly don't have access to the code that searches the posts.

So, the (broken) search executes when user tries to use the navbar search, without us having any control. But, we can do things after that, when the results, or no results, are displayed. That is what my hack is based on.

Start with these:

1. Know your way around
2. Install getElementsForClassName function
3. Install Count Blogger Posts on Page hack
4. Install Custom Google Search in your blog. Test that it works.

After successfully completing these steps you have done most of the work already :) Now edit the template html. Find </head>, and before that add:

<script type='text/javascript'>
var searchPhrase = "";
var customSearchControl = null;
</script>

You can also add those two variable definition lines into some existing <script> block there before </head>, if you want. Then, find </body> and before that add:

Data provided by Pastebin.com - Download Raw

Save template, then open page elements. Open custom search gadget (HTML/Javascript) you made. In that code change: var customSearchControl = ... to customSearchControl = ... (i.e. remove "var" from that line). Don't alter the rest of the line. Don't add the ellipsis.

Then, after line:

    customSearchControl.draw('cse', options);

add:

    if(searchPhrase != "")
      customSearchControl.execute(searchPhrase);

For a nice finishing touch, let's make the search result links open in the same window. This also applies for the sidebar search gadged, naturally, because we're editing it's code. After line:

    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);

add:

    customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_TOP);

After those modifications the code looks something like this (don't copy this code directly, this searches my Finnish blog, no use for you), changed/added lines highlighted:

<div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'fi', style : google.loader.themes.MINIMALIST});
  google.setOnLoadCallback(function() {
    customSearchControl = new google.search.CustomSearchControl('014531972749200972566:g5b3gu6awfk');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_TOP);
    var options = new google.search.DrawOptions();
    options.setSearchFormRoot('cse-search-form');
    customSearchControl.draw('cse', options);
    if(searchPhrase != "")
      customSearchControl.execute(searchPhrase);
  }, true);
</script>

Save gadget and you're all done.

Interesting detail discovered during coding: In Firefox, Chrome and Opera the customSearchControl is created after the before-</body> script is run. In Internet Explorer customSearchControl was created before the script is run. That's why we need the execute function in both places (script & gadget), so we can run it when customSearchControl is created and we have the search keywords. Both are needed, and we cannot be sure, which is set first.

Now when you use navbar search, in the search results first are google results, and after those are, if any, navbar's own findings. If navbar search did not find anything, the "No posts found" text is removed (this needs the post count hack). In this blog the navbar search happens to work pretty good, but I'll install this hack here anyway for demonstration.

Update January 20th 2012: You might be interested in adding a clear results button to the search results, hack here.
Update March 2012: Commented nine (line 24-32) lines from the source, if you had this installed you might want to do the same. By commenting the lines, the new "Sort by date" link is not hidden.

How to Highlight author comments in Blogger

Update Jan 17th 2012: now uses simpler code.
Update January 18th 2012: A new and easy to install threaded commenting hack version 2 includes this hack's functionality, you might consider using it.

There are some highlight author comments hacks out there, but most I've seen check only that comment author name is something. It is better to check the author url (so anonymous user's won't disquise as you so easily), which my hack does. But it is easiest to use the variable "data:comment.authorClass" – for blog authors it is set to "blog-author", and we can check that. Basically my hack puts all "user comments" into div with class "normal-comment", and "admin comments" into div with class "admin-comment".

Edit your template html. Select Expand Widget Templates. Find line:

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

After that add:

Data provided by Pastebin.com - Download Raw

Remember to change the url between the &quot;s to your profile page url. In the old code you needed to change the url, in this new code you don't have to change anything. Then find lines:

                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>

(you can search using the first line). Just after those lines add:

            </div>

Then save the template. Now we need only to style the admin-comment to look different. Go to Template Designer, choose Advanced, Add CSS, and add following:

.admin-comment {
background: #F4F4F4;
margin-top: 6px;
margin-bottom: 6px;
padding: 3px 3px 0 3px;
border: 1px solid #EDEDED;
}

And then to the testing. You can style admin-comment background otherwise, if you like, using CSS. I have installed this hack on this blog.

Make "Post a Comment" link bigger

Because of problems with the embedded comment form I decided to change my blogs' commenting use separate comment page. Other option would have been a popup window, which I don't like.

But the Post a Comment link is so small, will people notice it at all? To compare with embedded form:

It looked so small, that I decided to enlarge my link. :)

Here's how I did it. Open template HTML, select Expand Widget Templates. Update 2013: Select "Jump to widget" "Blog1". Search for a block that looks like this:

          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>

And change it to this:

Data provided by Pastebin.com - Download Raw

Now the link is bigger (<H4>) so people will notice it easier. See this article's Post a Comment link here.

I can has edit Blogger comments!

Blogger team refuses to add comment editing to Blogger. I think the reasons are not valid, something like "so the blogger won't put words to someone else's mouth". Wordpress had comment editing. I did not misuse it.

If someone posts a comment, I can delete it and post just similar comment with similar identity using name and website. I can post fake comments just on my own. That's internet. Letting us not edit comments is just stubborness. We cannot edit even our own comments, our own words!

The funny thing is, if you know what you are doing, you already can edit already published comments, your's and anyone else's. It is just a bit tricky. I don't know if anyone has figured this out before, but this works and I tested it in my test blog. I won't be too detailed in the instructions, and if you decide to try it, everything you do, you do at your own risk. I won't help you with this one.

My trick involves exporting and importing the blog and a text editor. Bells ringing already? Well, at least warning bells should, because import can fail, especially if you mess up the xml file. It is best you forget the whole thing. Ok but here we go. Export your blog to file, save file to computer. Open file with text editor. Edit the comment(s) you want to edit, save file. In your blog (this is a scary part) delete that/those post(s), which contained the edited comment(s). Import your edited xml-file. Only the missing post(s) gets imported, now with the comment(s) edited.

Workaround for navbar search bug

Navbar search problems have been around since 2009, as known issues blog tells. And still outstanding (as opposed to fixed). This was the first things I noticed when I switched from Wordpress.com to Blogger.

Known issues blog instructs us:

As a workaround, you can use search operators on Google.com to search for content specifically on your blog. For example:

site:yourblog.blogspot.com KEYWORD KEYWORD

OK, maybe good for blog writers, but what about our users... not very user friendly. My first solution to fix the navbar search was to automate that googling. Here's how it can be done.

Navbar search to Google search

Edit your template html. Insert this code either just before </head> or just before </body>.

<script type='text/javascript'>
//<![CDATA[
  var blogUrl=window.location.protocol + "//" + window.location.host + "/";
  var qPos = window.location.href.indexOf('/search?q='); // length 10
  if(window.location.href.indexOf('/search/label/') == -1 && qPos != -1) 
  {
    var urlGoogle = "http://www.google.com/search?q=" + window.location.href.substring(qPos+10) + "+site:" + encodeURIComponent(blogUrl);
    if(confirm("Navbar search is broken. Search with Google?"))
      window.location = urlGoogle;
  }
//]]>
</script>

If you put the code before </head>, the page below won't draw before user is asked to move to google search (the question pops up on white screen). If you put it before </body>, the page loads and then pops up the question, so user can see if the broken search actually found anything. You can test it in both places and choose which ever you like the most.

You can also customize the code to your liking, for example remove the confirm question, if you know how to. Know your way around.

This was my first solution to the broken navbar search, and it works nicely, and is very simple to install. I used this solution for a while, then came up with something completely different... I'll write about my second navbar workaround later on.

In the meanwhile, because search gadget is also broken, you might consider adding a custom Google search to your blog's sidebar: How to add Custom Google Search to your Blogspot blog.

3.10.2011 Navbar search works actually quite well in this blog (surprise, does not work for my other blog), but I installed this hack here for demonstration. I will remove it when I install the second generation navbar search hack and blog about it.
5.10.2011 This hack is removed, installed The ultimate hack for broken Blogger navbar search

"# comments" link in index page hack

I changed this blog's commenting to use full page comment form. With embedded form there are problems with cookies across different domains, I could fix them but my readers might not. So I decided to use the only good option: full page. (some might also like popup window, I don't)

With embedded form commenting, when you view articles in index, suppose you have 5 comments in a post, then there is a link 5 comments which opens the post and jumps to comments section (#comments). This is nice.

But with full page comment form the link 5 comments don't open the post and comments, but the commenting page instead. I think it is better to open the post and comments, and there user can click Post Comment link if he wants to post a comment. When there are 0 comments, the link still may open the commenting page directly.

This can be accomplished quite easily. Open you templates html for editing, click Expand Widget Templates. Find code that looks like:

            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
            </b:if>

That code should be inside <b:includable id='post' var='post'> block (there's another one for mobile devices, block <b:includable id='mobile-post' var='post'>, that one I didn't touch, you can, if you want). Replace that previous code by:

Data provided by Pastebin.com - Download Raw

We insert three adjacent things into original code, highlighted red, old code is black (no need to do anything about this snipped, this is just for clarification):

    <b:if cond='data:post.allowComments'>
1.   <b:if cond='data:post.numComments == 0'>
      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/> <data:top.commentLabelPlural/></a>
     <b:else/>
2.    <a class='comment-link' expr:href='data:post.url + &quot;#comments&quot;' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
3.   </b:if>
    </b:if>

Now it works the way I want. I'll install this hack on this blog, except on this particular post, so you can test it – this post works like it was before, all others work like this hack. Instructions are not too detailed, so you should know your way around before trying to apply to your blog.

References:
Blogger Help: How do I leave comments on a blog?