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=818185Where ‘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>