I have updated my inline comments form hack to be compatible with coComment. Note that if you have the comments forms visible on your main and archive pages like I do there will still be a problem there, but on item pages the values will be filled it and the coComment detector automatically invoked.
This post has been ‘deprecated’. Please see FreshTags-Singpolyma 2
I have for some time had my own version of the FreshTags system. In the past, all upgrades to this version have been seamless to the user, but this time the changes were too radical to allow that to work. I have rewritten the entire hack based off of the FreshTags v0.5 code. The major changes from FreshTags 0.5 are:
- Hidden post page is used for displaying tags, instead of reloading the current page and displaying in the sidebar (the primary purpose of the original modifications)
- Completely asynchronous data load — FreshTags no longer loads before the page content, but rather loads afterwards, resulting in a faster page load time
- If no tag is selected one can be automatically pulled from relTag data on the page
- Full support for peek-a-boo headlines in blogrolls
Please Note : If you are upgrading from my previous hack, you will need to remove all of its code from your template before upgrading. You will also have to edit the Tags post.
Basic Installation Instructions
- Create a new post on the blog you would like to implement this hack on with the title ‘Tags’ and click the ‘Edit Html’ tab for the post body, pasting the exact code ‘<div id=”freshtags_postpage”><i>Loading…</i></div>’ into the post body. Turn comments off for the post and set the post date to January 1, 2000. The time doesn’t matter. Post this post. (If you are upgrading from the previous version, just edit the post to contain the new code.)
- Edit the template for your blog and insert this code into the <head> section:
<script type=”text/javascript”>
//<![CDATA[
var del_user = “
delicious username“;
var anchor = “
anchor tag“;
var defs = “”;
var maxposts = 10;
var freshtags_tags_id = “freshtags_tags”;
var freshtags_posts_id = “freshtags_posts”;
var freshtags_postpage_id = “freshtags_postpage”;
//]]>
</script>
<script type=”text/javascript” src=”
http://jscripts.ning.com/get.php?xn_auth=no&id=818185
Where ‘delicious username’ is the del.icio.us username you store your blog data in and ‘anchor tag’ is the anchor tag you use (if you use one). If you don’t use an anchor tag, just replace the words ‘anchor tag’ with nothing.
- Insert this code where you would like the tags drop-down to go:
<div id=”freshtags_tags”><i>Loading…</i></div>
<div id=”freshtags_posts”></div>
- Save your template and republish your blog
Customisation Options
- no_autocapture — setting this variable to true will keep the script from attempting to grab relTag data from the page. For example, to keep a Blogger blog using this script from grabbing relTag data when on the main page use <MainPage><script type=”text/javascript”>var no_autocapture = true;</script></MainPage>
- defs — setting this variable sets what tag(s) will be selected be default if the user has not selected any. This will do nothing if no_autocapture is not set to true unless the autocapture failes.
- maxposts — the maximum number of posts to display in the sidebar
- freshtags_tags_id — the ID of the block to put the tags dropdown in
- freshtags_posts_id — the ID of the block to put the posts list
- freshtags_postpage_id — the ID of the block in the Tags post
- freshtags_tag_format — the format for the tags list (default is ‘drop-add’). For example, to use asynchronous post loading add this code to your template: <script type=”text/javascript”>var freshtags_tag_format = “drop-add-async”;</script>
Peek-A-Boo Blogroll Headlines
To add peek-a-boo headlines to your blogrolls follow the following steps:
- Add this code to the <head> section of your blog to facilitate the actual show/hide:
<script type=”text/javascript”>
//<![CDATA[
function toggleitem(postid,linkid,newtxt,displaytype) {
if(!displaytype) {displaytype = ‘block’;}
var whichpost = document.getElementById(postid);
if (whichpost.style.display != “none”) {
whichpost.style.display = “none”;
} else {
whichpost.style.display = displaytype;
}
if(linkid) {
var lnk = document.getElementById(linkid);
lnk.href = “javascript:toggleitem(‘”+postid+”‘,'”+linkid+”‘,'”+lnk.innerHTML+”‘);”;
lnk.innerHTML = newtxt;
}
}
//]]>
</script>
- Add this code just after the blogroll link you want to add peek-a-boo headlines for (it’s invisible defaultly, just the container for the headlines) ‘<div id=”blognameheadlines” style=”display:none;”><i>Loading…</i></div>‘
- If this blog stores post data in del.icio.us (they don’t have to use FreshTags necessarily) add this code just before the blogroll link (it’s the +/- link for showing/hiding the headlines):
<a id=”blognamelink” href=”javascript:toggleitem(‘blognameheadlines’,’blognamelink’,’-‘); load_otherblog_titles(‘del.icio.us’,’other blog’s del.icio.us account username‘,’other blog’s anchor tag (if they use one)‘,’URL to other blog’s feed (optional)‘,’blognameheadlines’);”>+</a>
Otherwise add this code to use just their feed:
<a id=”blognamelink” href=”javascript:toggleitem(‘blognameheadlines’,’blognamelink’,’-‘); load_otherblog_titles(‘feed’,”,”,’URL to other blog’s feed‘,’blognameheadlines’);”>+</a>
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:
- extendedyes — TRUE to display the contents of the extended field, otherwise FALSE
- hideonnull — TRUE to have blank output if there are no post matches, otherwise FALSE
- 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
- 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)