The API v3.0

Straight Up

Just copy-and-paste code!

<blockquote id="qod-quote">
   ... loading ...
</blockquote>
<script src="http://quotesondesign.com/api/3.0/api-3.0.js"
type="text/javascript" charset="utf-8"></script>

That is all you need to get a random quote showing up on your page! Since you will still need to style it, here is the final markup after the script has done its magic:

<blockquote id="qod-quote">
   <p class="qod-text">
      Keep it simple, stupid!
   </p>
   <p class="qod-author">
      <a href="http://quotesondesign.com/?p=194">
         &mdash; Old Saying
      </a>
   </p>
</blockquote>

API Parameters

The API supports additional parameters being passed to the script through the query string:

id: The id of the element where the quote should appear. Default: qod-quote. Pass multiple id’s separated by a comma to place the quotes in multiple areas of the page.
formatter: The name of a custom function used to turn the quote data into HTML. The custom function will be passed one variable and expects the return of the function to be a string of HTML.

Look at this example:

<script src="api-3.0.js?id=header-quote,footer-quote
&formatter=format_quote" type="text/javascript"
charset="utf-8"> </script>

When this script runs, the quote will be inserted into two areas of the page, header-quote, footer-quote. Additionally, a custom formatter function will be called to format the JSON data into HTML.
Here is an example formatter function:

<script type="text/javascript" charset="utf-8">
   function format_quote(data){
      return "<a href='"data.permalink"'>"data.quote
"<span class='author'>"data.author"</span></a>";
   }
</script>

The JSON data element passed to this function has the following fields for each quote:

id: A numeric integer identifying this quote.
author: The name of the author of the quote.
permalink: The full URL to the quote on the quotesondesign.com website.
quote: The full text of the quote, without quotation marks.

Advanced Uses

You can get just the JSON for the quote from here:

http://quotesondesign.com/api/3.0/api-3.0.json

This is useful for languages like PHP, Ruby, Python, etc. You can get the data, convert from JSON to a native object, and you are on your way.
If you are using JavaScript you must supply an additional parameter called callback and give it the name of a function to pass the quote JSON to after it is loaded. See above for greater detail on that JSON object. The finished path would look like this:

http://quotesondesign.com/api/3.0/api-3.0.json
?callback=my_function

Widgets

Check out the Widgets page to see additional uses of this API.

Troubleshooting

Occasionally the quotes will contain UTF-8 characters. If you see funny symbols instead of an open or closing quote for instance, you should check that your HTML page is set to use the utf-8 character set.

Quotes on Design