bcanzanella/tumblr_recentpostwidget_js.html

## tumblr_recentpostwidget_js.html
<!-- need jquery for this, this line should really go in your theme html
     just after the <head> marker, might work OK here if you aren't already using jquery -->
<script	src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<!-- Mimic the style of the tumblr headers from your theme -->
<div class="heading">Recent Posts</div>

<!-- The javascript below will insert your recent posts lists in here -->
<div id="recentPosts"></div>

<!-- // when this script is run, it sets a variable named tumblr_api_read to the result -->
<script type="text/javascript" src="http://[you-id-here].tumblr.com/api/read/json"></script>

<!-- // this is the script that builds the html to go in the div above -->
<script type='text/javascript'>

    // number of posts to fetch
    var recent_posts_count = tumblr_api_read.posts.length < 10 ? tumblr_api_read.posts.length  : 10;

	// maximum length of titles for truncation (plus 3 for ...)
	var truncate_length    = 70;

	// start a div for the recent posts, you can add any ul,etc, formatting here also
	var recentPostsHtml = "<div>";

	// loop around and proess recent_post_count number of recent posts
	for (var i = 0; i < recent_posts_count; i++) {

			// get a post
			var post          = tumblr_api_read.posts[i];

			// we need to extract different fields for different kinds of post
			var extract_field = '';
			// we may wish to truncate some (or all, or none) of them
			var truncate      = true;
			// we may wish to add a prefix to indictae (for example) the kind of post
			var prefix        = '';

			// regular 'text' post
			if(post.type === "regular")
			{
				truncate      = false;
				extract_field = "regular-title";
			}
			// link post
			else if(post.type === "link")
			{
				prefix        = "[Link] ";
				extract_field = "link-text";
			}
			// quote post
			else if(post.type === "quote")
			{
				prefix        = "[Quote] ";
				extract_field = "quote-text";
			}
			// photo post
			else if(post.type === "photo")
			{
				prefix        ="[Photo] ";
				// note we use 'slug' as the field here, because tumblr provides us with
				// a nice truncated short clean summary. whereas the captions have html in them
				// html like div an p, which will muck up the formatting
				extract_field = "slug";
			}
			// Video post
			else if( post.type === "video")
			{
				prefix        = "[Video] ";
				// slug again, see note above
				extract_field = "slug";
			}
			// Audio post
			else if( post.type === "audio")
			{
				prefix        = "[Audio] ";
				// slug again, see note above
				extract_field = "slug";
			}
			// Conversation post
			else if( post.type === "conversation")
			{
				prefix        = "[Chat] ";
				extract_field = "conversation-title";

			}
			// Ask/Answer post
			else if( post.type === "answer")
			{
				prefix        = "[Answer] ";
				// might need to be 'slug' as well
				extract_field = "answer";
			}

			var title_field = $.trim(post[extract_field]);

			if(title_field)
			{
				// truncate and add elipses if desired
				if(title_field.length > truncate_length)
				{
					title_field = title_field.substring( 0, truncate_length ) + "...";
				}

				// add it into the html string
				recentPostsHtml += '<p><a href="' + post.url + '">' + prefix + title_field + '</a></p>';
			}

	}
	recentPostsHtml += '</div>';
	$("#recentPosts").append(recentPostsHtml);
</script>
	<!-- need jquery for this, this line should really go in your theme html
	just after the <head> marker, might work OK here if you aren't already using jquery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

	<!-- Mimic the style of the tumblr headers from your theme -->
	<div class="heading">Recent Posts</div>

	<!-- The javascript below will insert your recent posts lists in here -->
	<div id="recentPosts"></div>

	<!-- // when this script is run, it sets a variable named tumblr_api_read to the result -->
	<script type="text/javascript" src="http://[you-id-here].tumblr.com/api/read/json"></script>

	<!-- // this is the script that builds the html to go in the div above -->
	<script type='text/javascript'>

	// number of posts to fetch
	var recent_posts_count = tumblr_api_read.posts.length < 10 ? tumblr_api_read.posts.length : 10;

	// maximum length of titles for truncation (plus 3 for ...)
	var truncate_length = 70;

	// start a div for the recent posts, you can add any ul,etc, formatting here also
	var recentPostsHtml = "<div>";

	// loop around and proess recent_post_count number of recent posts
	for (var i = 0; i < recent_posts_count; i++) {

	// get a post
	var post = tumblr_api_read.posts[i];

	// we need to extract different fields for different kinds of post
	var extract_field = '';
	// we may wish to truncate some (or all, or none) of them
	var truncate = true;
	// we may wish to add a prefix to indictae (for example) the kind of post
	var prefix = '';

	// regular 'text' post
	if(post.type === "regular")
	{
	truncate = false;
	extract_field = "regular-title";
	}
	// link post
	else if(post.type === "link")
	{
	prefix = "[Link] ";
	extract_field = "link-text";
	}
	// quote post
	else if(post.type === "quote")
	{
	prefix = "[Quote] ";
	extract_field = "quote-text";
	}
	// photo post
	else if(post.type === "photo")
	{
	prefix ="[Photo] ";
	// note we use 'slug' as the field here, because tumblr provides us with
	// a nice truncated short clean summary. whereas the captions have html in them
	// html like div an p, which will muck up the formatting
	extract_field = "slug";
	}
	// Video post
	else if( post.type === "video")
	{
	prefix = "[Video] ";
	// slug again, see note above
	extract_field = "slug";
	}
	// Audio post
	else if( post.type === "audio")
	{
	prefix = "[Audio] ";
	// slug again, see note above
	extract_field = "slug";
	}
	// Conversation post
	else if( post.type === "conversation")
	{
	prefix = "[Chat] ";
	extract_field = "conversation-title";

	}
	// Ask/Answer post
	else if( post.type === "answer")
	{
	prefix = "[Answer] ";
	// might need to be 'slug' as well
	extract_field = "answer";
	}

	var title_field = $.trim(post[extract_field]);

	if(title_field)
	{
	// truncate and add elipses if desired
	if(title_field.length > truncate_length)
	{
	title_field = title_field.substring( 0, truncate_length ) + "...";
	}

	// add it into the html string
	recentPostsHtml += '<p><a href="' + post.url + '">' + prefix + title_field + '</a></p>';
	}

	}
	recentPostsHtml += '</div>';
	$("#recentPosts").append(recentPostsHtml);
	</script>