This is how you can quickly load your LinkedIn connections into nice thumbnail links using some jQuery and the LinkedIn API. Check out the demo below. Note: You’ll also need to include your API key from LinkedIn which you can get from the LinkedIn Developer Network.
Demo
Sign in with LinkedIn to load your connections.
LinkedIn Connections
jQuery
function loadLinkedInData()
{
//element cache
var connectionsElem = jQuery("#connections"),
loadingElem = connectionsElem.find('.loading');
//show loading image
loadingElem.show();
//load in linkedin connections
IN.API.Connections("me")
.fields(["pictureUrl","publicProfileUrl"]) //fields to load in
.params({"count":30}) //number of thumbs to display
.result(function(result)
{
//process the results for each connection create html
var profHTML = "<p>";
jQuery.each(result.values, function(i,v)
{
if (v.pictureUrl)
{
profHTML += "<a href=\"" + v.publicProfileUrl + "\">";
profHTML += "<img class=\"linkedin-connection-thumb\" src=\"" + v.pictureUrl + "\"></a>";
}
});
profHTML += '</p>';
//display the connections html
jQuery("#connections").html(profHTML);
});
}
{
//element cache
var connectionsElem = jQuery("#connections"),
loadingElem = connectionsElem.find('.loading');
//show loading image
loadingElem.show();
//load in linkedin connections
IN.API.Connections("me")
.fields(["pictureUrl","publicProfileUrl"]) //fields to load in
.params({"count":30}) //number of thumbs to display
.result(function(result)
{
//process the results for each connection create html
var profHTML = "<p>";
jQuery.each(result.values, function(i,v)
{
if (v.pictureUrl)
{
profHTML += "<a href=\"" + v.publicProfileUrl + "\">";
profHTML += "<img class=\"linkedin-connection-thumb\" src=\"" + v.pictureUrl + "\"></a>";
}
});
profHTML += '</p>';
//display the connections html
jQuery("#connections").html(profHTML);
});
}
HTML
<h3>LinkedIn Connections</h3>
<div id="connections">
<p><script type="IN/Login" data-onAuth="loadLinkedInData"></script></p>
<div class="loading" style="display:none;">
<img src="/images/ajax-loader.gif" alt="loading" title="loading" />
</div>
</div>
<div id="connections">
<p><script type="IN/Login" data-onAuth="loadLinkedInData"></script></p>
<div class="loading" style="display:none;">
<img src="/images/ajax-loader.gif" alt="loading" title="loading" />
</div>
</div>
