Singpolyma

Archive of "Blogger"

Archive for the "Blogger" Category

The State of Distributed Social Networking

Posted on

Also known as Portable Social Networking, this is the concept of decentralising the social networking functionality of sites like Facebook so that one does not have to use every service to connect with everyone (previously covered here).

Videntity is a wonderful service for this movement, and one that I have been using as the hub of much of my efforts. Explode seems promising, but they’re down for upgrade.

So let’s talk about my list from last time:

  1. hCards and Pingerati : For Blogger I have a wizard. Pingerati pings still manual.  For WordPress there is a widget.  Pings still manual.  For even more professional information (such as my resume) there is an hResume WordPress Plugin.  For other websites/services there is always the hCard Creator.  Of course, Videntity.org supports hCard by default.
  2. XFN Friends lists : For Blogger I have a wizard.  This wizard will actually work on any web page or on any service where you can post (X)HTML (including MySpace or Xanga!)  For WordPress there is a nice plugin, although a widget version would be a bonus.  Videntity supports this by default.As far as finding/adding friends goes I have a bookmarklet for Videntity that allows one to add hCards, Facebook results, or Wink.com people results as friends/contacts.  Bookmarklets for other services would not be hard.  For Blogger we would need an actual blogroll-producing service beyond just a wizard to make this work.
  3. Public/private profiles : Again, Videntity has this built right in (as long as you have the URL that the contact uses for OpenID on the friend list, it does not follow rel=me).  I am working on a solution for WordPress.  Would people be interested in a solution for Blogger/other websites?
  4. Messaging : not sure where I stand on this.  Lots of nice contact options, and creating a ‘wall’-like interface on WordPress would be easy.  The question is : what is the goal of this?  If it is just the address book features then a way to integrate social networking contact lists with email clients / Gmail might be better.  If it is being able to communicate without revealing your email address a protocol/system for that might be easy enough.My brother (and avid Facebooker) says that it is about visibility.  The benefit of Facebook messaging, for him, is the unified notifications area that he KNOWS his friends all check.  He KNOWS that they will see his message.  He is not sure they check their email.

I still promote the idea of supporting rel=tag on hCards.  We need a better hCard search engine, one that takes Pingerati pings, crawls regularly (some of my pings from months ago were never indexed by the Technorati Kitchen hCard search), outputs results as hCards (to facilitate things like my bookmarklet), and recognizes rel=tag.

Perhaps a tagspace could do a rev=tag for members.  If an hCard URL has rel=tag to a page that has rev=tag to it that would give credibility to the category.

Notifications (think Facebook mini-feed) need to fit into this idea somehow.  Events are hCalendar.  Notes/posts/shares are hAtom/xFolk.  Status is something I’ve blogged about recently too.  Services like Twitter are heading in the right direction.

New Comment Photo Hack (Blogger)

Posted on

By demand, I have added a maxheight option to this hack as well, it works the same way as maxwidth 🙂

Some people have really liked my comment photos and highlighting hack. Many have hated it. Especially since the move to the new Blogger, the hack is just unstable and difficult to implement or understand. Even my own implementation (before the move) was doing odd things.

So I decided that a complete rewrite was in order. The old scripts are still intact, but this new hack uses none of the old code. This hack does only comment author photos (highlighting is better handled other ways in the new Blogger).

This hack is 100% compatible with the newest version of my asynchronous peek-a-boo comments.

