We’ve finally added a bit o’ javascript that you can include on your website for your collection.
You can see it in action here, actually, on the right side of this blog’s home page. I put that up there, as a demonstration.
To get this same kinda dealybopper on YOUR webpage, you just need to add:
<div id='librarious'> <script type='text/javascript' src='http://lib.rario.us/media/sxtxixtxcxh/js'></script> <a href='http://lib.rario.us' title='lib.rario.us - social media cataloging'><img src='http://lib.rario.us/image/librarious_badge_85.gif' border='0' /></a> </div>
(of course you’ll substitute my user name for yours.)
The results are enclosed in div tags assigned specific classnames. The following is the CSS I have pasted above my script:
<style type='text/css'>
/* this is just a basic css sheet, feel free to hack away at it! */
#librarious{width: 150px;padding: 10px;}
.librarious_item{margin-bottom: 10px;padding-bottom: 10px;width:130px;overflow:auto;}
.librarious_title{margin-bottom: 10px;font-weight: bold;}
.librarious_cover{float: left;padding-right: 10px;padding-bottom: 10px;}
.librarious_review{margin-left: 60px;padding-bottom: 10px;}
.librarious_rating{margin-left: 60px;padding-bottom: 10px;font-size: .75em;}
.librarious_tags{margin-left: 60px;padding-bottom: 10px;font-size: .75em;}
.librarious_noReview{color:#808080;font-size: .75em;}
</style>
I’m sure people can get really creative with the CSS. Feel free to send me if you have something interesting, I plan on having a little CSS gallery/repository (a little zen garden, if you will).
The resulting markup for each item ideally looks like:
<div class='librarious_item'> <div class='librarious_title'> <a href='http://lib.rario.us/media/sxtxixtxcxh/7375'>True Names: And the Opening of the Cyberspace Frontier - Vernor Vinge</a> </div> <div class='librarious_cover'> <a href='http://lib.rario.us/media/sxtxixtxcxh/7375' title='True Names: And the Opening of the Cyberspace Frontier - Vernor Vinge'> <img src='http://images.amazon.com/images/P/0312862075.01._SX50_.jpg' width='50' alt='True Names: And the Opening of the Cyberspace Frontier' border='0' /></a> </div> <div class='librarious_review'> an anthology of essays discussing topics touched on vernor vinge's short story </div> <div class='librarious_rating'> 3/5 stars </div> <div class='librarious_tags'> <a href='http://lib.rario.us/media/sxtxixtxcxh/tag/scifi'>scifi</a> </div> </div>
Just like the urls for the rss feeds, you can change media to books, dvds, music, or games to restrict results to those types. Also, you can add /tag/[keywords here] to restrict the results to those specific tags.
For example:
<script type='text/javascript' src='http://lib.rario.us/books/sxtxixtxcxh/tag/webdesign+reference/js'></script>
I could use that code above to show the last 10 books, that I’ve tagged with webdesign AND reference.
There are a few advanced options as well.
- hideTitle=true
- hideCover=true
- hideReview=true
- hideRating=true
- hideTags=true
- reviewLength=20
- limit=3
The “reviewLength” can be set to show any number of characters (setting it to 0 will have the same effect as hideReview=true) and “limit” will show the number of items to show from 0 (… Why would you choose that?) to 10 (the default).
The 8th rule of fight club is if this is your first night at fight club, you have to fight. Also, if this is your first time ever using a “query string” here’s how it goes: you can string those advanced options by first adding a question mark after the “js” in that script separating them with a & like so:
<script type='text/javascript' src='http://lib.rario.us/books/sxtxixtxcxh/js?hideTitle=true&hideReview=true'></script>
That’s hiding the title and the reviews.
<script type='text/javascript' src='http://lib.rario.us/dvds/sxtxixtxcxh/tag/scifi+anime/js?hideTitle=true&reviewLength=50&hideRating=true&hideTags=true&limit=3'></script>
That will give me a listing of 3 of my most recent dvds that I’ve tagged with scifi AND anime, hide the titles, and only show the first 50 characters of my review for each item.
Enjoy!