How-to Add LinkedIn Profile Popup on Blogger

I find the new "profile popup" from LinkedIn to be a very nice addition to blog postings. This adds a LinkedIn icon after your name that pops up a window with your profile information. I wanted to add it to my blog, but I couldn't find any instructions on how to accomplish this with Blogger. As such, I had to figure out how to add this (because I thought it was that cool). Below are the instructions on how to add this functionality to your Blogger site.

To begin, you will need to visit the LinkedIn site to get the JavaScript code for this. There are two pieces of code that are needed to make this little piece of magic work.

First, you will need to get the snippet that goes in the section of your Blogger template. To accomplish this, go to the dashboard, click on the Layout tab, then click the "Edit HTML" link below the tabs. This will provide access to the HTML code that runs your blog site. Find the line in the code that is

</head>

On the line above this, paste the first (of two) line of JavaScript from the LinkedIn profile widgets page. The code that I used is below:

<script type="text/javascript" src="http://www.linkedin.com/js/public-profile/widget-os.js"></script>

Next, you will need to get the "profile" line of code that actually points to your profile. On the LinkedIn site, this code points to "Reid Hoffman". To make this point to your profile, just get the URL for your profile from LinkedIn. You can get this by viewing your public profile and copying and pasting that link into the JavaScript code. Then remove "Reid Hoffman" and the closing anchor tag (</a>) and your link should now look like this:

<a class="'linkedin-profileinsider-popup'" href="http://www.linkedin.com/in/bohanonb">

Now you will need to go to the correct section of your Blogger template (still in the Edit HTML section) to paste this link. This is the part that took a while to find. There is a checkbox at the top of the HTML editor window that reads "Expand Widget Templates". Check this box. Find the line that reads:

<span class='fn'><data:post.author></span>

Once you find this section of code, simply paste your customized link between <span class='fn'> and <data:post.author>. Now type in </a>between </data:post.author> and </span> . The result should be something like this:

<span class='fn'><a class='linkedin-profileinsider-popup' href="http://www.linkedin.com/in/bohanonb"><data:post.author></a></span>


Save the template and it will change all of the previous posts to reflect your new LinkedIn Profile Popup Widget.

If you have any problems getting this to work you can ask your question in the comment section or contact me directly through CrossLoop.