.

When developing the Perpetro Group website, we wanted to exhibit some of our skills without needing to go into great depth about what each one was. Since the information is already freely available and universally accepted on the world’s largest encyclopedia, Wikipedia, we decided to pull in the information, live, from their site and credit them whenever someone wanted a short description of our services. The Perpetro Group website is dual-language, English and Russian, which made it even more appealing given that Wikipedia is available in many languages.

An example of how Wikipedia data is pulled in with My PerPOS Live Source code, with all links intact

Here’s how we did it.

First, we decided on a method and a platform. We decided to store titles and links to the Wikipedia pages within a database table, and use JQuery Facebox to reveal a pop-up when someone clicked a link from our list of services. We also had to consider that some pages may not be available in Wikipedia, and that maybe only one of the two languages were present with relevant information. In this case, we would instruct the page to display alternative content which we wrote and/or translated and put into the database ourselves. We did this by adding a delimiter – wp|| – to the skillsDesc field within the database. It is also very important to name the title exactly as the page you are targeting in Wikipedia, including capitalization.

Essentially, our code will access the page via http, collect the content, strip menus and images, locate the first opening paragraph (which is almost always an introduction to the topic in Wikipedia and therefore serves our purpose), collect the links within it, and send it all back for display with our Facebox modal window with a nice little loading/open/close animation. If the content originated from Wikipedia (and not our own database), the Wikipedia logo is applied and the foundation is credited accordingly for copyright reasons. A URL link mentioning Wikipedia is also appended to the My PerPOS Live Source link at the bottom of the modal, just for clarity.

Here’s how we structure it all on a page (keeping in mind that this was serving two languages). Note the creation of a Javascript array which is created from the PHP $skillsarray for use on the JQuery component.

A visual example of the database structure

Example of the database structure for My PerPOS Live Source

Pull in the Content from MySQL

 PHP | 
 copy code |
?
 

// Get skills
mysql_select_db(YOUR_DB, YOUR_CONN);
mysql_query("SET CHARACTER SET utf8"); // Make sure data is encoded properly when pulled in
$skillsquery = "SELECT skillTitle, skillDesc FROM skills ORDER BY skillTitle ASC";
$skillsresult = mysql_query($skillsquery) or die(mysql_error());
$i=0; while($skillsrow = mysql_fetch_array($skillsresult, MYSQL_ASSOC)){
$skillsarray[$i]['title'] = $skillsrow['skillTitle'];
$skillsarray[$i]['desc'] = $skillsrow['skillDesc'];
$i++;
}
mysql_free_result($skillsresult);

The Head Content

 HTML | 
 copy code |
?
 

<link rel="stylesheet" href="css/facebox/facebox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/facebox.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	function urldecode(str){ return decodeURIComponent((str + '').replace(/\+/g, '%20')); }
	// JS array of skills
	var skarray = new Array();
	<? $i=0; while($i < sizeof($skillsarray)){ ?>
		skarray[<? echo $i; ?>] = "<? echo urlencode($skillsarray[$i]['desc']); ?>";
		<? $i++; ?>
	<? } ?>

	// Get WikiClicks
	$('.skill').click(function(){
		$('#wiki_container').empty();
		var ska = $(this).attr('id').split("_"); 
		var pwiki = decodeURIComponent(skarray[ska[1]]).split("||");
		var wikiheader = '<img style="padding-top:20px" src="images/logo_perpetro_group_black.png" width="100" height="24" /><br />';
		wikiheader+='<h3 style="color:#000;">'+$(this).attr('title')+'</h3><hr>';
		if(pwiki[0]=="wp"){
			var wikifooter = '<hr><p><span style="float:right; padding-left:15px;"><a href="http://www.wikipedia.org" target="_blank" title="Wikipedia"><img src="images/logo_wikipedia.png" width="20" height="19" /></a></span><span style="float:right"><a href="myperpos.php" title="My PerPOS&trade; Advanced Web Architecture from Perpetro Group" target="_blank"><img src="images/logo_myperpos.png" width="60" height="19" /></a></span><strong><a href="myperpos.php" title="My PerPOS&trade; Advanced Web Architecture from Perpetro Group" target="_blank">My PerPOS&trade;</a> Live Source</strong>: <a href="http://en.wikipedia.org/wiki/'+pwiki[1]+'" title="Wikipedia" target="wikipedia">Wikipedia</a></p>';
		} else {
			var wikifooter = '<hr><p><span style="float:right"><a href="myperpos.php" title="My PerPOS&trade; Advanced Web Architecture from Perpetro Group" target="_blank"><img src="images/logo_myperpos.png" width="60" height="19" /></a></span><strong><a href="myperpos.php" title="My PerPOS&trade; Advanced Web Architecture from Perpetro Group" target="_blank">My PerPOS&trade;</a> Live Source</strong></p>';
		}
		$("#wiki_container").html(wikiheader+'<div id="wikiloading" style="height:40px; text-align:center"><img src="images/loading.gif" width="100" height="10" /></div><div id="wikicontent" style="margin:none; padding:none; display:none"></div>'+wikifooter);
		jQuery.facebox({ div: '#wiki_container' }); 
		if(pwiki[0]=="wp"){
			var strdecoded=urldecode(pwiki[1]);
			$.ajax({
				url: 'http://en.wikipedia.org/w/api.php',
				data: { action:'parse', prop:'text', page: strdecoded, format:'json' },
				dataType:'jsonp',
				success: function(data) {
					wikipage = $("<div>"+data.parse.text['*']+"<div>").children('p:first');
					if(!wikipage){ alert("error"); }
					wikipage.find('sup').remove();
					wikipage.find('a').each(function() {
						$(this).attr('href', 'http://en.wikipedia.org'+$(this).attr('href')).attr('target','wikipedia');
					});
					$("#facebox #wikicontent").html(wikipage);
					$("#facebox #wikiloading").slideUp('slow', function(){
						$("#facebox #wikicontent").slideDown('slow');
					});
				}
			});
		} else {
			$("#facebox #wikicontent").html('<p>'+urldecode(skarray[ska[1]])+'</p>');
			$("#facebox #wikiloading").slideUp('slow', function(){
				$("#facebox #wikicontent").slideDown('slow');
			});
		}
 	});
});

The HTML Content

 PHP | 
 copy code |
?
 

// Get it all ready
echo '<div id="index_livesource" style="margin:-3px 0 5px 0">';
echo '<h3>Key features of our 360° (Full-Service) Creative & Web Solutions include:</h3>';
// Show skills
$i=0; while($i<sizeof($skillsarray)){
	echo '<span style="float:left; margin:0 5px 5px 0; padding:4px; background:url(images/bg_text.png)"><a title="'.$skillsarray[$i]['title'].'" class="skill" id="sk_'.$i.'" href="#" onclick="javascript:return false">'.$skillsarray[$i]['title'].'</a></span>';
	$i++;
}
echo '<div style="clear:both"></div>';
echo '<div id="wiki_container" style="display:none;" rel="facebox"></div>';
echo '</div>';

Download all the files used in this project
My PerPOS Live Source for Wikipedia
Please note that you need to set up the MySQL connection and table manually.