Singpolyma

Archive for October, 2006

Archive for October, 2006

BlogID in Blogger BETA

Posted on

Blogger BETA seems to have no template tag (or equivalent) any more for the BlogID, which is sometimes a very useful value to have. I have hacked together the following JavaScript function which should return the BlogID of any Blogger BETA blog it is run on:

function getBlogID() {
var links = document.getElementsByTagName('link');
var href = '';
for(var i=0; i<links.length; i++) {
if(links[i].rel == 'EditURI') {
href = links[i].href;
break;
}//end if rel == EditURI
}//end for i<links.length
href = href.match(/blogID=([\d]+)/);
return href[1];
}//end function getBlogID

Comments on Main/Archive Page (Peek-a-Boo) in Blogger BETA

Posted on

There was a typo in this post! I finally found it. Your templates should be able to save after applying this hack now 😉

I have released an asynchronous version of this hack.

So now that people have stopped asking me for this feature (because I said I couldn’t do it) I’ve done it! Screen-scraping to the rescue! If you re-install this hack you’ll get more manageable code in your template, bug fixes for timezone logic, and comment author links. Finally! Yay! This also improves compatibility between this hack and my comment photos hack.

You can not link to author’s blogs or profiles from the main page because that data is not available in the feed Blogger provides. Some day I may dream up a way to do this — or Blogger may start providing the information. For now, it’s not happening.

Updated 2006-11-27 to work with new Native JSONP, should be faster now.

