buttons: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 16: Line 16:


- Don Crowley
- Don Crowley
* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png


=== [[hcalendar|hCalendar]] ===
=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:  
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:  


Line 42: Line 54:
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]


=== [[rel-license]] ===
=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png


=== [[rel-nofollow]] ===
=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png


=== [[rel-tag]] ===
=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png


=== [[vote-links|VoteLinks]] ===
=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png


=== [http://gmpg.org/xfn/ XFN] ===
=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png


=== [http://gmpg.org/xmdp/ XMDP] ===
=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png


=== [[xoxo|XOXO]] ===
=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png


== Buttons for draft formats ==
== Buttons for draft formats ==
Line 81: Line 101:
=== [[hresume|hResume]] ===
=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png


=== [[hreview|hReview]] ===
=== [[hreview|hReview]] ===

Revision as of 00:25, 4 November 2006

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.

microformats.png

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

- Don Crowley

  • microformat.png
  • microformat_enabled.png
  • emf_green.png
  • mfe_green.png
  • mwmf_green.png
  • smf_green.png
  • emf_white.png
  • mfe_white.png
  • mwmf_white.png
  • smf_white.png

hCalendar

››› 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

rel-license

  • license.png
  • microformat_rellicense.png

rel-nofollow

  • nofollow.png
  • microformat_relnofollow.png

rel-tag

  • rel-tag.png
  • tag.png
  • microformat_reltag.png

VoteLinks

  • votelinks.png
  • microformat_votelinks.png

XFN

  • xfn.png
  • microformat_xfn.png

XMDP

  • xmdp.png
  • microformat_xmdp.png

XOXO

  • xoxo.png
  • microformat_xoxo.png

Buttons for draft formats

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

adr

  • adr.png

geo

  • geo.png

hAtom

  • hatom.png

hResume

  • hresume.png
  • microformat_hresume.png

hReview

  • hreview.png

rel-directory

  • directory.png

rel-enclosure

  • enclosure.png

rel-home

  • rel-home.png
  • home.png

rel-payment

  • payment.png

Robots Exclusion

  • robots.png

xFolk

  • xfolk.png

Make your own buttons

Style 1

Example: hcard.png

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: hcal.png

  1. Get the font Silkscreen
  2. Install ImageMagick
  3. Get the blank icon (blank.png)
  4. Type:
convert blank.png 
 -fill white 
 -font Silkscreen 
 -pointsize 8 
 +antialias  
 -draw "text 28,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.

logo.gif

microformats

Requests

  • Logos for all microformats
  • When someone has time, these should be repeated on the page for each respective format.
Retrieved from "http://microformats.org/wiki/index.php?title=buttons&oldid=13615"