Without further ado, the instructions:

  1. Go to ‘Edit HTML’ under Template and check the ‘Expand Widget Templates’ box.
  2. Find the following code:

    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>

    and insert the following code directly after it:

    <div style="clear:both">
    <dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'></dt>
    <script type="text/javascript">if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id 'url':'<data:comment.authorUrl/>'});</script>
  3. If you go down a very small ways from where you were in the previous step you will see a </dl>. Directly before it insert the code: </div>
  4. Directly before the </body> code in your template add this code:

    <script type='text/javascript'>
    //<![CDATA[
    function commentPhotoDo() {
    var tag;
    for(var i in commentPhotoIds) {
    tag = document.createElement('script');
    tag.type = 'text/javascript';
    tag.src = 'http://scrape.singpolyma.net/avatar.php?maxwidth=70&url='+encodeURIComponent(commentPhotoIds[i].url)+'&id='+encodeURIComponent(commentPhotoIds[i].id)+'&defaultimage='+encodeURIComponent('http://img139.imageshack.us/img139/1011/defaultavatarad7.png');
    document.body.appendChild(tag);
    }//end for var i in commentPhotoIds
    }//end function commentPhotoDo
    commentPhotoDo();
    //]]>
    </script>
  5. Save your template

My fellow hackers will not like the way I did the second-to-last step. I should be using window.onload. I am not simply because in the tests I did on a certain much-hacked template, this worked and the other didn’t. I am not prepared to say why the other didn’t, only that it didn’t and that disturbed me. So for this hack I’m doing it like this. It works.

This hack causes direct hits to my singpolyma.net hosting server every time a page loads. If your blog gets a significant amount of viewers (>300 subscribers or thereabouts) I would ask that you contact me before installing this hack so that we can work out whether it will be a bandwidth issue or not. Thank you for understanding.

BloggerHacks Toolbar

Posted on

Yet another experiment in following the community.  I have used the toolbar-creation tools from Conduit to create a social toolbar for the Blogger hacks community.

The toolbar has links to all the major Blogger hackers (if I forgot you, I’m sorry, tell me and I’ll add your link!), a drop-down to the main sections of the hacks wiki, a built-in search of the wiki (the co-op one isn’t allowed… but I linked to it), a feed-reader that alerts your when a hacker posts something new, and an announce section for community-wide alerts.  There is also a chatroom, email notification, weather, and pop-up blocking option.  All components are optional.

One of the really cool things is that there is a version for both Firefox and Internet Explorer.  If I update the toolbar components on their site, everyone’s toolbar gets updated, without a reinstall.

So, check it out at the toolbar homepage.

FreshTaggy Goodness

Posted on

