Here are the slides and some references for my closing talk at Swiss Intranet Summit in Zürich.

In a nutshell – You know digg? Now tweetmeme collects and counts all the links that are posted to twitter. And the little badge top right of this posting says how often this blog posting has been referred to.  Or you can click the green retweet button to simply create a simple tweet referring to this article. </nutshell>

TweetMeme Button tells how to add such a badge to your pages. For my Roller blog I had to edit the _day template and add the following code to the heading of each blog posting:

<div class="tweetmeme">
  <script type="text/javascript">
    tweetmeme_url = '$url.entry($entry.anchor)';
    tweetmeme_source = 'mprove';
##  tweetmeme_style = 'compact';  
  </script>  
  <script
    type="text/javascript"
    src="http://tweetmeme.com/i/scripts/button.js">
  </script>
</div>

The source parameter is your twitter name that is used for the composed tweet: 'RT @name title link (via @tweetmeme)'. Then the tweetmeme class is used to move the div to the right. It is defined in the stylesheet file:

.tweetmeme {
  float: right;
  margin-bottom: 3px;
  margin-left: 3px;
  }

Happy retweeting.

PS_ already adopted by Think Thin, GullFOSS, Student Views, Reviews Interactive

When Peter approached me a few weeks ago to work on the UI design for the next release of Sweet, I had just started on twitter in order to understand what all the fuzz is about. Well, I cannot say I get it, but at least I got some interesting links that I had missed otherwise.

Now Sweet is our internal microblogging service, based on open source laconi.ca. You can try out laconica at identi.ca or take a look at the before state_

It is not possible to significantly change a project in mid air – but this is exactly what I did by tweaking the CSS and a few images to create a pleasant and inviting design for Sweet. Note the logo (done with creatr.cc), the color scheme, the layout, the text counter, the tabs, the font changes, and the tag cloud in the after image. BTW_ the bird in the tree indicates that a tweet is also visible to the public on twitter.

Paying attention to the 'design details' can even improve the usability of such a project. A professional design increases the perceived quality and therewith the user experience. Since the relaunch we have more users and we even figured out that there was another installation of laconica running inside Sun -- they are now planing the migration to Sweet.

All this took me less than a week. I learned a lot about dirty CSS hacks, and got in touch with 2 nice colleagues at Sun whom I never met in person. Peter was a kind of project lead, and Olof the engineer behind the curtain. And guess what, our main communication tool was... Sweet!

> internal URL: http://do.sfbay.sun.com/sweet/

Hi,
here are some code snippets that show how I implemented the tag cloud on this blog.

Step 1: Log in to Roller, go to Design-Theme and select 'Custom Theme' for your blog.

Step 2: Go to Design-Stylesheet and add to the end of the CSS code:

/* Tag Cloud -----------------------------------------------*/
.tagcloud { font-size: 130%; light-height: 90%; word-spacing: 3pt; 
            text-align: center; 
            margin-top: 13px }
a.tag     { border-style: none }
a.tag.s1  { color: #a3b8cb; font-size: 70%; letter-spacing: 1px  }
a.tag.s2  { color: #a3b8cb; font-size: 90% }
a.tag.s3  { color: #5382a1; font-size: 100% }
a.tag.s4  { color: #5382a1; font-size: 120% }
a.tag.s5  { color: #35556b; font-size: 140%; letter-spacing: -1px }

Step 3: Go to Design-Templates, open the 'sidebar' template and add to an appropriate position:

<!-- TAGCLOUD -->
<div class="navsect">
<div class="tagcloud">
  #set($mytags = $model.weblog.getPopularTags(-1, 100))
  #foreach ($tag in $mytags)
    #if ($tag.count > 1)
      <a class="tag s${tag.intensity}"
         href="$url.tag($tag.name)"
         title="$tag.count">$tag.name</a>
    #end
  #end
  <a href="$url.home">(all)</a>
</div>
</div>

The surrounding navsect-div depends on your general theme. The tagcloud-div is the link to the special font style above.
Tags show up in the tag cloud as soon as they are used twice.

Step 4: The footer for each blog article should also contain the tags. For me this is coded in the '_day' template (3rd line from the bottom):

<div class="entryfooter">
<p>
  $utils.formatDate($entry.pubTime, "dd MMM yyyy")
  | <a href="$url.entry($entry.anchor)">Permalink</a>

  #if ($utils.isUserAuthorizedToAuthor($entry.website))
    | <a href="$url.editEntry($entry.anchor)">$text.get("macro.weblog.entrypermalink.edit")</a>
  #end
  #set($commentCount = $entry.commentCount)
  #if($entry.commentsStillAllowed || $commentCount > 0)
    #set($link = "$url.comments($entry.anchor)" )
    | <a href="$link" class="commentsLink">$text.get("macro.weblog.comments")[$commentCount]</a>
    #end
  | Tags: #foreach($tag in $entry.tags) <a href="$url.tag($tag.name)" title="$tag.count">$tag.name</a>  #end
</p>
</div>

Step 5: Tag your articles. Use the Tags field above the edit field when you create an article. All tags are yours. Build your own vocabulary that makes sense to you –– by adding popular tags you can drive some traffic to your site.

Step 6: Enjoy. Let me know if this was useful for you, and share a link to your blog with the new tag cloud.

-Matthias

PS_

• GullFOSS tag cloud updated
• design@sun tag cloud updated
• tag clouds for sweet, the Sun internal microblogging service
• Think Thin as well