buttons

Microformats Buttons

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - Tantek

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - Ruben

Buttons

Microformat Banner

I've made a banner for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

I already have a "I use " on my blog: http://doncrowley.blogspot.com/

- Don Crowley

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

hCalendar

• 
• 
• CSS-powered button from Midgard CMS - Event calendar:

››› hCalendar

Code (white space added for readability):

<span class="badge" 
      style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
      border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
      text-align: center;">
 <span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; 
       margin-right: 0.1em;">
 &#8250;&#8250;&#8250;
 </span> 
 hCalendar
</span>

hCard

• (mirror: )
• 
• 
• CSS-powered button, as evidenced at microformat badges @ re-run

rel-license

• 
• 

rel-nofollow

• 
• 

rel-tag

• 
• 
• 

VoteLinks

• 
• 

XFN

• 
• 

XMDP

• 
• 

XOXO

• 
• 

Buttons for draft formats

These may be subject to change if the names of the formats change when they are released.

adr

• 

geo

• 

hAtom

• 
• 

hResume

• 
• 

hReview

• 

rel-directory

• 

rel-enclosure

• 

rel-home

• 
• 

rel-payment

• 

Robots Exclusion

• 

xFolk

• 

Make your own buttons

Style 1

Example:

Use the Kalsey Button Maker with the following settings:

• Outer border: #666666
• Inner border: #ffffff
• Bar position: 25 pixels from the left
• Left box text: >>>
• Left box background: #000000
• Left box text colour: #ffffff
• Left box text start: 7 pixels from the left
• Right box text: (The name of the microformat goes here)
• Right box background: #31757b
• Right box text colour: #ffffff
• Right box text start: 3 pixels from the bar

Style 2

Example:

1. Get the font Silkscreen
2. Install ImageMagick
3. Get the blank icon ()
4. Type:

convert blank.png 
 -fill white 
 -font Silkscreen 
 -pointsize 8 
 +antialias  
 -draw "text 28,10 'button label'" 
 output.png

Style 3

Example:

1. Get the font Silkscreen
2. Install ImageMagick
3. Get the blank icon ()
4. Type:

convert button2-blank.png 
 -fill white 
 -font Silkscreen 
 -pointsize 8 
 +antialias  
 -draw "text 20,10 'button label'" 
 output.png

Microformats Logos

Rohit is a very poor CSS hacker, but gave it his best shot. He also rendered it at 72 and 18 points.

microformats

The above logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):

Wiki logos

For use on this wiki.

• new! - {{NewMarker}}
• Success! - {{SuccessMarker}}
• updated! - {{UpdateMarker}}

Requests

• Logos for all microformats

• When someone has time, these should be repeated on the page for each respective format.