FreshTags’ core has been without update for quite some time (and, I believe, does not even render properly on the New Blogger. My version has not fared much better (although I did upgrade it to work with the new blogger 🙂 ). Now it is time for some improvements!

For Blogger
Full integration with the New Blogger labels system! You have to paste a small code into your sidebar, and then FreshTags will pull its data directly from your local labels! Great for new users or people who have fully migrated. Best of all, to install this takes only a few steps on the wizard. Select ‘Blogger’ as the data source, enter your blog URL, change any other settings you might want, and click ‘Generate Code’. Copy the code presented into your sidebar and then click the generated button to instantly install the widget with your settings! (Does not work on FTP blogs.)

For Everywhere
There are now three wizards for my version of FreshTags. There is one to generate the JSON for individual widgets (hackers). There is one to generate the full code for anywhere (some knowledge necessary). Finally there is one that generates a one-click button (or instructions and a button) for the New Blogger.

For MediaWiki
That’s right. Go over to BloggerHacks to see it in action. FreshTags for MediaWiki! The wizards (above) can generate the code, but it’s a bit hackier to integrate with the sidebar. Check out the BloggerHacks Sidebar and Header Section to see how I did it (click the view source wiki tab for wikicode).

For WordPress
I have updated FreshTags for WordPress (with the help of my friend, Trevor Creech) to work as a WordPress Widget. If you don’t have widgets on your WordPress blog, don’t worry! It still works the old way.

Table for Converting Blogger Classic to New Blogger

Posted on

I have added a lot of new tags and some corrections to the table.

A few people have asked for something like this. A table of Blogger Classic template tags and their new equivalent. This is not entirely possible because it is not a 1:1 relationship, but I will do my best. This is a post for those who were somewhat literate in the old Blogger and want to upgrade. Another post to check out would be Johan’s original post. Great stuff.

If you have a template tag from Blogger Classic that you don’t see here, post it in a comment and I’ll try to add it. This is a work in progress.

<$BlogPageTitle$> <data:blog.pageTitle/>
<$BlogMetaData$> <b:include data=’blog’ name=’all-head-content’/>
<style type="text/css"> <b:skin><![CDATA[
</style> ]]></b:skin>
<$BlogURL$> <data:blog.homepageUrl/>
<$BlogDescription$>
<Blogger> <b:section class=’posts’ id=’posts’ showaddelement=’yes’ growth=’vertical’>
<b:widget id=’PostWidget’ locked=’false’ title=’Posts’ type=’Blog’>
<b:includable id=’main’>
<b:loop values=’data:posts’ var=’post’>
</Blogger> </b:loop>
</b:includable>
</b:widget>
</b:section>
<$BlogItemNumber$> <data:post.id;
<BlogDateHeader> <b:if cond=’data:post.dateHeader’>
</BlogDateHeader> </b:if>
<$BlogDateHeaderDate$> <data:post.dateHeader/>
<$BlogItemPermalinkUrl$> <data:post.url/>
<BlogItemTitle> <b:if cond=’data:post.title’>
</BlogItemTitle> </b:if>
<$BlogItemTitle$> <data:post.title/>
<$BlogItemBody$> <data:post.body/>
<$BlogItemAuthorURL$> <data:blog.homepageUrl/>
<$BlogItemAuthor$> <data:post.author/>
<$BlogItemDateTime$> <data:post.timestamp/>
<BlogItemCommentsEnabled> <b:if cond=’data:post.allowComments’>
</BlogItemCommentsEnabled> </b:if>
<$BlogItemCommentCount$> <data:post.numComments/>
<$BlogItemControl$> <span class=’control’>
<b:if cond=’data:post.emailPostUrl’>
<span class=’item-action’>
<a expr:href=’data:post.emailPostUrl’ title=’Email Post’>
<span class=’email-post-icon’> </span>
</a>
</span>
</b:if>
<b:include data=’post’ name=’postQuickEdit’/>
</span>
<$BlogEncoding$> <data:blog.encoding/>
<$BlogTitle$> <data:blog.title/>
<$BlogItemAuthorNickname$> <data:post.author/>
<$BlogID$>
<$BlogItemUrl$> <data:post.link/>
<ItemPage> <b:if cond=’data:blog.pageType == "item"’>
</ItemPage> </b:if>
<MainOrArchivePage> <b:if cond=’data:blog.pageType != "item"’>
</MainOrArchivePage> </b:if>
<MainPage> <b:if cond=’data:blog.pageType == "main"’>
</MainPage> </b:if>
<ArchivePage> <b:if cond=’data:blog.pageType == "archive"’>
</ArchivePage> </b:if>
<$BlogItemCreate$> <a expr:href=’data:post.addCommentUrl’>Post a Comment</a>
<BlogItemComments> <b:loop values=’data:post.comments’ var=’comment’>
</BlogItemComments> </b:loop>
<$BlogCommentNumber$> <data:comment.id;
<$BlogCommentDateTime$> <data:comment.timestamp/>
<$BlogCommentAuthor$> <address style="display:inline;font-style:normal;" class="author vcard">
<b:if cond=’data:comment.authorUrl != ""’>
<a class="url fn" expr:href=’data:comment.authorUrl’><data:comment.author/></a>
<b:else/>
<span class="fn"><data:comment.author/></span>
</b:if>
</address>
<$BlogCommentBody$> <data:comment.body/>
<$BlogCommentDeleteIcon$> <b:include data=’comment’ name=’commentDeleteIcon’/>
<$BlogCommentPermalinkURL$> #c<data:comment.id;

For how to use this syntax inside tag attributes, please see Johan at Ecmanaut. I would actually recommend that you read that whole post.