• People Talk and My Ear Bleeds

Thoughts

    from Twitter

    News

    Tuesday, April 01, 2008

    New Recent Comments JSON Widget

    Since upgrading to TBE 3.0, The Bleeding Ear has sported a Recent Comments widget in the sidebar. I hope you find it useful, or at least not annoying.

    A couple days ago, my comments feed was down. Currently, my Recent Comments widget is just a feed widget, pulling the comments feed from blogger and using the native support to show date and author.

    Well, because the feed went down, I started to look into what other people had done for comment widgets, and I realized that blogger puts the feeds out via JSON now. Well, I didn't know heads from tails about JSON, except that it can be used in javascript (something else I know little about), but I read that it would make the comments widget more customizable.

    So, I found the url for the JSON comments feed, and pulled it so I could read through it. Then, with the help of a javascript from Tips For New Bloggers, I set about creating a new widget. That javascript wasn't good enough, so I found a script at Beautiful Beta that addressed my date problems. A quick mishmash of both scripts, plus some style changes, and voila!

    So, I hope you like the new widget. Tell me what you think. If you want the code, I have it for you below (but all credit should go to the two blogs I referenced above):


    <ul><script style="text/javascript">
    function showrecentcomments(json) {
    for (var i = 0; i < 5; i++) {
    var entry = json.feed.entry[i];
    var ctlink;
    var commentdate = entry.published.$t;
    var cdyear = commentdate.substring(0,4);
    var cdmonth = commentdate.substring(5,7);
    var cdday = commentdate.substring(8,10);
    var monthnames = new Array();
    monthnames[1] = "Jan";
    monthnames[2] = "Feb";
    monthnames[3] = "Mar";
    monthnames[4] = "Apr";
    monthnames[5] = "May";
    monthnames[6] = "Jun";
    monthnames[7] = "Jul";
    monthnames[8] = "Aug";
    monthnames[9] = "Sep";
    monthnames[10] = "Oct";
    monthnames[11] = "Nov";
    monthnames[12] = "Dec";


    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    ctlink = entry.link[k].href;
    break;
    }
    }
    ctlink = ctlink.replace("#", "#comment-");
    var ptlink = ctlink.split("#");
    ptlink = ptlink[0];
    var txtlink = ptlink.split("/");
    txtlink = txtlink[5];
    txtlink = txtlink.split(".html");
    txtlink = txtlink[0];
    var pttitle = txtlink.replace(/-/g," ");
    pttitle = pttitle.link(ptlink);
    if ("content" in entry) {
    var comment = entry.content.$t;}
    else
    if ("summary" in entry) {
    var comment = entry.summary.$t;}
    else var comment = "";
    var re = /<\S[^>]*>/g;
    comment = comment.replace(re, "");

    document.write('<li>');
    if (comment.length < 50) {
    document.write('<div style="font-size:90%;background-color: #E8EEFA;border: #C3D9FF 1px dashed;margin-right:5px">' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
    document.write(' - ' + entry.author[0].name.$t + ' commented on');
    document.write(' ' + pttitle + ':</div>');
    document.write(comment);
    }
    else
    {
    comment = comment.substring(0, 50);
    var quoteEnd = comment.lastIndexOf(" ");
    comment = comment.substring(0, quoteEnd);
    document.write('<div style="font-size:90%;background-color: #E8EEFA;border: #C3D9FF 1px dashed;margin-right:5px">' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
    document.write(' - ' + entry.author[0].name.$t + ' commented on');
    document.write(' ' + pttitle + ':</div>');
    document.write(comment + '...<a href="' + ctlink + '">(more)</a>');
    }
    }
    document.write('</li>');
    }
    </script>
    <script src="http://thebleedingear.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
    </script></ul>
    <noscript>You need to enable JavaScript to read this.</noscript>


    [+/-] Click here for code

    3 comments:

    Sara said...

    I like the widget :)

    Also, I think you will enjoy this blog: http://indiana2india.blogspot.com/

    I was in some French classes with him.

    123 123 said...
    This comment has been removed by a blog administrator.
    ankara evden eve nakliyat said...

    very nice blog thank you :)