As I said back when I first released my BETA template, displaying comment data anywhere but on item pages in Blogger BETA is ‘impossible’. That is what this hack overcomes. Both just plain displaying comments on main and also peek-a-boo comments are now possible (revised template coming soon 😉 ).

  1. Go to the layout on your BETA blog and select ‘Edit HTML’.
  2. Check the ‘Expand Widget Templates’ box.
  3. Paste the following code into the <head> section of the template:

    <script type="text/javascript">
    //<![CDATA[
    var comment_form_template = '<div class="commentelem"><div class="comment-poster">[[AUTHOR]]</div>\n'
    + '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n'
    + '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div></div>\n';
    //]]>
    </script>

    <script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2706908' type='text/javascript'></script>

    Advanced users will note that the first <script> section is taken from the asynchronous comment form code, and that if that is installed (presuming I get a version working for Blogger BETA) that the code only needs to be in here once. It can be changed to fit the code of the blog itself to improve appearance, etc. Kudos to Johan Sundström for his help with the date code.

  4. If you want peek-a-boo functionality, you will need this code in your <head> section somewhere as well:
    <script type=”text/javascript”>
    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;
    }
    }//end function toggleitem
    </script>
  5. Find the place in your template where the comments are generated on item pages, it will probably look something like this:
    <b:loop values=’data:post.comments’ var=’comment’>
    <dt class=’comment-author’ expr:id='”comment-” + data:comment.id’>

    And directly before that, insert this code:

    <b:loop values=’data:post.feedLinks’ var=’f’>
    <b:if cond=’data:blog.pageType != “item”‘>
    <script expr:src=’data:f.url + “?alt=json-in-script&amp;amp;callback=peekaboo_comments_display”‘ type=’text/javascript’/>
    </b:if>
    </b:loop>
  6. If you want to use peek-a-boo functionality put, find the code a little bit before that which you just inserted that looks something like:
    <b:includable id=’comments’ var=’post’>
    <div class=’comments’ id=’comments’>

    And replace that second line with:

    <div class=’comments’ expr:id='”comments” + data:post.id’>
    <b:if cond=’data:blog.pageType != “item”‘>
    <script type=’text/javascript’>
    document.getElementById(‘comments<data:post.id = ‘none’;
    </script>
    </b:if>
  7. Next, find the post-generating code. It will look start something like this:
    <b:includable id=’main’ var=’top’>
    <!– posts –>
  8. In this section there will be a block of code that looks something like:
    <b:if cond=’data:blog.pageType == “item”‘>
    <b:if cond=’data:post.allowComments’>
    <b:include data=’post’ name=’comments’/>
    </b:if>
    </b:if>

    Replace it with this:

    <b:if cond=’data:post.allowComments’>
    <b:include data=’post’ name=’comments’/>
    </b:if>
  9. If you want to use peek-a-boo functionality you need to find the post template section, which starts something like this:
    <b:includable id=’post’ var=’post’>

    And then find the link to the comments area, which looks something like:

    <b:if cond=’data:post.allowComments’>
    <a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
    </b:if>

    And replace it with:

    <b:if cond=’data:post.allowComments’>
    <a class=’comment-link’ expr:href=’data:post.url + “#comments”‘ expr:onclick='”toggleitem(&amp;quot;comments” + data:post.id + “&amp;quot;);return false;”‘><b:if cond=’data:post.numComments == 1’>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
    </b:if>
  10. Click ‘Save Template’ and, if it appears, ‘Confirm & Save’, then view your blog.

Feed Links in BETA

Posted on

Please see the new, easier hack for this feature.

I love Blogger BETA, but there are just some things about it that annoy me. Duh. That’s why I’m a hacker. One of these is that feed links are displayed at the bottom of the page instead of in my sidebar. No longer. Insert this code wherever you want the feed links to display and you’ll have a feed links widget you can drag and drop in your template editor!

<b:widget id=’FeedsWidget’ locked=’false’ title=’Feeds’ type=’Blog’>
<b:includable id=’main’>
<h2 class=’sidebar-title’>Syndication</h2>
<b:if cond=’data:feedLinks’>
<ul class=’xoxo’>
<b:loop values=’data:feedLinks’ var=’f’>
<li><img src=’http://photos1.blogger.com/blogger/6537/1341/1600/feed-icon-12 alt=” /> <a expr:href=’data:f.url + “?alt=rss”‘ rel=’alternate’><data:f.name Feed</a></li>
</b:loop>
</ul>
</b:if>
</b:includable>
</b:widget>

Coming soon for Blogger BETA: Comments on Main and Archive pages (peek-a-boo!) and a revised Singpolyma-Template.

FreshTags as API

Posted on

The new FreshTags system comes with many benefits, such as the WidgetData system and also a more flexible interaction with the code itself.

Some basic example of this are the widgets one can create just using different settings. To include a feed in your sidebar you can add this code in with the other FreshTags settings data:

//feed widget
WidgetData[‘freshtags’][‘freshtags_FeedName‘] = {
‘type’:’posts’,
‘source’:’feed’,
‘feedurl’:’FeedURL‘,
‘rows’:10
};

And this code wherever you want the feed headlines to display:

<div id=”freshtags_FeedName“><i>Loading Feed…</i></div>

Similarly, a minor tweak to that code yeilds ‘Generic FreshTags’ behaviour as existed in the original FreshTags release:

//generic widget
WidgetData[‘freshtags’][‘freshtags_generic’] = {
‘type’:’posts’,
‘source’:’feed’,
‘feedurl’:’http://del.icio.us/rss/tag/%tags%’,
‘rows’:10
};

And:

<div id=”freshtags_generic”><i>Loading del.icio.us…</i></div>

Peek-a-boo headlines functionality also remains:

//Headlines Widget
WidgetData[‘freshtags’][‘BlogNameheadlines’] = {
‘type’:’external’,
‘source’:’del.icio.us’,
‘username’:’del.icio.us username for blog‘,
‘anchor’:’anchor tag for blog‘,
‘feedurl’:’FeedURL for blog‘,
‘tag_list’:’freshtags_tags’,
‘rows’:10
};

And:

<a id=”BlogNamelink” href=”javascript:toggleitem(‘BlogNameheadlines’,’BlogNamelink’,’-‘);freshtags_load(‘BlogNameheadlines’);”>+</a>
<a href=”BlogURL“>BlogName</a>
<div id=”BlogNameheadlines” style=”display:none;”><i>Loading…</i></div>

Note that the following must be included in the <head> section of your blog for this to work:

<script type=”text/javascript”>
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;
}
}//end function toggleitem
</script>

Below is a list of easily externally accesible functions in FreshTags:

  • freshtags_load – called with no parameter it (re)loads all FreshTags widgets on a page. If you pass it the ID of a widget, just that widget will be (re)loaded (and associated widgets).
  • get_current_tags – takes three optional parameters, a space-separated string of default tags to use if none are found, an object containing a complete list of all tags avaliable for use in the format {‘tag’:count}, and a boolean value specifying whether or not to draw rel-tag data from the page if no tags are detected from the URL/referrer. Returns a plus-separated string of tags found or the null string (”).
  • main_tags_loaded – if you pass it false and teh ID of a FreshTags tag widget it will reload the widget (and associated widgets) without re-calling get_current_tags like freshtags_load does (thus enabling you to set the current tags to whatever you want).
  • listTags – takes the ID of a FreshTags tag widget and returns a string of the renderation to XHTML.
  • listTitles – takes the ID of a FreshTags posts (or external) widget and returns a string of the renderation to XHTML. An optional second parameter specifies whether to hide the widget when there’s no data (false, default) or