Graphical Widgets for LJ and etc. (first look)
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)
- 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.
posted by Tim at 7:46 PM
89 Comments:
This is very cool. Thanks!
Would you be willing to post a basic example of a basic widget with one or two parameters? That would help for those of us who don't know which brackets to use, or where.
Brackets? the URL shouldn't need any brackets in it. Here's an example URL anyway:
http://www.librarything.com/gwidget/widget.php?view=AndrewB&font=verdana&tag=biography
That will probably not all show due to the narrow comments column Blogger use here, but it gives an idea.
How do I put the widget in my LiveJournal sidebar instead of in an entry? A tutorial for LJ and MySpace would be a big plus.
OK, I did some digging, and here's what I've figured out so far: you can only put this widget in the sidebar of a layout that supports the "Counter Code" feature. There's a list in the help system at http://community.livejournal.com/s2howto/47982.html.
If you use one of those options, customize your journal, then under Custom Options, Presentation tab, there should be an entry to add your counter's html.
I'd give you an example, but Blogger isn't letting me. Basically you'll create a standard img tag in html where the src= attribute is the url created as described in this blog entry, and wrap it in an "a href=" tag where the link is to your LibraryThing catalog.
Okay, now I get it.
Here's what I put into the Bio portion of my LJ profile page (using < and > instead of [ and ]):
[a href="http://www.librarything.com/catalog/
bibliofile"] [img src="http://www.librarything.
com/gwidget/widget.php? view=bibliofile&type=random
&num=5&top=Random books from my LibraryThing:&hbold=1&bc=E0FFFF&font=Arial"][/a]
(See the example over here: http://bibliofile.livejournal.com/profile)
Any way to have the background color be transparent?
Very nice. Now I just wish you could specify a list of tags instead of only a single tag...
I managed to get mine integrated into a sidebar that wasn't one of the ones listed as having "Counter Code". If you're willing to do some digging, there are 'hacks' for some of the other styles.
I found instructions on how to edit theme pages at:
http://community.livejournal.com/s2howto/25272.html
And instructions on how to add 'counter' code to my particular layout (Flexible Squares) at:
http://community.livejournal.com/s2howto/28368.html
The end result is that I've got my random selection of books listed in my sidebar in colors that coordinate perfectly with my journal and I couldn't be happier!
(For those who want to see, it's at: http://mscongeniality.livejournal.com/)
Yay! it works! Thank you, bibliofile.
I've just added it to my user info for now, because I am cheap and have a layout that seems to resist editing. But I'm happy.
When the GUI is ready, I may play with it a bit.
(kicking_k)
I've been tinkering with this and can't get it to work on myspace either... anyone come up with a way? Great idea otherwise :-\
I tried it and it worked well.
But, I have many Japanese books included in my library and those Japanese characters were not displayed.
I think I need another option like &language=ja &code=UTF-8.
Hey, I got one that I like. I wasn't able to put it on myspace, but I could put it on my libraything profile. It was a fun little html practice, but I'd love to see something that could be put on myspace and live journal soon.
I also have not been able to get this to work with MySpace. I can get it work as a single static image by 'uploading' the URL to my PhotoBucket.com album and then putting that in MySpace. Not really what I want. Although it does let me play-around with the settings to see what is possible.
My work-around for now is a simple link to my catalogue with whatever tag matches the link. For example on my MySpace page under books I have 'SciFi' listed as an interest. I went to my LibraryThing catalogue and entered the tag 'Science Fiction' I then copied the URL and pasted it into the hyperlink I built around 'SciFi' in MySpace. When a MySpace visitor clicks on the link it opens a new window with my catalogue listings for that tag.
I am also creating links for Fantasy, History and Mystery. I may also do this for my favorite authors.
This isn't the same thing as this widget; however, it may offer an option for some users.
ec
That's really lovely! Thanks!!
Here is it working on myspace... I hope publicizing this doesn't get it 'fixed'. Basically, you can't have .PHP? in the image tag on myspace. You also have to have a .JPG as the last characters. So I replaced .PHP with php? and added &bubba.jpg at the end.
.../widget.php?view=jjnashville&bubba.jpg"
check it out at www.myspace.com/techgrunt
Here it is working on myspace... I hope publicizing this doesn't get it 'fixed'. Basically, you can't have .PHP? in the image tag on myspace. You also have to have a .JPG as the last characters. So I replaced .PHP with php? and added &bubba.jpg at the end.
.../widget.php?view=jjnashville&bubba.jpg"
check it out at www.myspace.com/techgrunt
You are a genius. I love you.
I will make sure I correct that soon.
Tim,
I'm pretty handy when it comes to forcing an unwilling computer system to do my bidding. I make my living that way. My wife and I enjoy LibraryThing and this is the very least I can do, short of letting go of cash.
If you run across any other quirks or want a fair sounding board for I.S. services, just post a question on the myspace page. http://www.myspace.com/techgrunt
Also, that last ampersand should be an & before bubba.jpg. I didn't spot the typo and decided to not make a third entry.
I love you too,
John J (Tech Grunt)
Why are you so worried about Amazon? Couldn't you just tell us to use images uploaded by LT users only? All this tiptoeing around Amazon I see here is getting old... librarians don't answer to Amazon.
Sorry, it's great here, really.
It definately works on myspace, although I had to do it differently than the way Tech Grunt has it displaied... The & sign must be followed immedeatly by amp; ANYWHERE there is an & sign in the url. Here is what I have after blogger removes the amp; that I have listed after every instance of the & sign.
img border=0 width=175 src=
"http://www.librarything.com/
gwidget/widget.php?
width=175&hc=FF030D&
bc=160000&num=5&fsize=6&
hbold=1&font=palantino&
tc=C6E2FF&ac=3232CC&
view=knowmoore&bubba.jpg"
First, copy and paste this and add amp; after EVERY & sign.
Then, (and this is an apparent exception to the & with amp; rule), replace exactly the php? with what is between the quotes here, removing all instances of X "&X#112;&X#104;&X#112;&X#63".
Finally, change the view= attribute to your username, retaining the & with amp; followed by bubba.jpg .
Notice that the first part has spaces (img border=0 width=175 src). these are the only open spaces in the URL. All of this would need enclosed by brackets.< >
If you want to see the example, you need to ask me to add you as a friend because my myspace is private. Feel free to ask questions.
http://www.myspace.com/dfunkmiller
It's pretty cool. Didn't know there was a way to get this kind of dynamic content into myspace. Good luck!
I understand your sentiment, but Amazon has cover resources LT (and libraries) can only dream of. Libraries pay a lot for covers from places like Syndetics...
hi,
i really love library thing and the widget.unfortunately i use xanga as my blog and it didn't accept javascript nor frame..so sad
The fix was working great for awhile, but now it's appearing as a broken image on MySpace. Bummer.
Still seems to work fine in myspace for me.
This comment has been removed by the author.
re myspace not working again-
I haven't had time to debug yet, but I think something is being re-re-interpreted when posting an update to your profile. When I look at a google cached version of my page (pre-update) it works fine.
-JJ (techgrunt)
I'm getting a broken image too....and I don't know enough about anything to fix it.
Any help?
wordpress dowant allow it.. due to security reasons..
chk this
http://faq.wordpress.com/2007/03/04/my-code-has-gone-from-my-widget/
I got this to work fine on WordPress. Just follow the directions, embedding the base URL plus parameters in an img tag. Optional, as was mentioned above, is to then wrap that in an tag to link it to Library Thing. Here's an example I currently have on a hosted WordPress blog, with the tags broken so that Blogger will accept it:
a href="http://www.librarything.com/catalog.php?view=your_user_name" img src="http://www.librarything.com/gwidget/widget.php?view=your_user_name&type=random&tag=children&font=verdana&num=5&width=180&top=What do our children read%3F&fsize=8" />
I give up, I cna't get it to work on myspace
I think that these tools aren't liking that we are trying to pull in parameterized URLs.
If the URL was
http://www.librarything.com/gwidget/widget/type_random/hbold_1/width_400/hc_EB833A/x_0/view_creuzerm
instead of
http://www.librarything.com/gwidget/widget.php?type=random&hbold=1&width=400&hc=EB833A&x=0&view=creuzerm
they would allow the URL.
This can be done with mod_rewrite and some minor changes to what widget.php looks for in parameters. Just have it look for the parameter and the underscore, and use what follows as the value. Ignore anything that isn't recognized.
This is very cool, is there any way of selecting the range of books, ie the last 10 books I've read, rather than the last 10 I've added to LT?
Has there been any further work on getting this to function on MySpace? The last workarounds aren't working anymore.
Tim... can you give us an update on your intentions concerning users who wish to incorporate ltheir librarything data with myspace? This is a pretty big deal... I've observed exponential growth of library realated myspace profiles over the past couple months. Just saying it might be worth figuring out.
I know we've drilled this MYSPACE question into the ground, but I came up with a solution I'm satisfied with. Something most of us have dismissed- but with a twist.
Put a librarything button in your myspace "books" container, then link it to a googlepages page you set up with the widget of your choice. If you have trouble with the javascript in your googlepage, just google "javascript googlepages" find a very simple solution Google seems to endorse.
http://davidthelibrarian.googlepages.com/home
Additionally, if you want the music on your myspace page to keep playing while your books display, simply replace exactly the last " of the url to which you are linking with exactly what follows the single space at the end of this sentence. " target="_blank"
To me it's a little better than just slapping a naked link directly to LT.
In case you're interested this works in both the sidebars and the personal profile sections of http://moblog.co.uk. I had to alter the width for the sidebar though.
What's the html for "yellow"? Where can I find a list of colours?
Here's a link to a color wheel http://www.allprofitallfree.com/color-wheel2.html
I was tired of trying to figure out the widget thing. I made this thing on my myspace (I modeled it after another code I had) to show others my catalog as well as to 'advertise' for LibraryThing. Let me know what you think and if you want me to post the code for you I can. www.myspace.com/infinity_inthe_palm
maddie:
Checked your myspace, not sure what you were referring to.
I've also tried screwing around with the URL and tricking myspace into keeping the &s and #112s and all with no luck. The widget sure would look nice in my books section =-( It seems like a really cool toy, but I have no where else to show it off.
To solve the problem of only being able to list one tag, I've just added a "{Blog}" tag to the books in my library that I want to display on my blog. The tag portion of mine now looks like "&tag={Blog}". So far this seems to work fine.
This comment has been removed by the author.
Thanks for posting you myspace solution, David. After spending way too much time creating and link my googlepage, I found that myspace replaced my link after I saved my changes. Did you find a workaround for that?
Marrissa,
That solution still works for me... Check out my page if you want and email me if you want more help. myspace.com/dfunkmiller
This comment has been removed by a blog administrator.
Hmm...it's now letting the button link to my actual profile, but the little "bugger" is still converting my google page to a MS link and linking back to itself. Oh well. The widget is still cool.
I've been able to get this to work on my myspace page, you can see it in the books section.
I'll happily send the code to anyone who wants it.
I changed the color to match my personal page.
myspace.com/saradevil
sarahdevil,
Thanks for posting that you had it working! I copied the code off of your page and it's working like a charm for me! :0)
-Justin
I'd love to put a LibraryThing widget on my cre8buzz page. Any hints?
SaraDevil:
Wonderful job! I snagged your code as well; hope you don't mind! Just changed the profile name and removed the color tags and it worked. Thanks.
Happy to share the code. However if you are "stealing" it and adding it to your page drop me a myspace note or add me as your friend, or think kindly of me. That would rock.
You could even like, I don't know, link to me as a the supreme goddess of lbthing coding. Alright, that might be a bit much. A bit.
Has anyone figured out how to display LibraryThing on Facebook? I would very much like to add it! :)
There is an lbthing facebook application. Just search the applications for library thing and you can find the facebook interface. It works beautiful but doesn't have the fun graphics that the javascript one does for blogger. It's similar to the LJ or Myspace widget.
I've got the widget working on my Wordpress blog. Thank you tech wizards for helping us Wordpressers out.
GOOD Stuff! .... Someone please help me with adding it to my WP Blog!
a href="http://www.librarything.com/catalog.php?view=username"
img src="http://www.librarything.com/gwidget/widget.php?view=username&type=random&font=verdana&num=5&tag=perpetual&width=180&top=Books I seem Perpetually to be Reading&fsize=8"
Try that code, only with your user name and your tag title.
One more wordpress note--be sure to close the anchor with the /a tag after you've put the rest of the code in there. If you don't, it's not unlike crossing the streams in Ghostbusters.
really easy way to add to LJ:
Go to the "Text" part of "Customize Journal Style. put your widget img tag into the "Journal Info Blurb" box, and it'll be in the sidebar right below your use pic.
Myspace, however, replaces it with .. every time.
SraDevil, you rock! Your solution is the only one so far that has worked on MySpace. Thanks
I'm the man. Or well, rather I'm the woman with too much time on her hands. Feel free to drop me a myspace friend request.
Cheers.
I was really excited about adding this widget to my Wordpress blog!
But as you can see from my website (http://www.knottyyarn.com/blog/?page_id=956), it isn't actually showing any of the books. All that it says is "nothing found".
Am I doing something wrong with the tags within LibraryThing? I'm pretty confident that the code is correct.
Thank you!
Hey. The correct form is tag=recent. You had it as tag=perpetual, but you didn't have anything tagged "perpetual," from what I can see.
http://www.librarything.com/gwidget/widget.php?view=alaskadanielle&type=recent&font=verdana&num=5&tag=recent&width=180&top=Currently%20Reading&fsize=9
Let me know if you have any other questions.
Best,
Tim
Thank you, Tim, that definitely did the trick! I appreciate your help.
This comment has been removed by the author.
I saw the "random books from my library" widget on one of my friends' blogs and thought that was a really cool idea. So it was so disappointing to realize later--after entering half of the books in my library--that Wordpress does not allow javascript in its widgets!!!
Thanks, though, for getting around this through the "graphical widget"! I was able to integrate it in the sidebar of my Wordpress blog, using the colors of the style sheet. Check it out at:
http://stickslip.wordpress.com/
The "image" looks pixelated, though, i.e. if you compare it to the other text. Why is this so? Is there a way to improve the "resolution"?
Also, it would be nice if we can eventually display the covers of our books. It took painstaking effort to match the covers to what I actually own.
Great service!
Ted
Awesome-sauce. I had a little trouble installing it for WP, but realized in the end that I wasn't closing my html properly. Oops...
Looks great now, although it's a shame they don't allow javascript. Kudos for finding us another way!
I'm having issues adding this code:
a href="http://www.librarything.com/catalog.php?view=username"
img src="http://www.librarything.com/gwidget/widget.php?view=username&type=random&font=verdana&num=5&tag=perpetual&width=180&top=Books I seem Perpetually to be Reading&fsize=8"
into my WP blog widget. I added username to it and closed it but it still isn't working. Please help the blind and stupid me!
I just signed in today and really appreciate. I added the 'widget' on my wordpress.com blog (http://raydacteur.wordpress.com , see Livres de chevet for those who can read french) but I really miss a trus widget with the covers ...
I hope this will be available for us WP.com users
Oh, great! Definitely going to try this on LiveJournal sometime soon. Only has the project been abandoned, is this the final product? I'd really like the easier-on-the-eye version for LJ users too. With pictures!
I have been using your java widget for a few days and was utilising a tag in order to choose which books to show. It seems that today the java widget no longer shows any content if you specify tags - even on your create widget page, the code is churned out but the sample is empty. I tried changing tags etc.. and it is definitely the tags which is faulty. For now I have just removed the books I had begun putting in my library and only included the two recently read books that I want to show on my blog :(
Any chance this could be fixed up I'm looking forward to adding to my library and getting stuck in!
I'm trying to put this in to a Plone page which was not letting me add the ordinary widgets when editing in the HTML view in the 'WYSIWYG' editor. It is *sort of* working now only it is showing really small (as in the whole thing is marginally larger than the body text of the site). My html knowledge is limited (the 'muck with it and see what happens' variety) and whilst I have tried changing various parameters of the widget, these are not affecting the overall size of the widget as it appears on the page. Any ideas? Plone does use CSS, could something in the CSS be stopping these from showing correctly? Any ideas?
Since you're doing this server-side in PHP anyway, how about a version that outputs HTML text rather than a PNG image? It seems to me that would be easier, and lower bandwidth, and accessible to non-graphical browsers (e.g. Lynx, or browsers for the blind). And I could copy-and-paste the text.
This is great. Thanks!
I appreaciate all your work on this; and all the follow-up comments.
I was able to post a nice two-column table (Books I've Read Recently / Books I Plan to Read) to my Ning network page using this code (using < and > instead of [ and ]}:
[table width="100%" border="1"][tr][td][img src="http://www.librarything.com/gwidget/widget.php?view=almdennis&type=recent&tag=read&num=5&hbold=1&tbold=1&top=Books%20I've%20Read%20Recently"/][/td][td][img border="1" src="http://www.librarything.com/gwidget/widget.php?view=almdennis&type=recent&tag=booklist&num=5&hbold=1&tbold=1&top=Books%20I%20Plan%20To%20Read"/][/td][/tr][/table]
saradevil: i too "borrowed" your code for myspace...you ROCK!!
I know this is old and may be abandoned as a project, but is there any particular reason the image map can't be used to link back to Amazon for the covers? Or does LJ's HTML cleaner strip that out?
That's not a bad idea. Of course, it couldn't link directly to Amazon, since it's static. But it could link to LT with a URL that said, basically, go to Amazon for the current top-second-from-left-book. Cover sizes are a problem, though.
Anyway, 'll think about it.
Does this work on wordpress.com blogs?
Is there a way to post the LT widget on a myspace page?
Rene, yes.
Can anyone help me get the widget into my Blogspot page? I have no tech skills at all and I fail every time I try to do it myself.
Very nice! And how about some interaction with LinkeIn?
IMHO it would be a nice personal addition to my professional profile.
(BTW : someone already created a LinkedIn group)
Nice widget! I've got it up on my LJ now (http://trinalin.livejournal.com). My only wish is that I could make the font smaller. (I changed fsize to all sorts of numbers smaller than 9, but the font size never changed.)
Love this widget for Wordpress. One question though: is there a way to make the background transparent so that it flows well with my theme? I've tried entering bc=transparent to no avail. Thanks for any tips!
Okay, so this isn't working on MySpace, and I may have a partial explanation.
This is what I entered in the 'Books' field: note - '<>' replaced with '[ ]'
[a href="http://www.librarything.com/catalog/sighanne"][img src="http://www.librarything.com/gwidget/widget.php?
&view=sighanne&
type=random&
fsize=10&
hbold=1"] [/a]
I was trying to do it really simple, as a test. The link worked perfectly, but my books didn't show up, I think Tim's did. So I went back and looked at what I entered, and found that MySpace had not only added the detour to their anti-phishing page (expected), but had also ERASED my parameters. This is what replaced my entry:
[a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmxpYnJhcnl0aGluZy5jb20vY2F0YWxvZy9zaWdoYW5uZQ=="][img src="http://www.librarything.com/gwidget/widget.php" /] [/a]
Anyone got a solution?
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.
Have you tried using the "Fill the space" width? I've had a lot of luck with that one.
the code for WordPress go into the CSS editor? If not then where else?
Thanks Tim and thanks to bibliofile for the example. I got it up and running on wordpress.
Very usefull! I'd like to used it on last.fm. 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!
What if I just want to display books in my "Currently reading" collection?
This isn't working on my Wordpress.com blog. The code is being stripped from the widget just like the java version. Help!
(using actual brackets for below code.)
[a href="http://www.librarything.com/catalog.php?view=TravisLambert&collection=7&shelf=list" target="_blank"][img src="http://www.librarything.com/gwidget/widget.php?view=TravisLambert&collection=7&width=150&num=4&hbold=1&tbold=1&top="What I'm Reading"][/a]
Post a Comment
<< Home