How to copy your LinkedIn Recommendations to your website.
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.
2. Select the picker from the Chrome 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">
3. Copy the HTML
Right click to copy the element. Paste this code into a new html file that you have on your website. 
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;
}
5. We want links that work
- 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!
8. Futureproofing
I added this step after a sad discovery that the images of those who recommended me have disappeared. LinkedIn changes their code and people change their LinkedIn pictures which will leave you with a dead link and no images. To fix this, follow the link to each of you recommenders and save the image within your website’s directory. Then update the img tags src attribute to point to your now self hosted image.
Before
<img class="lazy-image EntityPhoto-circle-4 fl loaded" alt="Jo Albright" height="56" width="56" src="https://media.licdn.com/dms/image/C4E03AQF0nBppOf5aqg/profile-displayphoto-shrink_100_100/0?e=1569456000&v=beta&t=wZp26THFJVpwexc9GhM4SK3XArs9P48NYQnwevSWgkw">
After
<img class="lazy-image EntityPhoto-circle-4 fl loaded" alt="Jo Albright" height="56" width="56" src="/assets/img/joe.jpg">
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
- Damien bleeds passion and excitement in every project he works on. Not only does he look to the future, he also keeps himself relevant with current standards and technologies that are stable. You will probably find him lost in VR world building a wild experience. Look to him for AR, VR, and mobile app projects.
- Damien is a top-notch developer, exceptionally creative, and dedicated to his trade and craft. He has demonstrated this across multiple applications, proof of concepts, and languages. He has done a fantastic job of researching issues to their root causes. He is tenacious and has translated problems into practical solutions. This included working on multiple threads at the same time along with resolving several product and environmental challenges. He maintains a positive attitude and his results are outstanding. Damien is innovative and naturally inquisitive. He has shown the ability to incorporate these into our products and equally important into the culture of our folks. He is currently championing activities related to our research into virtual and augmented reality. He has mentored and coached other developers with great success. He does well at understanding their current skill set and developing ways to expand and challenge these. He is patient and someone others enjoy working with. Comments from peers: "always extremely motivated, engaged in his work, and loves what he does.", "has stepped up in the absence of any other Android developers to handle all he can/could.", "has become an outstanding Android developer", "Biggest contribution was definitely working on multiple projects at the same time."
- Damien has been my mentor, in Android development, for a year now and it has certainly affected me in a great way. He helps by giving tips on styles of coding and referring books for me to read that boost my skills in programming and efficiency. Damien also helped me by looking over my code and recommending updates and ways of cleaning it to be more readable and efficient. His mentoring has also helped me in ways outside of programming, for instance he introduced me to agile methodology which has made me a more productive student overall.
- Damien has been my mentor at State Farm since I arrived about 5 months ago. He has been an amazing mentor, teaching me many skills including but not limited to: general Android tips, advice on clean coding practices, how to conduct meetings, creating build variants for testing and production, etc. His advice and tips have helped me improve immensely since I have arrived at State Farm. As a mentor, he is very patient and very effective at explaining concepts. If I have any questions, I can confidently count on Damien to provide help or to point me in the right direction to solve my issues. Not only is Damien a fantastic mentor, but also a great role model, Damien has inspired me to become a better developer and to never stop improving. He has endless drive and ambition for Android Development as well as in other technologies like 3D modeling/animation, VR/AR, etc. He holds his work to only the highest standards, making sure that his code is impeccable, clean, without errors/bugs, and easy to read and understand. Technical achievements and skills aside, Damien is also a great team member. He is always eager to help anyone in need. Damien is always full of energy and able to keep team morale high! Damien is invaluable as a mentor, employee and team member. I cannot say enough about how outstanding Damien is as a mentor and co-worker.
- Damien is very detail oriented and he shows a great interest in getting his projects done correctly, on time and within the budget. He goes above and beyond to satisfying his clients needs.
- Damien is a professional senior Android developer who produces quality, creative, cutting edge, fun and user-centric work in a demanding agile environment. I’ve received well thought out, test ready work while working as a tester on agile teams with him for 3 years. He is engaged in the team helping to prevent and put out fires. He is also a great team player who is passionate about learning. Damien knows a lot about IT and is a catalyst for innovations . He is always willing to teach others and does very often. He is an asset to the team!
- As a Product Owner I’ve worked with Damien on a SAFe Agile team for 2 years developing several apps for Agents, Team Members, and Field Leadership. Consistently Damien not only produces quality code in an agile environment with quick turn-around, but he goes above and beyond to add detail, beautiful design, and innovative out-of-the box thinking that elevates our suite of apps to the next level. He is the go-to engineer I think of when any special project arisse that requires work with emerging trends, or think tanks to cultivate the next generation of FinTech evolution. I couldn’t give Damien a higher recommendation; any team looking to elevate their Digital/Innovation department would be lucky to have him.
- Damien is a very proficient Android developer; working with coworkers over the entire development cycle. Damien is very engaged and proficient with helping with requirements at the start of a project, the actual coding and debugging of the app and associated back end services, and with any post-deployment issues that happen to crop up. He is very open to feedback, and is a continuous learner. I enjoy working with Damien, and enjoy his passion and dedication towards making quality apps for our company.
