rel-payment: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(fixed typo)
Line 9: Line 9:


== Abstract ==
== Abstract ==
RelPayment is a microformat for making exchanges of support (be it financial or otherwise) possible. By adding rel=payment" to a hyperlink a page indicates that the destination of that hyperlink provides a way to show or give support for the current page. For example to give financial support to the owner of the current page.
RelPayment is a microformat for making exchanges of support (be it financial or otherwise) possible. By adding rel="payment" to a hyperlink a page indicates that the destination of that hyperlink provides a way to show or give support for the current page. For example to give financial support to the owner of the current page.


One of the goals with this microformat is to give content aggregators such as RSS readers a way to extract these support links and giv them special attention (such as displaying a standard button along with the content).
One of the goals with this microformat is to give content aggregators such as RSS readers a way to extract these support links and giv them special attention (such as displaying a standard button along with the content).

Revision as of 18:32, 15 September 2005

Authors

Andreas Haugstrup Pedersen

Joshua Kinberg

Jay Dedman

Peter Van Dijk

Abstract

RelPayment is a microformat for making exchanges of support (be it financial or otherwise) possible. By adding rel="payment" to a hyperlink a page indicates that the destination of that hyperlink provides a way to show or give support for the current page. For example to give financial support to the owner of the current page.

One of the goals with this microformat is to give content aggregators such as RSS readers a way to extract these support links and giv them special attention (such as displaying a standard button along with the content).

RelPayment

RelPayment is meant as a general way to facilitate acts of support, and thus this specification makes no assumptions on the type of support.

A page may contain any number of hyperlinks marked with rel="payment". This allows authors to give readers more than one possible way to show support (a DropCash link, a PayPal link, a link to a page with an address to mail a check and so on). It also allows authors to add payment links that only relate to a certain section of a page. E.g. a book review website may have several book reviews on one page with each review having their own Amazon Affiliate link marked with rel="payment". Aggregators should implement support for multiple payment hyperlinks.

Authors should use the "title" attribute to provide a human readable description of the type of support pointed to by the hyperlink. Aggregators may use the contents of the "title" attribute to provide additional information about the support link to their users. E.g. <a href="[url]" rel="payment" title="Donate Money Via PayPal">.

