Jaiku Presence Buttons for your website

These unofficial Jaiku.com badges give you more control over the presence badges for your website. There are currently five flavors:

• Micro-Badge
• Forum
• Simple
• Customisable
• Bespoke

Micro-Badge

This is an image that you can put on your site to link to your Jaiku presence.

Example

Source code

Enter the following information:

Username:
Width:	px

Then add this HTML to your site:
<a href="http://Username.jaiku.com/"><img src="http://jaikufans.net/_tools/forum-button/button.pl/Username.png" height="15" /></a> Or this BBCode [url=http://Username.jaiku.com/][img]http://jaikufans.net/_tools/forum-button/button.pl/Username.png?w=Width[/img][/url]

Forum

This is an image that you can put anywhere that accepts images. It updates with your latest presence within 5 minutes of you changing it. As it is a wide image it is ideal for use in a forum signature where more complex HTML is banned.

Example

Source code

Enter the following information:

Username:
Width:	px

Then add this HTML to your forum footer:
<a href="http://Username.jaiku.com/"><img src="http://jaikufans.net/_tools/forum-button/button.pl/Username.png?w=Width" width="Width" height="24" /></a> Or this BBCode [url=http://Username.jaiku.com/][img]http://jaikufans.net/_tools/forum-button/button.pl/Username.png?w=Width[/img][/url]

Simple

Example

Source code

Enter the following information:
Username:

Then add this code to your page where you want the badge to appear:
<script type="text/javascript" src="http://jaikufans.net/tools/button?username=RickMeasham"></script>

Customise

To further customise this badge, you can supply 'background', 'border' and/or 'width' parameters. Eg: username=RickMeasham&width=400px&border=1px+solid+pink

Customisable

Example

Source code

Enter the following information:
Username:

Then add this code to your page where you want the badge to appear:
<script type="text/javascript" src="http://jaikufans.net/tools/button?username=RickMeasham&layout=custom"></script>

Customise

This button returns a fully customisable piece of HTML code full of CSS classes. The example gadget uses CSS from this webpage. View source to see it. See below for an example of the HTML returned.

Bespoke

Example

Source code

Enter the following information:

Username:
Layout:
<b><USER.NICK>:</b> <PRESENCE>

Then add this code to your page where you want the badge to appear:
<script type="text/javascript" src="http://jaikufans.net/tools/button?username=RickMeasham&layout=%3Cb%3E%3CUSER.NICK%3E%3C%2Fb%3E%3A%20%3CPRESENCE%3E"></script>

Customise

Use this for absolute control. The 'layout' parameter contains the full template for your badge. Available parameters are: ID, TITLE, ICON, URL, CREATED_AT, CREATED_AT_RELATIVE, LOCATION, COMMENTS_LINK, USER.AVATAR, USER.FIRST_NAME, USER.LAST_NAME, USER.NICK and USER.URL

For even more control, you can use an IF tag to optionally leave out some parts when there is no information. See the <IF ICON> and <IF LOCATION> examples below.

The 'Customisable' button above is built using the following template

<div class="jaiku jaiku_badge">
  <div class="jaiku jaiku_badge_bottom">
    <div class="jaiku jaiku_badge_top">
      <div class="jaiku jaiku_badge_right"></div>
      <div class="jaiku jaiku_badge_topright"></div>
      <div class="jaiku jaiku_badge_content">
        <img src="<USER.AVATAR>" class="jaiku jaiku_avatar">
        <IF ICON><img src="<ICON>" class="jaiku jaiku_icon"></IF>         <h1 class="jaiku jaiku_username"><a href="<USER.URL>"><USER.NICK></a></h1>
        <p class="jaiku jaiku_presence"><PRESENCE></p>
        <p class="jaiku jaiku_meta">
          <span class="jaiku jaiku_relative"><CREATED_AT_RELATIVE></span>
          <IF LOCATION>::
            <span class="jaiku jaiku_location"><LOCATION></span>
          </IF>           ::           <span class="jaiku jaiku_comments"><COMMENTS_LINK></span>
        </p>
      </div>
    </div>
  </div>
</div>