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.



Sign in with LinkedIn to load your connections.

LinkedIn Connections


function loadLinkedInData()
    //element cache
    var connectionsElem = jQuery("#connections"),
        loadingElem = connectionsElem.find('.loading');

    //show loading image;

    //load in linkedin connections
    .fields(["pictureUrl","publicProfileUrl"]) //fields to load in
    .params({"count":30}) //number of thumbs to display
        //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); }); }


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.
  • BennyB

    Mint, LinkedIn thumbs just like Facebook! Cheers

  • 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!