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>
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">
— 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.
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>
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.
@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>
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.
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.
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?
Well I’m using it. =]
Can’t wait to see how you made this!
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>
Awesome
I’m using it
Excellent content here and a nice writing style too – keep up the great work!
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.
Nice job. I am currently using it on my site!
Some code for an “api” like that whould be more than welkcome!
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.
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.
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
lol never mind. Slow computer it seems. It works perfectly now! Yay
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.
Thank you for your great job. I need it, perhaps ;)
Ralph