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

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)


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

Labels: 1


  1. Mark Winston says:

    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.

  2. librarythingluke says:

    Have you tried using the "Fill the space" width? I've had a lot of luck with that one.

  3. Angela says:

    the code for WordPress go into the CSS editor? If not then where else?

  4. teadeum says:

    Thanks Tim and thanks to bibliofile for the example. I got it up and running on wordpress.

  5. spantiru says:

    Very usefull! I'd like to used it on Is there any way to select a collection?

    I'd like to display the books that I'm currently reading, and I'd like to select the corresponding collection only.

    Thanks for this option! Really nice!

  6. Travis Lambert says:

    What if I just want to display books in my "Currently reading" collection?

  7. Travis Lambert says:

    This isn't working on my blog. The code is being stripped from the widget just like the java version. Help!

    (using actual brackets for below code.)

    [a href="; target="_blank"][img src=""What I'm Reading"][/a]

  8. Dena says:

    How can I get the LibraryThing widget to:
    1. Save my settings?
    2. Work on wordpress?

  9. Ricardo Reis says:


    the problem is the ” in the top= bit, wordpress eats them away 🙁

    now, I wished I could just clean the header title to nil.

  10. Viktor Haag says:

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

  11. Stephen says:

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

  12. kriti says:

    Could Helvetica be added as a font option? Thanks!

  13. I managed to get the image working on my blog. I even managed to change the title, but I could not show the books I’m currently reading only. Is this possible? How is it done?

    Any help would be appreciated please.

  14. snow says:

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

  15. urdu poetry says:

    can we use with facebook and twitter? The look and feel of the widgets can be hard-coded in the toolkit very useful i wanna also use my blog but i wanna know more about it

  16. Gypsy says:

    For those trying to get this to work on (not .org) blogs: Put the code in a text widget, not an image widget; the image one will eat the code.

Leave a Reply