In today's post I present a new Facebook App: Globe Explorer. I will show some printscreens and techniques I used in the current design. As usual, I started simple to expand with new features in the future.

New here? You might want to subscribe to my blog by email or RSS.

featured image

The idea of the app is to bring together basic info of almost all countries in the world and show attractive photos. See my last post how I got the basic data.

On top of that I built a login with Facebook to allow people to add recommendations and "special things" of the country, to add more personal value to the data. Again, a lot more can be done like user profiles, allow users to upload photos, location checkins, user following/mentions/likes, etc., but this is a start.

In the rest of the post, I'll show you some techniques I used developing this site.

The design

This is the homepage::

homepage logged out

With more navigation options when logged in with Facebook:

homepage logged in

When browsing to a country, the image gallery changes to display photos of that country:

ecuador image gallery

Images show a bigger version when hovering over them with your mouse. This is done with the jQuery plugin Image Preview:

images overalay
images overlay
image overlay

Basic specs from DB, again see my preparation work how I got the data:

specs

A typical country page, for example Turkey:

turkey country page

... or what about Brazil?

brazil country page

Technologies behind it

HTML5 boilerplate

This is indeed, as their page says, "a rock-solid default for HTML5 awesome": performance, HTML5 ready, cross-browser support, CSS skeleton, etc. I did put in a reset css to wipe out more unwanted default browser styles.

h1 and h2 fonts

The header fonts are "Philosopher" which you can get from Google Web Fonts and is easy to add:

   <link href='http://fonts.googleapis.com/css?family=Philosopher:400,700' rel='stylesheet' type='text/css'>

Clean URLs

Each country is accessible under baseurl/two-digits, for example:

Nicaragua:

clean urls

Brazil:

clean urls

This is much better than index.php?country=ad. Put this in .htaccess (if you use Apache webserver) to support clean URLs (see also this post)

   RewriteEngine On
   RewriteRule  ^[a-z0-9]+.(php|js|css|html)$ - [NC,L]
   RewriteRule ^([a-zA-Z_0-9-.]+)$ index.php?country=$1

Autocomplete

One of the things I like most and one of my favorite jQuery plugins (another recent example of its power). You start typing in the search box and the corresponding country(ies) with flag(s) show up, press enter when your country is selected and it redirects to the page of the country. Not that hard to code; the jQuery:

   $("#searchCountry").autocomplete( "searchCountry.php");
   ..
   // http://forum.jquery.com/topic/jquery-autocomplete-submit-form-on-result
   $("#searchCountry").result(function (event, data, formatted) {
   	$("#searchCountry").val('');
   	
   	$("#feedback").html('<img class="loadingImg" src="img/ajax-loader.gif" id="loading" />');
   	
   	var country = formatted.replace(/(<.+?>)|&nbsp;/gi, '');
   	
   	if(country != 'No country found!') {	
   		$.post("getCleanUrl.php",
   			{ search: country},	function(data){
   				location.href= data;
   			}
   		);
   	} else {
   		$("#loading").hide();
   	}
   });

... and the php of "searchCountry.php":

   <?php
   include("conn.php");
   include("functions.php");
   
   $_GET = sanitize($_GET);
   
   $q = strtolower($_GET["q"]);
   if (!$q) return;
   
   $q = "SELECT iso2,country FROM countries where LOWER(country) like '%$q%' AND longitude NOT LIKE ''";
   $r = $link->query($q);
    
   if(mysqli_num_rows($r)) {
   	while($row = $r ->fetch_object()){ 
   		$iso2 = strtolower($row->iso2);
   		echo '<img src="img/flags/'.$iso2.'.gif">&nbsp;'; 
   		echo '<span class="countryCode" id="' . $iso2 . '">'.ucfirst(strtolower($row->country)) . '</span>';
   		echo "n";
   	}
   	
   } else {
   	echo 'No country found!';
   }
   $link->close();
   ?>

... and the php of "getCleanUrl.php":

   <?php
   include("conn.php");
   include("functions.php");
   $_POST = sanitize($_POST);
   $search = strtoupper(trim($_POST['search']));
  
   $q = "SELECT iso2 FROM countries WHERE country LIKE '$search' limit 1"; 
   $r = $link->query($q); 
  
   while($row = $r ->fetch_object()){
  	 echo strtolower($row->iso2);
   }
   ?>

To see this in action:

jquery autocomplete

Facebook authorization

Get v.3.1.1 from github , usually I copy the with_js_sdk.php which includes both PHP and JS SDKs and get all html out and make it an fb.php include file. Put in you app ID + secret, and you can start to use authorized stuff when $user gets defined (login). I used the login-button from FB with the extra permission to post to wall "publish_stream" (only if user checks the box when commenting, see later on):

   <div style="display:inline; " class="fb-login-button" data-show-faces="false" data-width="400" data-max-rows="1" scope="publish_stream"></div>

Get social content

On each country page a user can add recommendations:

recommend country

... or like "special things" (dropdown with Expressions, Food, Cities, Traditions, Movies, Music, etc.):

special things

When you change the category (object) in "special things", the title changes, compare the previous printscreen with the next two:

special things country
special things country

When comments add up, I use a vertical scroll bar (jScrollPane), which gives an elegant style while I can leave the "display comment" sections a 100px height:

example of jScrollPane

Post to Facebook

You can post your comment to Facebook by activating the checkbox under the input field. Opt-in is better I think, because opt-out in FB Apps is usually seen as spammy. Here you see this in action:

activate post to FB

And how this looks on your FB wall:

result on FB wall

Facebook JS SDK functions:

You can invite friends and let users share content to their walls with just this code (having included the FB JS SDK above):

   function Invite () {
     FB.ui({ method: 'apprequests',
       message: 'Check out this App if you like travelling and exploring countries ...'
     });
   }
  
   function WriteToWall(urlName, urlLink, urlDescr, urlLogo){
   	 FB.ui({ 
  		method: 'feed', 
      	name: urlName,
  		link: urlLink,
  		description: urlDescr,
         picture: urlLogo
  	});
   }
  
   .. which you call from your HTML
   
   ..
   <?php if ($user): ?>
  	Hi, <?php echo fbImg($user) . ' '. $user_profile['first_name']; ?>, 
  		<a href="<?php echo $logoutUrl; ?>">Logout</a>
  		&nbsp;|&nbsp;<a href="#" onclick="WriteToWall('<?php  echo $title.'',''.$countryUrl.'',''.$metaDescription.'',''.$ogImage; ?>')" 
  			title="Send to your wall">Share this<?php if($_GET) echo ' country'?></a>			
  		&nbsp;|&nbsp;<a href="#" onclick="Invite()" title="Tell your friends about this app">Invite friends</a>
  
   <?php else:
   ..

Invite your friends to use the app:

invite friends

Share a certain (country) page to your wall. A random image of the country will be shown (and under the hood set as meta..og:image, the tag Facebook 'listens' to in order to display the image in the post, more info here):

share to wall

User registration

In the fb.php include I check if the user was here before and if not, I register him/her:

   ..
   if ($user) {
    try {
      // Proceed knowing you have a logged in user who's authenticated.
      $user_profile = $facebook->api('/me');  // <= this is from the FB PHP SDK
  
  	// register user 
  	if(!userExists($user) && $user_profile) {
  		userRegister($user_profile);
  	}

Footer

In the footer a carousel of flags per continent. You can check this post how to make such a carousel effect with jQuery (and some CSS).

flag carousel

To conclude

This is it for now. Let me know if you have questions and/or if you have any feedback/ suggestions what could be cool to add to this app ...


Bob Belderbos

I build useful apps and share my learning About me