Embed LinkedIn Recommendations with HTML and CSS

 · 12 mins read

How to copy your LinkedIn Recommendations to your website.

After unsuccessfully scouring the interwebs for a free, quick and easy solution, I realized I had spent more time than it would have taken for me to hack the code myself. You’d think you could simply hit the Linkedin API to get your own profile information… but it seems since the data scares with Russia, they’ve pulled most of their API out of production.

No matter. We will get the job done anyways.

1. Go to your LinkedIn page recommendation section.

  • Press show more until all your recommendations and their contents are visible.
  • Open developer tools; you can do this several ways.
    • by right clicking anywhere on your webpage and selecting inspect
    • pressing F12
    • going to the Chrome menu, then more tools, then developer tools.

dev tools

2. Select the picker from the Chrome dev tools

dev tools

  • Select your recommendations or at least something near it. When you click, the dev tools will update to show you what element you’ve selected. You now need to isolate the unordered list element. It’s class tag should look like this:
 <ul id="recommendation-list" class="section-info" tabindex="-1">

dev tools image of recs

3. Copy the HTML

Right click to copy the element. Paste this code into a new html file that you have on your website. dev tools copy element

4. Copy the CSS

Copy the code I’ve compiled for you below and save it in a .css file on your website. It’s all the css tags you need from the LinkedIn page. Don’t forget to add the css to your head.html or wherever your css files are defined. You can customize the look and feel of your recommendations by changing these values without having to alter the code you copied from LinkedIn. (Unless they’ve changed the names of their css classes since I’ve posted this :) )

.pv-recommendation-entity:first-child {
    padding-top: 0;
    border-top: none;
}
.pv-recommendation-entity {
    margin-right: 0;
    display: flex;
    border-top: 1px solid #e6e9ec;
    padding: 16px 0;
}

/* image settings */
.pv-recommendation-entity img {
  border-radius: 50%
}

.pv-recommendation-entity__header {
    width: 33%;
}

.pv-recommendation-entity__highlights {
    width: 66%;
    padding-left: 16px;
}

.pv-profile-wrapper a:visited {
    color: #fff;
}
.pv-profile-wrapper a {
    text-decoration: none;
}

.pv-recommendation-entity__member {
    display: block;
    overflow: auto;
    text-decoration: none;
}

a.pv-recommendation-entity__member {
      color: #fff;
      text-decoration: none;
      -webkit-transition: all .2s linear;
      transition: all .2s linear;
      border-bottom: 0px #fff;
}

/* name of recommending */
.t-16 {
    padding-top: 20px;
    font-size: 1.5rem;
    line-height: 1.33333;
}

/* title of recommending */
.t-14 {
    font-size: 1.0rem;
    line-height: 1.42857;
}

/* date and relationship */
.t-12 {
    font-size: 1rem;
    line-height: 1.33333;
}

/* more text styles */
.t-black {
    color: rgba(0,0,0,.9);
}
.t-bold {
    font-weight: 600;
}
.t-normal {
    font-weight: 400;
}
.t-black--light {
    color: rgba(0,0,0,.6);
}

/* sizing of recommendation text */
blockquote {
    font-size: 1rem;
    line-height: 1.3333;
    font-weight: 200;
    color: rgba(0,0,0,.75);
}
blockquote, q {
    quotes: none;
}
  • Open your linkedin_rec.html file, we’re going to find and replace text so we can fix the links.
  • Currently, the links are relative to LinkedIn’s website: “/in/your-reviewers-profile”
  • We’re going to change them to be “https://www.linkedin.com/in/your-reviewers-profile”
  • Use the find and replace tool to find the characters “/in/” and replace with “https://www.linkedin.com/in/”
  • Boom! Now you’ve got working links.

6. Clean up

  • Similarly to the links in step 4, we’re going to find and replace the following so we can remove those unnecessary show more/less buttons.
  • find and replace the following with a space or empty string “ “
    <span class="lt-line-clamp__ellipsis lt-line-clamp__ellipsis--dummy">... <a class="lt-line-clamp__more" href="#">See more</a></span>
    
  • Same with
    <span><a href="#" class="lt-line-clamp__less">See less</a></span>
    

7. Customize

I’ve left comments for you in the css file so you can manipulate your recommendation style to match the rest of your website. Good luck!

In Action

Hopefully this tutorial was helpful for you. Let me know in the comments below if you have any questions or if there is something I could have explained better. Thanks!

A quick thank you to all of these fine people that have given me a recommendation. It was a pleasure working with all of you.

Recommendations