19 March 2012

NOTE: The JSONP Web Service has since gone down.

In Part 1 we discussed the contest, what information you should be familiar with and that we would be improving the code that I submitted for entry. One of the things that through me for a loop is that LinkedIn requires you to have an API Key and for whoever is using your site to be logged in. While there may be a strong business case for it from a developer standpoint I ask myself “Why bother making an API Key if you are just going to make the user login in anyway?”.

The first thing I changed was to have the list of speakers display on the left and if the user is not logged in to display the LinkedIn login to the right. Once the user logs into LinkedIn a default message replaces the login and login message.

I followed this up by cleaning up the code. Renaming a few functions to make more sense and to improve the formatting some. This code is what I should have submitted if my sleep deprived brain had been able to function:) Still not a winner but much better. View the results and see the changes made. In Part 3 we will attempt to improve the search for the speakers on LinkedIn by adding search keywords.

index.html
<html>
 <head>
  <style>
   #container {
     background-color: Gray;
    width: 100%;
    display: block;
    float: left;
   }
   #informationContainer {
    background-color: Gray;
    width: 70%;
    display: block;
    padding: 1em;
    float: right;
    
   }

   #feedList {
     background-color: Green;
     float: left;
     width: 25%;
     max-width: 25%;
     min-width: 25%;
    } 
    #lineItem {
     background-color: #BBBBBB;
     width: 90%;
     float: left;
     clear: both;
    } 

    #mustLogin {
      display: none;
    } 


  </style>
  <script type="text/javascript" src="jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://platform.linkedin.com/in.js">
      api_key: ###get your own!###
      authorize: true
      onLoad: onLinkedLoad
    </script>
  <script type="text/javascript">
   var lloaded = false
   
   function onLinkedLoad() {
     initiatePage();    
   }
   
   function loginComplete() {
   	 $("#mustLogin").hide();   	
   	 showLoggedInMessage();
   }


   function showLoggedInMessage() {
     $("#informationContainer").append("<div>Click the links to the left to display information about the speaker</div>");
   }
   
   function initiatePage() {
     lloaded = true;
     //alert("lloaded=" + lloaded);
     var jsonUrl="http://winaspectreapi.appspot.com/api/sessions";
     callDataAJAX(jsonUrl);
   }

   
   
   function listNames(data) {
     for(i=0;i < data.length; i++) {
       names = data[i].author.split(" ");
       var output = '<div id="lineItem">Speaker:  <a href="#'' + names[0] + ''" onclick="getLinkedInfo('' + names[0] + '','' + names[names.length - 1] + ''); return false;">' + data[i].author + '</a><br/>';
       output = output +  'Title:  ' + data[i].title + '<hr/></div>';
       $("#feedList").append(output);
     }
   }
   
   function receiveData(data, status) {
     if($.isArray(data)) {
       listNames(data);
     }
     if(IN.User.isAuthorized()) {
			 showLoggedInMessage();
		 } else {
		   $("#mustLogin").show();	
		 }
   }
   

   function callDataAJAX(jsonUrl) {
     $.ajax({
         url: jsonUrl,
         dataType: 'jsonp',
         jsonpCallback: 'receiveData'
     });
      
   }
   
   function getLinkedInfo(firstName, lastName) {
     IN.API.PeopleSearch().fields("firstName", "lastName", "distance", "publicProfileUrl","pictureUrl","headline").params({"first-name":firstName,"last-name":lastName,"sort": "distance"}).result(showResults);
   }

   function showResults(result) {
    $("#informationContainer").html('');
            $("#informationContainer").append("<span>Click a link to the left to list possible LinkedIn matches.  The one you want is most likely on top.</span>");
        for (var index in result.people.values) {
         var profHTML = "";
            profile = result.people.values[index]
            if (profile.pictureUrl) {
                profHTML += "<p><a target="_blank" href="" + profile.publicProfileUrl + "">";
                profHTML += "<img class=img_border height=30 align="left" src="" + profile.pictureUrl + "">"; 
                profHTML += "" + profile.firstName + " " + profile.lastName + " - " +  profile.headline +  "</a>";  
            }
            $("#informationContainer").append(profHTML);
        }     
   }
   
   

 
   
  </script>
 </head>
 <body>
  
  <div id="container">
   <div id="feedList">
   </div>
   <div id="informationContainer">
	   <div id="mustLogin">
	     <h2>Please login to LinkedIn using the button.</h2>
	     <script type="IN/Login" data-onAuth="loginComplete"></script> 
	   </div>
   </div>   
  </div>
 </body>
</html>


Less Is More ~ Older posts are available in the archive.