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.

linkedin-connections2

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 = "

"; jQuery.each(result.values, function(i,v) { if (v.pictureUrl) { profHTML += ""; profHTML += ""; } }); profHTML += '

'; //display the connections html jQuery("#connections").html(profHTML); }); }

HTML

LinkedIn Connections

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.
  • http://top10googletrends.com BennyB

    Mint, LinkedIn thumbs just like Facebook! Cheers

  • http://twitter.com/GaryYauChan Gary-Yau Chan

    is there a way to use the LinkedIn Api to when i hover over a profile, I get to see our mutual connections and shared / common groups?

    The LinkedIn api doesn’t seem to specific that.

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!