Sunday, December 24th, 2006

Graphical Widgets for LJ and etc. (first look)

As promised, for Chris Santa has come up with a new, “graphical” widget–a widget usable in LiveJournal, MySpace and other environments that won’t permit JavaScript or frames. Unfortunately, Tim Santa didn’t finish the user-interface, with all its handy drop-downs, color selectors and so forth. So, for now, it’s up to you to customize the right URL. If this seems complicated, you might want to wait for the graphical interface. For the rest, here are your directions.

The graphical widget is an image with a highly-specific URL. You can build your URL piece by piece, checking the image in your browser. When you’ve got what you want, you will need to insert the image into your blog template. Usually, you will do this by adding <img src=”XXX” >, with XXX being the URL of the image, where appropriate.

The base URL is http://www.librarything.com/gwidget/widget.php?

To this base URL, you add parameters. You can add from one (just the user name) to fifteen, to control everything from what books are shown the colors they appear in. Each parameter must be separated by an & sign.

view= your user name (default timspalding, but you don’t want that)

type= what books to display; two options are “recent” and “random”

tag= which tag to display (default: none)

width= image width, in pixels (default: 200)

fsize= font size, in points (default: 9)

font= name of font to use (default: verdana). At present you can use “arial,” “arialuni” (if you have a lot of “special characters”), teletype, palatino, verdana

num= number of books to display (default: 10)

hbold=1 use bold text for the header (default: 0 off)

tbold=1 use bold text for book titles (default: 0 off)

top= text to display at the top of the widget (default: “Random Books From My Library” or “Random Books From My Library Tagged XYZ)

ac= author text color (default: 000000 – black)

bc= background color (default: ffffff – white)

tc= title text color (default: 0000ff – blue)

hc= header text color (default: 000000 – black)

x= number of pixels from top and bottom to pad the text (default: 5 pixels)

y= number of pixels from the left and right edges to pad the text (default: 5 pixels)

Notes:

The widget doesn’t link anywhere. We suggest you link it to your profile or catalog (see your profile for the URL). You will need to an an HTML link around the image.

The widget can’t have cover images. To display cover images, Amazon requires links to their service. A graphical widget can’t do that.

That’s what I have for now. Feel free to post questions, examples you’re proud of and so forth.

16 Comments:

WordPress style sheets interfere with the php submission so lots of the parameters don't successfully populate.

The need to use this in WordPress would be eliminated if we could customize the widget's width. Right now it's just a nebulous "small/medium/large" and the smallest one is still too wide for my sidebar.

+1 for someone who’d like a ‘collection’ parameter that I can use to point to (only?) my “Currently reading” collection. I tried emulating Travis Lambert’s example of April 15/10 above (by passing ‘7’ for ‘collection’), but that didn’t work for my collection list.

I’ve gotten the above code to work correctly, even if it’s not the prettiest.

If WordPress is stripping your code, just make sure to add it last via the HTML tab and don’t jump back to the Visual tab (if you do, then you’ll have to go back to HTML and re-paste your code over again before saving).

Karen, I haven’t found a way (so far) to list from a category, but I found a cheat to list the recent reads: I usually tag ebooks I’m reading in my Calibre as “nr” (“now reading”) to easily find them, and I found that the same method works on LT. I went to my “Currently Reading” collection, clicked the little lightning bolt to mass-edit, and added the tag “nr” to the books I’m now reading.

Once I finish a book, I’ll remove the tag “nr” from it and move it from “Currently reading” to “Recent Reads”. That should solve the problem…

This is the result that methods nets me: [widget example]. (You’re free to gank my settings, if you want. Just replace my username with yours.)