Grow your CSS skills. Land your dream job.

Add Design Quotes to Your Site

Published by 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="http://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.

Comments

  1. This looks really good although I would suggest to everyone that instead of a div tag to wrap the javascript, you should instead use the blockquote tag. It will then be semantically correct.

    <blockquote id="quote">
    <script type="text/javascript" src="http://quotesondesign.com/api/api.js"></script>
    </blockquote>

  2. I’d also suggest using something more unique for the id than “quote” to avoid possible collisions with an existing div. Perhaps you could simply use div id=”quotesondesign” as it will not likely exist in anyone’s markup.

  3. @Bob. Another good idea. That would then turn my code example into:

    <blockquote id="quotesondesign">
    <script type="text/javascript" src="http://quotesondesign.com/api/api.js"></script>
    </blockquote>

    • Permalink to comment#

      Then you should’ve also add the cite-attribute to the blockquote, making it even better for crawlers, screen readers etc!

      <blockquote id="quotesondesign" cite="author-link-here">
      <script type="text/javascript" src="http://quotesondesign.com/api/api.js"></script>
      </blockquote>

      That would also make it semantically better, since you’re giving citation link on the quote.

    • Permalink to comment#

      Since the quotes are generated by JavaScript you won’t even have to worry about crawlers, they won’t be able to see anything. Screen readers might have trouble with it too, although most of them are getting better at supporting JS.

  4. Permalink to comment#

    using the cite-attribute is another good idea but all of the quotes are filled dynamically and there for will be a new author for each quote. Is there a way to display the authors name and link using this script?

  5. Well I’m using it. =]

    Can’t wait to see how you made this!

  6. Permalink to comment#

    nice, is it possible to make it generate the code in the scripts parent element, regardless of ID so that it could be used multiple times on a page for example in a :

    <blockquote class="quotesondesign">
    <script type="text/javascript" src="http://quotesondesign.com/api/api.js"></script>
    </blockquote>

  7. Permalink to comment#

    Awesome
    I’m using it

  8. Excellent content here and a nice writing style too – keep up the great work!

  9. jack.feefofe
    Permalink to comment#

    Great idea, Chris! I’m excited to see your article explaining the workings of this, although I already have an idea of how you might have done it. I have experimented with back-end scripts dynamically creating JavaScript files. This was an “Ah ha!” moment for me in PHP / Javascript. I realized how useful it could be in creating APIs that read from a database.

  10. Nice job. I am currently using it on my site!

  11. Permalink to comment#

    Some code for an “api” like that whould be more than welkcome!

  12. Permalink to comment#

    Very cool idea. I already worked it into my site!

    Could you add a dash (—) before the author’s name? It might look nicer that way, especially if the quote and author are displayed on the same line.

  13. I found the quotesondesign site quite useful when I redesigned my site… I did find the API a bit too slow to use, but the quotes were quite helpful.

    I’ll also be interested in seeing how the API was created — I’ll check back when you post the article.

  14. I love this!

    But am I slow? I just cant get it to work? Do I need to do something different if I want to in-bed this into my front page? Nothing is displayed. :)

    Thanks

  15. Permalink to comment#

    Pretty sweet. I’d like to see a hybrid reddit/quote generator where users can submit quotes in different categories. The community votes them up or down and then the quote generator can be embedded the same way as this.

  16. Permalink to comment#

    Thank you for your great job. I need it, perhaps ;)

    Ralph

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".