Singpolyma

Archive for January 16th, 2006

Archive for January 16th, 2006

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)