Embed Wikipedia summaries in articles
A small, light-weight Wikipedia summary/preview widget that lets you include the first bit of a Wikipedia article in popups in your blog post, article, etc.
Links to Wikipedia are found everywhere in articles and blog posts, and I use them often myself when that extra level of information might be of interest to the reader but falls outside the scope of the actual article. However, sometimes a short blurb introducing the topic would be enough and would also keep the reader from disappearing into the time stealing rabbit hole that we all know Wikipedia can be.
Edit: The widget is now using the MediaWiki API rather than the AppJet gateway. Read update here.
One solution is to popup a small box with a summary from the Wikipedia article when the mouse moves over the word. There is one service that already provides something like this, the NBC owned Snap.com. Their SnapShot boxes display everything from website screenshots to Flickr images to Wikipedia summaries. That's cool, but I found it a bit too bulky just to display a few paragraphs of text and, as far I know, you don't get much in the way of customizing the appearance.
So I decided to create my own simple Wikipedia box. Fortunately most of Wikipedia is pretty neat and the first section usually contains a decent summary of what the article is about. So we can simply pull out all the text between the two first headings. Some articles have info boxes on the right that are ignored, as to only get pure text.
All this is done by a small AppJet JSON-P application that takes care of retrieving the article and locating the relevant portion of the text. The text is then processed a bit (ie. links are made to open in new windows and point to the absolute URL, reference ids are removed, etc) before it's all put in a nice little JSON package and returned to the client:
The 5000 most recently accessed articles are cached (there's a 50MB storage limit on each AppJet app and I'd rather err on the safe side.) making sure that delivery is speedy and that it doesn't hit Wikipedia's servers more than necessary.
The text is received by a bit of JavaScript which pops up a box containing the article summary and a small link to Wikipedia and the original article (and the GFDL license notice).
The box itself is rather simple, consisting of 4 simple elements. I know this is 2008 and there are no rounded corners or whatever the kids are using these days, but I wanted to keep it basic. The included style sheet should be self-explanatory and easy to change for your liking, although you might have to dive into the JS if you want something radically changed.
So, to use it, simply include the CSS and JS and start putting Wikipedia links in your text like this:
Example output (hover the mouse over the underlined words):
As you can see from this sample code, you simply make links to the relevant Wikipedia articles and the script should locate them automatically and enable the summary box.
Now, I'm not entirely sure whether or not this breaks the terms of use of Wikipedia. I do know they do not allow dynamically generated mirrors, but I'm not really sure in what category something like this would fall since the articles are dynamically downloaded (if not in cache) even if it isn't really a mirror as such. They used to have a crawl-delay of 1 page per second in their robots.txt, which is obeyed by the AppJet application. If you happen to get hit by that limitation (unlikely, I think) you'll be served a notice of that instead of the article text.
Another thing is that I'm not sure what kind of bandwidth quotas, if any, you might run into with AppJet. If every blog in the world started hitting the same AppJet application, I'm sure it would cause trouble, but that's unlikely to happen. Either way, it's very easy to simply clone the AppJet app if you want to use it on your own site and be safe.
I've tested the script in FF3, Opera 9.5, IE7, Safari 3.1 and Chrome and everything looks fine there.
Finally, download the files here: sumbox.js [4.8 KB] and sumbox.css [1.0 KB]
Links to Wikipedia are found everywhere in articles and blog posts, and I use them often myself when that extra level of information might be of interest to the reader but falls outside the scope of the actual article. However, sometimes a short blurb introducing the topic would be enough and would also keep the reader from disappearing into the time stealing rabbit hole that we all know Wikipedia can be.
Edit: The widget is now using the MediaWiki API rather than the AppJet gateway. Read update here.
One solution is to popup a small box with a summary from the Wikipedia article when the mouse moves over the word. There is one service that already provides something like this, the NBC owned Snap.com. Their SnapShot boxes display everything from website screenshots to Flickr images to Wikipedia summaries. That's cool, but I found it a bit too bulky just to display a few paragraphs of text and, as far I know, you don't get much in the way of customizing the appearance.
So I decided to create my own simple Wikipedia box. Fortunately most of Wikipedia is pretty neat and the first section usually contains a decent summary of what the article is about. So we can simply pull out all the text between the two first headings. Some articles have info boxes on the right that are ignored, as to only get pure text.
All this is done by a small AppJet JSON-P application that takes care of retrieving the article and locating the relevant portion of the text. The text is then processed a bit (ie. links are made to open in new windows and point to the absolute URL, reference ids are removed, etc) before it's all put in a nice little JSON package and returned to the client:
The 5000 most recently accessed articles are cached (there's a 50MB storage limit on each AppJet app and I'd rather err on the safe side.) making sure that delivery is speedy and that it doesn't hit Wikipedia's servers more than necessary.
The text is received by a bit of JavaScript which pops up a box containing the article summary and a small link to Wikipedia and the original article (and the GFDL license notice).
The box itself is rather simple, consisting of 4 simple elements. I know this is 2008 and there are no rounded corners or whatever the kids are using these days, but I wanted to keep it basic. The included style sheet should be self-explanatory and easy to change for your liking, although you might have to dive into the JS if you want something radically changed.
So, to use it, simply include the CSS and JS and start putting Wikipedia links in your text like this:
Example output (hover the mouse over the underlined words):
The sky above the port was the color of television, tuned to a dead channel.
"It's not like I'm using," Case heard someone say, as he shouldered his way through the crowd around the door of the Chat. "It's like my body's developed this massive drug deficiency." It was a Sprawl voice and a Sprawl joke. The Chatsubo was a bar for professional expatriates; you could drink there for a week and never hear two words in Japanese.
- Neuromancer by William Gibson
"It's not like I'm using," Case heard someone say, as he shouldered his way through the crowd around the door of the Chat. "It's like my body's developed this massive drug deficiency." It was a Sprawl voice and a Sprawl joke. The Chatsubo was a bar for professional expatriates; you could drink there for a week and never hear two words in Japanese.
- Neuromancer by William Gibson
As you can see from this sample code, you simply make links to the relevant Wikipedia articles and the script should locate them automatically and enable the summary box.
Now, I'm not entirely sure whether or not this breaks the terms of use of Wikipedia. I do know they do not allow dynamically generated mirrors, but I'm not really sure in what category something like this would fall since the articles are dynamically downloaded (if not in cache) even if it isn't really a mirror as such. They used to have a crawl-delay of 1 page per second in their robots.txt, which is obeyed by the AppJet application. If you happen to get hit by that limitation (unlikely, I think) you'll be served a notice of that instead of the article text.
Another thing is that I'm not sure what kind of bandwidth quotas, if any, you might run into with AppJet. If every blog in the world started hitting the same AppJet application, I'm sure it would cause trouble, but that's unlikely to happen. Either way, it's very easy to simply clone the AppJet app if you want to use it on your own site and be safe.
I've tested the script in FF3, Opera 9.5, IE7, Safari 3.1 and Chrome and everything looks fine there.
Finally, download the files here: sumbox.js [4.8 KB] and sumbox.css [1.0 KB]
That's really really nice. One of those interesting and cool additions to a website as to aiding your users.
October 8, 2008 at 1:53 PM AnonymousWouldn't it be easier/more elegant to use the MediaWiki API?
October 8, 2008 at 2:41 PM Jacob Seidelinhttp://en.wikipedia.org/w/api.php
Hmm. I did look for an official API but for some reason I missed it. Very odd. I'll definitely have a look a that. Thanks.
October 9, 2008 at 1:01 AM Jacob SeidelinLooks like it can only give you the original Wiki formatted text, not HTML. Not sure I want to down that road.
October 9, 2008 at 1:21 AM AnonymousAfter some playing, I found:
October 10, 2008 at 7:31 AM maikelkrausehttp://en.wikipedia.org/w/api.php?action=parse&page=Linux
You can append "&format=json" to the address and get the json object back. It appears to be the html encoded content area.
Hope that helps.
There's bug in Firefox where, if you hover over a link in the popup, the tooltip makes you lose focus.
October 10, 2008 at 11:23 AM Jacob Seidelin@Brock: Thanks! Missed that one (not the best api docs..) I'll take a look at it again.
October 11, 2008 at 3:24 AM maikelkrause@maikelkrause: I'm unable to reproduce the problem you're describing - or I'm misunderstanding you.
Might just be me? In Firefox 3.0.3 on Mac with the default theme, when I hover over a link in a Wikipedia popup, then move the mouse after the tooltip appears, the popup disappears. It seems the tooltip covers the popup making the latter think the mouse is no longer hovering over it.
October 11, 2008 at 5:20 AM Jacob Seidelin@maikelkrause: Could be a Mac thing, I guess. I don't have one of those around so I've only tested it on Windows. :/
October 12, 2008 at 3:46 AM AnonymousThis is definitely a good idea. Other thoughts & ideas:
October 16, 2008 at 2:50 AM Jacob SeidelinThe box shouldn't appear at once. It's frustrating if you're reading the text and inadvertently trigger the definition. Maybe a 200ms timer? (well I guess you could start loading the content immediately, but wait to display it)
Wouldn't it be nice to have a cursor:help on the links?
Also, it'd be cool if you could have a list in the code indicating which links should be enhanced and where the content should come from (so you could easily add boxes for sources like wiktionary, wikinews or any other source with an API).
Anyway, good job!
@MasterScrat: Thanks for the comments, much appreciated.
October 17, 2008 at 12:48 AM AnonymousThe instant displaying of the box has been bothering me as well, so I'll definitely do something about that. The same goes for when the mouse leaves the box, a small delay might be appropriate there as well.
Do you mean the cursor on the links in the box or the link that triggers the box? Either way, I'd rather leave the look of both (including the cursor) up to the user to style with CSS..
Good idea about expanding the list of possible sources, that part should be easy when I start getting the data through the API intead of scraping.
Thanks!
how i can use it in a wordpress or joomla installation?
September 20, 2009 at 6:11 AM pixarwould be nice, but it doesn't work in FF 9 ( nothing happens if hovering the links )
March 10, 2012 at 2:36 AM