jQuery Display LinkedIn Connections

Sam Deering

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


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

Get your free chapter of Level Up Your Web Apps with Go

Get a free chapter of Level Up Your Web Apps with Go, plus updates and exclusive offers from SitePoint.

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