Adding/Customizing Wikipedia search in your website

Prabhat Gupta

This post will guide you on how to add wikipedia search on your web site and furthermore how to customize the search output, depending on need for your website. Also all the intra links available inside wikipedia content would be made to open inside your site only rather going to their actual WikiPedia page.

Pre-requisite:

Refer wikipedia API documentation: http://en.wikipedia.org/w/api.php

Basic knowledge about HTML, Javascript/JQuery

Getting Started:

Sample 1:

Click here for Demo. This contains normal input text box and would display  wiki content on the same page after some customization in output. Source code for the same can be found here.

  • Include google JQuery script as well as some of the wikipedia stylesheets so as to have the content rendered elegantly. Please refer <head>content in source code(link mentioned above) for complete list.
  • Create a form to accept the search input
<form accept-charset=”UTF-8″ action=”” id=”inputform” method=”post”>
<label for=”name”>Name</label>
<input id=”name” name=”name” type=”text”>
<input name=”commit” type=”submit” value=”Search”>
</form>
  • Create div tags to hold wiki content returned after search
<div id=”container”>
<div id=”wiki_container”></div>
<div id=”wiki_attribution” style=”text-align:left; border-top:1px solid #c73734; font-size:13px;”></div>
</div>
  • Call JavaScript function using JQuery when above form is submitted. Below logic would prevent the whole page to load again but just the page section getting changed (by now you would have understood that I’m talking about AJAX)
$(‘#inputform’).submit(function(){
var name = $(‘#name’).attr(“value”);
getAreaMetaInfo_Wikipedia(name);
return false;
});
  • Implement the JavaScript function being called above.
    • Get content about the object being searched from Wikipedia
function getAreaMetaInfo_Wikipedia(page_id) {
title = page_id;
$.ajax({
url: ‘http://en.wikipedia.org/w/api.php’,
data: {
action:’parse’,
prop:’text’,
page:title,
format:’json’
},
dataType:’jsonp’,
success: function(data) {
wikipage = $(“<div>”+data.parse.text[‘*’]+”</div>”);
wikipage.find(‘sup’).remove();
$(“#wiki_container”).html(wikipage);
$(‘#wiki_attribution’).html(“Description above from the Wikipedia article <a href=’http://en.wikipedia.org/wiki/” +title+”‘ target=’wikipedia’>”+title.replace(/_/g,’ ‘)+
“</a>, licensed under <a href=’http://creativecommons.org/licenses/by-sa/3.0/’ target=’wikipedia’>CC-BY-SA</a>, full list of contributors <a href=’http://en.wikipedia.org/w/index.php?title=”+title+”&action=history’ target=’wikipedia’>here</a>. Community Pages are not affiliated with, or endorsed by, anyone associated with the topic.”);
}
});
}

Above post would get content from WikiPedia for object being searched and would also append attribution to wikipedia for the content (as per wikipedia licence)

    • To have all links inside wiki content to open inside your website only rather having them go to their actual wikipedia page. Include below code inside success funtion above
wikipage.find(‘a’).each(function() {
var href = $(this).attr(‘href’);
/* put a check for wikipedia link. do not touch rest of the links*/
$(this).attr(‘href’, “javascript:getAreaMetaInfo_Wikipedia(‘”+ href.substring(href.lastIndexOf(‘/’)+1) +”‘)”)
});
    • Customize wiki content to display on your side like mentioned below
$(“#References”).hide();
$(“div.reflist”).hide();  // hide reference list on wiki
$(‘table.infobox’).hide(); //hide info boxes on wiki
$(‘table.toc’).hide(); // hide table of content
$(‘table.navbox’).hide(); // hide navigation box
$(‘span.editsection’).hide(); // hide edit link
Likewise, you can hide/remove other content of wiki page using respective Jquery functions.

Sample 2:

Click here for Demo. This would display wiki summary about the link text when clicked upon, in an inline popup appearing on the same page. Also all the internal links inside that would open in the same popup box rather going to respective wiki page. Source code for the same can be found here.

Concept remains the same as before. Difference here is that we would only be displaying first para of wiki content inside popup which was done using wikipage = $(“<div>”+data.parse.text[‘*’]+”<div>”).children(‘p:first’).

3 thoughts on “Adding/Customizing Wikipedia search in your website”

  1. Hi,nice script(i refear to this http://www.golygon.com/2011/01/addingcustomizing-wikipedia-search-in-your-website/).
    Now the language is set to english, so if you wanna search something composed from two words(explample new york) you have result and all it’s ok.If you wanna search some italian word (leopardi) you will redirect to giacomo leopardi.But if you directly try to search giacomo leopardi you don’t have result…

    I think there are problem(expecially if you set italian language “it.wikipe….”).
    Do you know why?
    thx

    Reply

  2. Nice Article, I have one question,

    If I need some specific details, not whole html page, Can I do that? How can I do that?

    Please guide me

    Reply

  3. Hello
    I’m trying to combine both examples, that is, when i look up for something in a search form I only get the summary for the first article…. do you think this is possible? i don’t really understand what i’m doing.
    Please help anyone

    Reply

Comments