Add Design Quotes to Your Site

Chris Coyier //

There is a much newer and nicer version of the Quotes on Design API now, check out the code over at the dedicated API page.

David Walsh helped me whip together an "api" for Quotes on Design. If you want to add a random design quote to your site, just add this snippet of code:

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

View Demo

This will insert a quote on your page, inside the "quote" div, wherever that is on your page. The final markup looks like this:

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

Of course it won't always be that quote and that author, it is randomly pulled from the Quotes on Design database. The wrapping div with an ID of "quote" is required so the script knows where to put the quote.

Feel free to share any cool integrations you guys come up with. Next week we'll talk about how it was made! If you have one you'd like to see get added, suggest it here.