Do you have a LinkedIn Profile? Have you ever tried to print it as a resume? Well, here is my saga (and if you don’t want the whole song-and-dance, you can skip to the result)…
Naturally, LinkedIn wants you to do your business directly within their website, which makes sense to them. But sadly, it isn’t always realistic; many jobs want you to upload your resume as a PDF.
Understandably, I suppose, just printing the webpage looks like garbage.
LinkedIn does offer a feature that you may be familiar with, Export to PDF, which does in fact export your profile as a PDF. But it doesn’t have the best appearance (especially the Skills & Expertise section!), and several sections are completely missing (Volunteer Experience & Causes, Publications, Honors & Awards)!
LinkedIn also offers a feature you may not be familiar with, via their Labs, called ResumeBuilder. This feature lets you customize the appearance of your resume, choose sections to include or not, and then print that as a PDF. However… While this feature does handle the Skills & Expertise section better, what it does with the bullets in my Experience section is less than ideal… And there are still sections missing (Volunteer Experience & Causes, Projects, Honors & Awards, Recommendations). Arguably, some of these sections shouldn’t be included, but I’d like the option of choice…
So, typically in my fashion, when I couldn’t find something that did what I wanted, I decided to make something that did. So, here is my LinkedIn Resume Bookmarklet:
LinkedIn Resume
Just drag this Bookmarklet into your browser bookmarks, then next time you’re viewing your LinkedIn Profile page, give it a click. Your Profile should immediately be transformed into something that looks pretty good on the screen and prints well.
javascript:(function(){[].slice.call(document.querySelectorAll(".view-more-bar span")).forEach(function(t){t.click()}),setTimeout(function(){[].slice.call(document.querySelectorAll(".toggle-show-more")).forEach(function(t){t.click()})},1e3);var t=document.getElementsByTagName("head")[0],o=document.createElement("style"),i="#global-error,#preview-ctx,.account-icons,#header,.more-info .loading,.address-book,.compact-view .endorse-button,.view-less-bar,.write-endorsement,.profile-aux,.demographic-info,.profile-card table,#website-view li+li,.profile-card-extras .profile-actions .show-more-info,#text-ad-container,#activity,.background-section .education-associated ul li p span,#profile-skills h5,.see-more-less,a.toggle-show-more,.background-section .education-associated dt span.closed,.background-section h4 a .external-link-indicator,.endorse-count,.endorsers-container,.endorsements-nav,#connections,#groups-container,#following-container,#aux,#footer,.edit-tools,.background-section .education-associated dt span,.background-section .projects-associated dt span,.background-section .patents-associated dt span,.background-section-drag-proxy .education-associated dt span,.background-section-drag-proxy .projects-associated dt span,.background-section-drag-proxy .patents-associated dt span,.background-section .education-associated dd.associated-endorsements p,.background-section-drag-proxy .education-associated dd.associated-endorsements p{display:none!important}#contact-info-section{display:block!important;float:left!important;position:absolute!important;z-index:100!important;margin-top:-96px!important;left:2em!important;background:0!important}.profile-card-extras .profile-actions{margin-top:-3.25em!important;left:84px!important;position:relative!important}.profile-card-extras .profile-actions:before{position:absolute!important;content:'LinkedIn'!important;color:#999!important;font-size:12px!important;line-height:2em!important;vertical-align:middle!important;width:60px!important;left:-60px!important}#body,#body .hp-nus-wrapper{width:100%!important;margin:0!important;padding:0!important}#wrapper{width:auto!important;padding:.5em!important}#profile{width:100%!important}.profile-card{width:100%!important}.profile-card .profile-picture,.profile-card .profile-overview{display:table-cell!important;width:none!important;float:none!important;vertical-align:middle!important;margin:0!important;padding:2em!important;height:auto!important;line-height:1!important;background:0!important}.profile-card .profile-picture{float:right!important}.profile-card .profile-overview-content{min-height:0!important;height:auto!important;padding-top:0!important;padding-bottom:0!important}.profile-top-card,.profile-card .profile-picture img,.more-info,.profile-card-extras .profile-actions,.profile-activity,.profile-background,.profile-endorsements,.profile-groups,.profile-following,.profile-connections,.profile-your-notes{-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.profile-card .title{line-height:1.7!important}.more-info table th,.more-info table tr.twitter-presence th,.more-info table tr.www-presence th,.profile-card-extras .profile-actions .public-profile span,.profile-card-extras .profile-actions .public-profile a{margin:0!important;padding:0!important;background:0!important;font-size:12px!important;line-height:1.7em!important;vertical-align:middle!important;width:60px!important}.profile-card-extras .profile-actions .public-profile a{width:auto!important}.profile-card-extras .profile-actions .public-profile span{float:left!important;color:#999!important}.more-info table,.profile-card-extras .profile-actions{float:left!important;clear:left!important;margin:0!important;padding:0!important}.profile-card-extras .profile-actions{margin:-38px 0 0!important;border:0!important;background:0!important}.profile-card-extras .profile-actions ul,.profile-card-extras .profile-actions ul li{margin:0!important;padding:0!important}.skills-section{display:inline!important}.skills-section .endorse-item{display:-moz-inline-stack!important;display:inline-block!important;vertical-align:middle!important;zoom:1!important;margin:0 5px 5px 0 !important}.background-section .education-associated,.background-section .projects-associated,.background-section .patents-associated,.background-section-drag-proxy .education-associated,.background-section-drag-proxy .projects-associated,.background-section-drag-proxy .patents-associated{margin-left:0!important}.compact-view{margin-top:0!important}.compact-view .endorse-item.extra-skill{display:inline-block!important}#background-certifications,#background-courses,#background-education,#background-experience,#background-honors,#background-languages,#background-organizations,#background-patents,#background-projects,#background-publications,#background-skills,#background-summary,#background-test-scores,#background-volunteering,#background-additional-info{margin-top:15px!important}.background-section .education-associated dt:after{display:-moz-inline-stack!important;display:inline-block!important;vertical-align:middle!important;zoom:1!important;height:9px!important;width:5px!important;margin-left:2px!important;margin-right:0!important;background:url(//www.linkedin.com/scds/common/u/images/apps/profile/sprite/sprite_profile_edit_tools_v12.png) no-repeat 0 -850px!important;content:''!important}#languages-view ol{float:none!important;width:100%!important;display:table!important}#languages-view li{float:none!important;min-height:0!important;display:table-row!important;width:100%!important}#languages-view h4,#languages-view span{display:table-cell!important;min-width:8em!important;padding:.25em!important}.endorsement-info{float:none!important;width:auto!important;padding-left:100px!important;padding-bottom:0!important}a,a *{color:#333!important}@media print{p,h2,h3{orphans:3!important;widows:3}h2,h3{page-break-after:avoid!important}.background-section hgroup{page-break-inside:avoid!important}}",a=function(){t.appendChild(o)};o.type="text/css",o.styleSheet?o.styleSheet.cssText=i:o.appendChild(document.createTextNode(i)),/Firefox/.test(navigator.userAgent)?setTimeout(a,0):a()})();
LinkedIn has a few different “views” of your Profile page. To keep things simple (for me), I made this work on only one of them. To load that version, follow these steps:
- Open your LinkedIn Profile page (click the Profile link in their main menu)
- In the top section, to the right of your photo, click the View profile as button
- After the page reloads, below the main menu is a new section that says “This is what your profile looks like to” followed by a drop-down; select Connections from the drop-down
- Now click the Bookmarklet you saved above.
- You should now have a print-ready page.
And after running the Bookmarklet against my current, live Profile page, I have something that I can proudly email or upload as a PDF resume! All the code is doing is hiding several parts of the page that shouldn’t be printed, then restyling several other parts to make them look, and print, better.
I’ve also added this to GitHub, so feel free to play and let me know what you think!
Cheers,
Atg
Super job! Worked a treat once I had figured out what to paste in the Chrome URL box from your Github page. Dragging the bookmark to the toolbar seemed to cut the javascript short.
One possible enhancement would be to get the page breaks nicely cleaned up. No idea whether this is possible ’cause I haven’t looked at your code. Just an idea at this stage.
Once again thanks a million!
Thanks, Roy, yes, the drag-and-drop seems to be buggy with some browsers, not sure why, but glad you got it to work!
As for the page breaks, yes, they’re a bit tricky, as different sections will break differently for different people, and the CSS doesn’t seem to be able to figure out exactly where to break very well…
For my own, I ended up playing with it just a bit via the Inspector panel in Chrome, so it worked out pretty nicely…
A cheat, to be sure, but I got (nearly) what I wanted, so I call that a *win*! :-)
Cheers,
Atg
I can’t get it to work on firefox or safari. Any Idea?
@Jack: Ugh, yeah, they’re both butchering the code pretty badly when it is dragged to the Bookmarks bar… Might be better just grabbing the code from GitHub (https://github.com/aarontgrogg/LinkedIn-Resume-View) and manually creating the Bookmark. Sorry!
Works flawlessly for me in Chrome, though…
Atg
Thanks Aaron,
I would love to get it work. I’ve tried to copy/paste the code in the end of your file available on github without success. In firefox (i’m on a mac) When on profile, i get a blank page with [object HTMLStyleElement] written as first line. With safari, the bookmarklet simply doesn’t work.
If you are able to help me, it would be great!
Best regards and congrats for the website.
Jack
Ok, I’ve found the issue for FF, and the updated code is posted to GitHub.
I can’t figure out how to change Bookmark URLs in Safari/Win, and I can’t get the drag-and-drop working properly, some conflict between a crap-load of JS inside an
<a>tag’s HREF, pushing all that through WP, then trying to drag-and-drop into a Bookmark, causes a conflict, go figure… :-)But at least you can get it working, with just a little added effort…
Thanks,
Atg
THANK YOU !
It works perfectly with Firefox. I’ll try with Safari and let you know.
Again thanks !
J.
First of all thanks for this! But I have an issue, for some reason the contact info section and the profile picture are not showing completely. They´re just cut. I´m guessing it could be easily adjusted by tweaking the margins in the code but I have absolutely no coding knowledge and my attempts at modifying the code so far resulted in failure. Any help or directions would be really appreciated!
Thanks!
@Mark: Thanks for the comment. A couple things will help debug this:
Which browser/version are you using?
Can you send a screenshot of the results you’re getting?
Cheers,
Atg
Hey Aaron, thanks for your quick reply! sorry for getting back at you just now.
I tried on both firefox and chrome both up to date versions.
Here´s a snip of what it looks like:
http://www.sendspace.com/file/2lsaws
I´m guessing it has to do with some values of the box containing the picture, I tried looking at the code of the page that results from your script and by changing the position from absolute to relative it seems to show the whole pic. (Hope what I´m saying makes any sense!)
I also noticed by comparing my output to your pdf posted above that the all the fonts size look really small. I´m not sure if that´s a problem with the html to pdf converting tool I used.
What have you used for example to get your pdf from the output page of your script?
I don’t want to bother you too much since what you created is already a great tool, but if you could direct me into what values control what I could handle any further tweaking I need by myself!
Thanks again for any time you´ll dedicate to answer my questions!
M.S.
@Mark S:
Thanks, sorry you’re having trouble.
Regarding the header image, changing from absolute- to relative-positioning makes total sense, you just don’t have as much content in that box as mine does, so my content pushes the box big enough for the image, where yours doesn’t. It making the position relative works, then I will change that too, thanks!
As for the font-size, not sure what would do that… If it looks good in your browser before the conversion, then, yes, I would guess it has to do with your conversion tool. I use a Mac, and I create the PDF by simply hitting Print, then selecting Save as PDF. Can’t remember if Windows has a similar feature or not…
Anyhow, hope this helps a little, and thanks again!
Atg
Doesn’t seem to work with the new layout of LinkedIn?
Will an updated version become avaliable? Would be perfect!
@Sara: Part of a very long, long TO-DO list… Wasn’t even sure if anyone was using it, so will try to bump it up the list a few notches… :-)
I’m with Sara – an update would be really nice.
It does ALMOST work if I go to “view profile as”, but not close enough to be usable =0/
@Sara and @Alice: THE UDPATE IS IN! :-) Live on Github, and updated in link above! Thanks for your patience, and the subtle kick in the butt!!
Atg
Thank you =0)
That’s just simply awesome! Thank you!
Great work, thanks.
Aaron, this is an awesome work done. Beautiful LinkedIn CV. Thank you very much.
Hi Aaron,
I love this plugin, you did a great job! Too bad that the new LinkedIn layout breaks it! Any idea if or when you’ll release an update?
Thanks, Rob.
Yeah, like all my other personal projects, this has really fallen behind…
I can’t believe that even after such a thorough overall, their Save as PDF link still looks like such crap!
I don’t even see the View Profile As option anymore, so not sure what hook I would even use.
Will try to get back around to this one of these days, but for now life is just too full, sorry…
Atg
I did notice that the native PDF generator now works better. Line breaks are used and it uses the text of the currently chosen language. Not a beautiful document, bur more useful now it includes line breaks.