If the hyperlink contains an image (e.g. <a href="[url] rel="payment"><img src="[url]" alt="Support Badge" /></a>) aggregators may display that image instead of the aggregator's standard link.

Visible Metadata

Links marked with rel="payment" are meant to be visible on the page, and because of that the <a> element is encouraged over the <link> element. This gives readers the easiest access to show support and it discourages link fraud. Authors should not use empty hyperlinks such as <a href="[url]" rel="payment" /> and parsers may ignore empty links.

XMDP profile

<dl class="profile">
 <dt id="rel">rel</dt>
 <dd><p>
   <a rel="help" href="http://www.w3.org/TR/html401/struct/links.html#adef-rel">
     HTML4 definition of the 'rel' attribute.</a>  
   Here is an additional value.</p>
  <dl>
   <dt id="payment">payment</dt>
   <dd>Indicates that the referred resource provides a way to show support for the referring page.</dd>
  </dl>
 </dd>
</dl>

Prior Art

Anil Dash's proposal, 2002

Anil Dash's proposal in 2002 to use XHTML <link> element to define payment URLs:

payment LINK tags
There are already a lot of defined (if not quite standardized) possible values for the LINK element in XHTML. We're using them for RSS Auto-Discovery and, of course, for stylesheets already. But what about something like:
<link rel="appendix" type="text/html" title="payment" href="URL of Wishlist or Paypal Page" />
A standardized way of linking to the page where you pay for your patronage of a site. Granted, calling the payment page an "Apppendix" of the site you're visiting is fudging things a bit. Maybe there's a more elegant way?

Although this is similar to rel="payment" as we are proposing, it is not as flexible as it can only be used to define one payment location for an entire page (likely a tip jar or wishlist page). Perhaps rel="payment" could be used within the link element as well as within standard anchor tags?

Examples from the wild

Amazon Associates

Product with image

This is the code generated by Amazon for a single product endorsement with photo. Everything is generated automatically. The form can be replaced with another regular HTML link.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <body>
  <table cellSpacing=0 cellPadding=1 width=120 height=240 bgColor=#000000 border=0>
   <tr>
     <td>
       <table cellSpacing=0 cellPadding=0 width=118 height=238 align=center bgColor=#ffffff border=0>
         <tr>
           <td>
             <table width=100%  height=238 border=0 cellSpacing=0 cellPadding=0>
               <tr align=center>
                 <td>
                   <a href=http://www.amazon.com/exec/obidos/ASIN/B00022AH6I/solitudedk-20?creative=327641&camp=14573&link_code=as1 target=_blank><img src=http://rcm-images.amazon.com/images/P/B00022AH6I.01._SCTZZZZZZZ_.jpg vspace=3 border=0></a>
                 </td>
               </tr>
               <tr>
                 <td vAlign=center height=15%><center>
                   <a href=http://www.amazon.com/exec/obidos/ASIN/B00022AH6I/solitudedk-20?creative=327641&camp=14573&link_code=as1 target=_blank><font face=Arial color=#0000ff size=1>Kodak EasyShare DX7440 4MP Digital C...</font></a>
                 </td>
               </tr>
               <tr height=15%>
                 <td>
                   <center>
                   <font face=Arial color=#000000 size=-2>Kodak Digital </font>
                   </center>
                 </td>
               </tr>
               <tr>
                <td height=15%>
                   <center><a href="http://www.amazon.com/exec/obidos/redirect?tag=solitudedk-20&camp=14573&creative=327641&link_code=am1&path=tg/stores/offering/list/-/B00022AH6I/all/ASIN/B00022AH6I&camp=14573&creative=327641" target=_blank><font face=Arial color=#0000ff size=1>Best Price <font face=Arial color=#990000 size=1>$157.70</font></font></a></center>
                 </td>
               </tr>
               <tr height=15%>
                 <td>
                   <center><font face=Arial color=#000000 size=1>or Buy New <font color=#990000></font></font></center>
                 </td>
               </tr>
               <tr>
                 <td height=15%><center>
                   <table>
                   <form method="GET" action="http://www.amazon.com/gp/aws/cart/add.html" target="_blank">
                   <tr>
                   <td>
                   <input type="hidden" name="SubscriptionId" value="D68HUNXKLHS4J" />
                   <input type="hidden" name="AssociateTag" value="solitudedk-20" />
                   <input type="hidden" name="ASIN.1" value="B00022AH6I" />
                   <input type="hidden" name="Quantity.1" value="1" />
                   <input type="hidden" name="linkCode" value="as1" />
                   <input type="image"  name="submit.add" value="Buy from Amazon.com" border="0" alt="Buy from Amazon.com" src="http://rcm-images.amazon.com/images/G/01/buttons/buy-from-tan.gif" />
                   </center>
                   </td>
                   </tr>
                   </form>
                   </table>
                 </center></td>
               </tr>
               <tr>
                 <td height=5% align=absbottom>
                   <center><a href=http://rcm.amazon.com/e/cm/privacy-policy.html?o=1 target=_blank>
               <font face=Arial color=#a1a1a1 size=1>Privacy Information</font></a></center>
                 </td>
               </tr>
             </table>
           </td>
         </tr>
       </table>
     </td>
   </tr>
 </table>
   </body>
  </html> 

Text links

This is the code for a text link to a product category. The visible link text is chosen by the user.

<a href="http://www.amazon.com/exec/obidos/redirect?link_code=ur2&camp=1789&
  tag=solitudedk-20&creative=9325&path=tg/browse/-/1">
  Get Photography Books at Amazon
</a>
<img src="http://www.assoc-amazon.com/e/ir?t=solitudedk-20&l=ur2&o=1" 
  width="1" height="1" border="0" alt="" style="border:none !important; 
  margin:0px !important;" />

Banners

The following is the code generated by Amazon for generic Amazone banners. Note use of imagemap to create "privacy policy link".

<html>
  <body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
    <table width=468 height=60 border=0 cellspacing=0 cellpadding=0>
      <tr valign=middle align=center>
        <td>
          <MAP NAME='boxmap'><AREA SHAPE='RECT' COORDS='379, 50, 469, 61' 
            HREF=http://rcm.amazon.com/e/cm/privacy-policy.html?o=1 target=_top>
            <AREA COORDS='0,0,10000,10000' HREF=http://www.amazon.com/exec/obidos/redirect?
              tag=solitudedk-20&creative=333489&camp=15553&link_code=ez&path=
              /tg/browse/-/171280 target=_top>
          </MAP>
          <img src=http://rcm-images.amazon.com/images/G/01/
            associates/2005/served-banners/us_banner_imag_468x60.gif 
            width='468' height='60' border='0' usemap='#boxmap'>
        </td>
      </tr>
    </table>
  </body>
</html> 

Search Boxes

Amazon offers search boxes:

<form action="http://www.amazon.com/exec/obidos/external-search">
<table class="normal" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background-color:#fff;">
      <table border="0" cellpadding="0" cellspacing="0" align="top" 
        height="90" width="120" style="border: 1px solid #000000 !important;">
        <tr>
          <td style="background-color:#fff;" height="20" valign="bottom" align="center">
            <span style="font-family: verdana,arial,helvetica,sans-serif; 
            font-size:10px !important; font-weight:bold !important;">Search Now:</span>
          </td>
          <td style="background-color:#fff;"> </td>
        </tr>
        <tr>
          <td style="background-color:#fff;" align="center" height="30" valign="top">
            <input type="text" name="keyword" size="10" value="" />
          </td>
          <td style="background-color:#fff;" height="20" valign="top" align="left">

            <input type="hidden" name="mode" value="blended" /> 
            <input type="hidden" name="tag" value="solitudedk-20" /> 
            <input type="image" border="0" value="Go" name="Submit" 
              src="http://g-images.amazon.com/images/G/01/associates/build-links/
              ap-search-go-btn.gif" alt="[ Go ]" align="absmiddle" /> 
          </td>
        </tr>
        <tr>
          <td colspan="2" style="background-color:#000;" height="40">
           <a href="http://www.amazon.com/exec/obidos/redirect-home/solitudedk-20">
            <img src="http://g-images.amazon.com/images/G/01/associates/build-links/
            searchbox-logo-126x32.gif" height="36" border="0" width="126" 
            alt="Amazon Logo" /></a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</form>

Practical examples of rel="payment"

Blog entry containing video interview with founders of a theater group. rel="payment" link points to the theater group's fundraising page where the reader is encourage to donate via PayPal.

Blog entry containing home video that uses music by a popular recording artist. rel="payment" link encourages reader to purchase the artist's CD at Amazon (could have used Amazon affilliate link as noted above).

Blog entry containing audio segment from an NPR interview. rel="payment" link encourages the reader to support NPR by purchasing something from the NPR Online Shop.