Singpolyma

Technical Blog

Archive for the "Tech" Category

Commentosphere Blogger Integration

Posted on

I have finalised the first version of a template hack for Blogger that inlines Commentosphere data for comments on your blog. This allows you to make better use of the semi-threading features of Commentosphere. Insert only the code snippets for the data you want (the first two are invisible and mandatory).

  1. Insert this code somewhere in the post section of your template (it is invisible, so it doesn’t matter where):
    <script type=”text/javascript”>
    //<![CDATA[
    posturl = ‘<$BlogItemPermalinkUrl$>’;
    //]]>
    </script>
  2. Insert this code right after your <BlogItemComments> tag:
    <script type=”text/javascript”>
    //<![CDATA[
    csdata = {};
    for(var i=0; i<Commentosphere.posts.length; i++) {
    if(Commentosphere.posts[i].url == posturl+’#c<$BlogCommentNumber$>’ || Commentosphere.posts[i].url == posturl+’#<$BlogCommentNumber$>’) {
    csdata = Commentosphere.posts[i];
    break;
    }//end if url == this
    }//end for
    //]]>
    </script>
  3. Insert this code where you want the links to parents of the comment (if there are any) to show up:
    <script type=”text/javascript”>
    //<![CDATA[
    if(csdata.parents && csdata.parents[0] != ”) {
    document.write(‘(‘);
    for(var i=0; i<csdata.parents.length; i++) {
    if(i > 0)
    document.write(‘ | ‘);
    parenturl = ‘#’+csdata.parents[i].split(‘#’)[1];
    document.write(‘<a href=”‘+parenturl+'”>parent #’+(i+1)+'<\/a>’);
    }//end for
    document.write(‘)’);
    }//end if
    //]]>
    </script>
  4. Insert this code where you want the links to replies to the comment (if there are any) to show up:
    <script type=”text/javascript”>
    //<![CDATA[
    if(csdata.children && csdata.children[0] != ”) {
    for(var i=0; i<csdata.children.length; i++) {
    if(i > 0)
    document.write(‘ | ‘);
    childurl = ‘#’+csdata.children[i].split(‘#’)[1];
    document.write(‘<a href=”‘+csdata.children[i]+'”>reply #’+(i+1)+'<\/a>’);
    }//end for
    }//end if
    //]]>
    </script>
  5. Insert this code where you want the link to the comment on Commentosphere and tags to show up:
    <script type=”text/javascript”>
    //<![CDATA[
    if(csdata.id) {
    document.write(‘ <a href=”http://comment.ning.com/index.php?id Commentosphere</a> ‘);
    }//end if
    if(csdata.tags && csdata.tags[0] != ”) {
    document.write(‘ – Tags: ‘);
    for(var i=0; i<csdata.tags.length; i++) {
    document.write(‘ <a href=”csdata.id[i]+'”>’+csdata.tags[i]+'<\/a> ‘);
    }//end for
    }//end if
    //]]>
    </script>
  6. Save your template and republish your blog
http://del.icio.us/singpolyma.techblog/blogger

Del.icio.us JSON with Callback

Posted on

This code will remain in the public domain, however since del.icio.us JSONP is now native I will no longer guarantee hosting for it.

In updating my version of FreshTags I ran into a problem — there’s no way to make your script block until the JSON data comes in from del.icio.us. I tried numerous different blocking/callback techniques, but they were slow, complicated, and somewhat beyond my JavaScript knowledge. What I kept coming back to was trying to get a callback function to run when the JSON data was done loading. Finally an idea hit me — why not just modify the del.icio.us JSON data to fire a callback itself, like my Commentosphere JSON does? Simple, yet insane. It worked.

Instead of calling the del.icio.us JSON directly, call this:

http://www.awriterz.org/etcetc/deliciousjsonp.php?url=URL TO DELICIOUS JSON

the resulting JSON data checks to see if you have set Delicious.callbacks.posts (or Delicious.callbacks.tags, depending what type of JSON data you’re pulling in) and if you have, calls it, passing Delicious.posts as a parameter to the function. Delicious.posts still gets set in the same way as if you had called direct from del.icio.us. For even greater customisability you can use this URL form:

http://www.awriterz.org/etcetc/deliciousjsonp.php?url=URL TO DELICIOUS JSON&callback=CALLBACK

Where CALLBACK is the name of your callback function.

Using this script to access del.icio.us JSON data also provides a measure of graceful degredation, since the script attempts to determine if valid JSON data is present, and if not, outputs null data instead.

I am placing the PHP code I used to do this in the public domain. Please feel free to modify, translate, or host this code yourself. Particularly to host it, which will save bandwidth on my server. The code is below:

<?php

header(‘Content-Type: text/javascript;’);//output header for JSON

if(!$_GET[‘url’]) {//if we weren’t passed the url, die gracefully
echo ‘if(typeof(Delicious) == “undefined”) Delicious = {}; Delicious.posts = [];’.”\n”;
} else {
$deldata = file_get_contents($_GET[‘url’]);//get the original del.icio.us JSON
f(!stristr($deldata,’Delicious.tags’) && !stristr($deldata,’Delicious.posts’)) {
echo ‘if(typeof(Delicious) == “undefined”) Delicious = {}; Delicious.posts = [];’.”\n”;
} else {
echo $deldata.”;\n”;//and output it
}//end if-else not JSON
}//end if-else !url

if(stristr($deldata,’Delicious.tags’)) {//if it is tags JSON
if($_GET[‘callback’]) {//if we were passed the name of the callback
echo ‘if(‘.$_GET[‘callback’].’)’.”\n”;
echo ‘ ‘.$_GET[‘callback’].'(Delicious.tags);’;
} else {//otherwise use generic callback
echo ‘if(Delicious.callbacks && Delicious.callbacks.tags)’.”\n”;
echo ‘ Delicious.callbacks.tags(Delicious.tags);’;
}//end if callback
} else {//otherwise assume post JSON
if($_GET[‘callback’]) {//if we were passed the name of the callback
echo ‘if(‘.$_GET[‘callback’].’)’.”\n”;
echo ‘ ‘.$_GET[‘callback’].'(Delicious.posts);’;
} else {//otherwise use generic callback
echo ‘if(Delicious.callbacks && Delicious.callbacks.posts)’.”\n”;
echo ‘ Delicious.callbacks.posts(Delicious.posts);’;
}//end if callback
}//end if-else stristr deldata Delicious.tags

?>

Updates to my version of FreshTags

Posted on

I have been doing some work on my version of the FreshTags concept. The first major addition is the ability to pull in other FreshTags users’ data for use in the sidebar. If you look at my links sidebar you’ll see a ‘+’ to the left of some items. Only two of these use FreshTags, Freshblog and Ecmanaut. If you click the ‘+’ next to either of these when there is no query tag you will be presented with a list of the newest posts from those blogs. If there is a tag selected, however, you will be presented with a list of posts on those blogs matching that tag, unless they have none in which case the list of newest posts is again presented. The template code to do this (without the show/hide magic) is:
<script type=”text/javascript”>dynamic_delicious_load(‘DELICIOUS USER‘,’ANCHOR TAG‘,function(){write_tagged_posts(false,false,’FEED URL‘);});</script>
The three parameters passed to write_tagged_posts are:

  1. extendedyes — TRUE to display the contents of the extended field, otherwise FALSE
  2. hideonnull — TRUE to have blank output if there are no post matches, otherwise FALSE
  3. feedurl — The URL to the feed for this item, do not pass if you don’t know it or don’t want to display recent items on no match
  4. max — # limit of posts to display, not shown in example above

The second major addition is to the fetch_query_tag function. If no tag has been passed to the page, and it cannot find one in the referrer URL then it looks in the current page. It grabs the first rel=tag item and uses the contents of that as query_tag. Thus if a tag cannot be found any other way it finds related posts to the current one. The only minor problem with this addition is that including the JavaScript in the header means fetch_query_tag runs before the page has fully loaded, so it will usually not find anything. I solved this by moving the block that includes the main Delicious.posts and the tagspostpage.js to my sidebar, which is after my posts in my code. If your sidebar comes before your posts you’re stuck, because you need it loaded before the sidebar for the list_side_tags function to work. If anyone knows of a way around this I would appreciate knowing.

I was unable to actually hook this to onload (per Johan’s comment) because the data must be loaded before list_side_tags or write_tagged_posts can be run. I found a solution in using the callbacks again, and this time list_side_tags will load tags if they are unloaded when called and same for posts for write_tagged_posts. return_tagged_posts can therefore not be called until one of these others (or you call load_data(‘posts’) yourself), however since the main use of return_tagged_posts is at the end of the code, after write_tagged_posts, for use on the inline tags page, this should not be a problem. So autocapture should now work without modifying your template code to move the javascript stuff from the <haed> section.

If you place code similar to:
<MainPage><script type=”text/javascript”>var no_autocapture = true;</script></MainPage>
in your <head> section it will stop the tag autocapture on your main page (per Richard’s comment)

Blogger Comment Permalinks

Posted on

Johan of Ecmanaut has pointed out on a couple occasions that Blogger’s ‘default’ comment permalink URL was POSTURL#cCOMMENTID. I had never found much proof of this claim, except for some default code in the blogger templates — but some of them (like the one mine is based off of) actually have the anchor that works set to the above, and the links themselves set to #COMMENID with no ‘c’… confusing that.

In some recent work I did on the XOXO Blog and in the creation of the Commentosphere Userscript I found out something very disturbing — this discrepancy extends beyond the template codes! Johan’s claim stems from the fact that the anchors on comment pages (those ugly things I partly avoid by my inline comments form) use the #cCOMMENTID format, and hence his commentblogging script (and my commentosphere script) both pull in this format when passing data to del.icio.us or commentosphere, respectively.

There is, however, a Blogger template tag (<$BlogCommentPermalinkURL$>) that is meant to output the entire permalink of a comment (including posturl), something I’ve been looking for for awhile to alleiviate the need for the ugly JavaScript hackery I have in my blog template to facilitate the same. This template tag, however, outputs using the #COMENTID format! If this isn’t confusing I don’t know what is — which one is standard, Blogger?

For now, I would reccomend using both. How? Change your comment anchor to read something like <a id=”c<$BlogCommentNumber$>” name=”<$BlogCommentNumber$>”> </a>.

Commentosphere – Importer and Userscript

Posted on

After much trouble and headaches with the speed of the Ning backend, the Commentosphere Delicious Importer is working! Numerous recent updates and optimizations to Ning seem to have greatly increased the speed of the backend, which was what was dragging down the original. I created a test app clone of Commentosphere and successfully imported 70 comments from some test data Johan sent me awhile back to make sure that it really was working this time.

There is also now a Greasemonkey userscript for posting to Commentosphere! Based off of Johan’s commentblogging userscript, it adds a link to all comment post pages on Blogger blogs that links to the Add a Comment form on Commentosphere, already filled in with the necessary information for your new comment. One thing I would like to add to the script is the ability to select parent comments from the comment page, instead of having to get that data manually if you want it. It is still recommended to run with both the userscript and the bookmarklet — for posting comments from non-Blogger blogs.