Blogger Hints: February 2009

Tuesday, February 17, 2009

What are Rollover Comments

At the bottom of this post you can see some examples of Rollover Comments. If you put your mouse on top of the user name the comment will appear below. If you click on the user name the comment will stay on the page when you move the mouse. Go ahead and give it a try!

Saturday, February 7, 2009

So You Want to See Comments on Your Blog?

Installation

Click the link in the sidebar that says "Add to Blogger". Or click here!

You will be asked which blog you would like to add the widget to. Select your blog and click the "Edit Content" arrow.

You want the colors of the comments to match your blog right? In the first section of the content between <style> and </style>. This is where the colors are defined. The color is coded in there in the number like #F7E8D8. For an introduction to html color codes see here. Find colors that match your blog or that stand out. If you look in your blog layout template you will see the color codes that your blog is using (as in the image below). You can change the colors after the widget is installed by choosing to edit it in the blogger dashboard layout tab.

Click the "Add Widget" button. You can drag the widget to any location on your sidebar. The widget works the same no matter where it is.

Trouble Shooting
If you are having trouble seeing the comments on your blog, there are a couple of things that may help.

You may be using the "Classic Template." On you blog dashboard under the "Template" tab there is a link called "Customize Design." Follow the instructions there to update your template.

The default widgets may be outdated on your blog. To update them go to the blog dashboard and select the "Layout" tab. Select the Edit HTML link and at the bottom of the page there is a links that says "Revert widget templates to default." This will update you to a set of widgets that will work.

Caveats

This was designed to work with blogger templates. If you have changed the default posts widget or template this code may not work correctly. You can delete it from the Layouts tab if it is not working and your blog will return back to the previous state (no other changes will be made to your blog).

There is a known error if Anonymous comments are on a post. The widget can not find the correct author and will not display correctly. It does not ruin/destroy/mangle any real data and the comments will show up when you click the post title link.

How It Works
This widget is a smattering of Javascript code. The Javascript performs an AJAX function to retrieve post data (AJAX because private blogs do not share the JSON feeds). The Javascript then places the comments in place on the blog and adds the code to display them.

Future enhancements will include read comment history to show which comments have been read and which comments are new.

Get Rollover Comments Now!

Brought to you by 
<a href="http://bloggerhints.blogspot.com">Blogger Hints</a>

<div id="bcDebug" style="display:none">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function showElement(a) { a = this.id || a.srcElement.id; a = "c" + a.substring(1); $("#" + a).show() } function returnElement(a) { a = this.id || a.srcElement.id; a = "c" + a.substring(1); a = document.getElementById(a); a.style.display = a.vState } function toggleElement(a) { a = this.id || a.srcElement.id; a = "c" + a.substring(1); a = document.getElementById(a); if(a.vState == "none") { a.style.display = "block"; a.vState = "block" }else { a.style.display = "none"; a.vState = "none" } } $(document).ready(function() { $("#bcDebug").append("<p>The document is now ready</p>"); if(document.location.pathname == "/") { var a = [], d = $("a.timestamp-link"); $(".post-comment-link:not(.post-backlinks) > a").each(function(e) { a[e] = this.innerHTML.match(/(\d+)/)[0]; if(a[e] > 0) { var b = document.createElement("p"); b.className = "comment-footer"; b.id = "cf" + this.href.match(/postID=(\d+)/)[1]; b.innerHTML = "Comments By: <span>Loading...</span>"; this.parentNode.parentNode.parentNode.parentNode.appendChild(b); $('<iframe style="display:none" src="' + d[e].href + '" class="commenthide"></iframe>').appendTo(document.body) } }) }else try { parent.$("#bcDebug").append("<p>From Frame</p>"); var f = document.documentElement.innerHTML.match(/postID=(\d+)/)[1], c = new function() { this.authors = []; this.ids = []; this.comments = [] }; $(".comment-author>a[rel=nofollow]").each(function() { c.authors.push(this.innerHTML) }); $("dt.comment-author").each(function() { c.ids.push(this.id) }); $(".comment-body").each(function() { c.comments.push(this.innerHTML) }); parent.processAjax(parent.$("#cf" + f)[0], c) }catch(g) { } }); function processAjax(a, d) { a.innerHTML = "Comments By: "; var f = document.createElement("p"); a.parentNode.appendChild(f); for(var c = 0;c < d.authors.length;c++) {  var g = document.createElement("span"); g.innerHTML = ", "; var e = document.createElement("span"), b = $(e); e.id = "a" + d.ids[c]; b.css({"text-decoration":"underline", cursor:"pointer"}); e.innerHTML = "" + d.authors[c] + ""; b.bind("click", toggleElement); b.bind("mouseover", showElement); b.bind("mouseout", returnElement); b = document.createElement("div"); b.className = "comment-box"; b.id = "c" + d.ids[c]; b.innerHTML = "<i>" + d.authors[c] + " said</i><br/>" + d.comments[c]; b.vState = "none"; b.style.display = "none"; c > 0 && a.appendChild(g); a.appendChild(e); f.appendChild(b) } } function ajaxBad(a, d, f) { $("#bcDebug").append("<p>Failed Attempt</p>"); if(f < 3) { $(d).html("Network Error! Will retry in 2 seconds"); a = $('<iframe style="display:none" src="' + a + '" class="commenthide"></iframe>').appendTo(document.body) }else $(d).html("Network Error! Unable to update comments") } ;
</script>