![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
![[site community profile]](https://www.dreamwidth.org/img/comm_staff.png){kind=small}
LibraryThing widgets
After I added a LibraryThing widget to my own DW blog, I got some requests to share the technique in this group. Finally, I'm getting around to writing something up.
The first widget developed at LibraryThing for posting on blogs was written in JavaScript. But Dreamwidth, like its parent site LiveJournal, doesn't allow for inclusion of such script-based widgets on its journals. (If this is no longer a limitation, I hope someone in the know will correct me.) Sooo, a clever person over at LT developed an image-based widget that lives just fine on LJ-style sites.
The LT blog post describing how to use the widget: Graphical Widgets for LJ and etc..
While detailed, the above blog post might still be confusing for folks not very familiar with HTML or especially argument strings on URLs. So I'll provide a detailed breakdown of the options I used to produce my own widget (seen at the bottom of the left-hand sidebar of my journal).
My code, tucked into the "Custom Text" module:
<div class="ltwidget"> <img src="http://www.librarything.com/gwidget/widget.php ?view=Suncat&type=random&width=205 &top=Some books of mine at LibraryThing &bc=d6e5b2&ac=1c1d19&tc=3c6022&hc=1c1d19 &hbold=1&tbold=1&tag=knitting" /> </div>
Please note about the above code, and this is very important to making it work, everything inside the img element should be all together on one long line. I broke it up simply so it could be read. Now I'll step through each piece of this. I haven't used all the features provided, but this should give you useful clues.
<div class="ltwidget">
I've applied a CSS class to the containing div so that I can meld the widget into my overall journal design.
http://www.librarything.com/gwidget/widget.php
The widget as it appears on your journal here at DW is actually an image being generated on the LT server, and fetched on command. Read the above LT blog posting for more information.
?
The "?" marks the start of the parameters that you're feeding to the widget generator, to get back a customized image. Notice that all the following text consists of pairs of text items separated by "&"s. Each pair is of form parameter=value.
no subject
Aaaand, since I foolishly hit the "post" button prematurely, here's the rest of the details.
Name your LibraryThing account--I'm Suncat over there, too.
Every time my journal page is re-loaded, a random set of LT books is grabbed from my collections.
Width of the widget in pixels. Sized to fit into my particular journal design.
Top title for the widget.
Setting the colors of different aspects. Those values are hex color codes, but without the traditional prefixed "#". So, my background color is #d6e5b2, a light green. I've set colors for background (bc), author names (ac), titles (tc) and the widget header (hc).
Use boldface for the header and for book titles.
Only pull books with the given tag, as they're tagged in your catalog at LT.
No, you're not imagining it. I didn't use the num parameter for number of books to display, because I accepted the default of 10. But, you can set this too.
I think I've covered everything I've used. Hope you can now see how to set up your own LT widget.
no subject
So, what are hex color codes and how do I figure out which ones fit with my layout? Also, if I want it to pull from all my books, can I omit &tag=[whatever]? Or could I put more than one tag in, and how would I do that?
no subject
Easy one first, yes you can omit the &tag parameter so it will pull from your entire catalog. I don't think it will handle multiple tags. I also don't think this works using a Collection name, as the Collections feature at LT was developed some time after this style widget was created.
As for color codes, it's a little bit of overkill but try Color Scheme Designer. For any color you're looking at there, you should be able to see a hex code. Codes are given for any selected point on the color wheel, and the Color List shows them for the scheme that's on the right-hand side.
no subject
Oh yeah, what exactly are hex color codes?.
They're a compact way of specifying colors in R(ed)G(reen)B(lue), using hexadecimal numbers. Each color component gets two hex digits: #rrggbb.
When translated back to ordinary decimal, two digits of hex can range from 0 to 255. So you have the (0-255) range for each R, G and B component. That pretty well lets you describe a complete color gamut as displayable on current computers and monitors.
The hex notation is a bit more compact than the 0-255 notation. If you use CSS, for example, hex notation is used to specify the colors.
no subject
no subject
Okay. I used another tool to check the actual colors on your journal. That lovely red is #c90808. Your red component, c9 equals 201, which is quite high in the 0-255 range, and your green and blue components are almost zero. So, you get that nice intense red. In hex, white = #ffffff and black = #000000.
Maybe you could use white = ffffff for all the text colors and your red = c90808 for the background color, and put the widget on your sidebar?
no subject
no subject
In Customize Journal Style there should be a Text section. There, open up the "Module" tab. You should get a big open box where you can put anything you like. I believe that box will accept plain text or HTML, like the HTML that creates the LT widget.
Be warned, I think maybe that HTML is the "expected" contents of that box. So if you, say, wanted to add other plain text in addition to your LT widget, it's likely that the text will all run together unless you control it with some HTML structure and CSS styling. If you're not feeling up to tackling that, best save the Custom Text area for self-contained things like widgets.
no subject
no subject
All of this is also viewable within the CSS of your journal, I think it should be automatically displaying on the customise journal pages, but it's been a long time since I used a site scheme, so I'm not sure.
(and while I get cited occasionaly as someone to go to for stuff like this, the above explanation of what the hex codes actually are is the first I've actually known, I've just used them for years, translating them back to RGB colours just never mattered to me)
Tis a nifty trick. I wonder if I can get a barcode scanner for my phone, might get me using my account again...
no subject
no subject
no subject
no subject
no subject
no subject