The people I meet are often experts in their own field but I don't expect them to be experts in mine. The purpose of this blog is to provide a reference for questions I've been asked and to post solutions I've found for annoying technical issues.

11 October 2012

Problems with the LinkedIn member profile plug-in
(size, positioning and onmouseout)

Like many other social networks, LinkedIn provides a set of time-saving widgets or plug-ins to allow you to have the most commonly requested content easily embedded in your website with minimal technical fuss. The LinkedIn member profile plug-in is one of those - they supply the code, you paste it into your website code.

You have three options - one in which the profile appears inline and two in which a link is created that, depending on your preference, the user clicks or hovers on to reveal the profile. The links can be LinkedIn icon only or icon + text.

Unfortunately things don't always behave the way you expect them to! Size, positioning and closing a revealed profile by mouseout are the main bugbears that I've come across. Whether you are a website DIY enthusiast or a professional, you might find these tips useful for getting it to work more elegantly for you.



Plug-in basics

The code you paste into your web page invokes javascript held on LinkedIn's server which creates what you've asked for (inline profile or revealing link) and adds it dynamically to your web page when it loads. The profile itself sits in an iframe and shows the requested user's image, name and a link to their public LinkedIn page.

What is seen in addition to the basic info does change depending on whether the viewer is logged in or not, or is viewing their own profile or someone else's. If the viewer is not logged in or is viewing their own profile, a list of which other profiles have been viewed recently will be seen. If the viewer is logged in and viewing someone else's profile, the first few contacts they have in common will be shown.

You can get the code here:

https://developer.linkedin.com/plugins/member-profile-plugin-generator

It looks just like this (at time of writing):
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="http://www.linkedin.com/pub/finn-bell/36/b24/a23" data-format="click" data-text="Finn Bell"></script>
Note that although this is for my profile using icon+text link, you could use this by changing the value of 'data-id' to any other member's public profile page link, 'data-form' to have a value of 'inline' or 'hover', and the value of data-text' to be empty or whatever link text you like.

Size

When the inline profile iframe is created, it needs at least 364 pixels of width to sit in. So, if you are using this version, make sure the containing (parent) element and any elements it's nested in can accommodate this or the profile will, depending on the browser and sometimes your css, either stretch the container and mess up your layout or jut out and sit over anything next to the container.

Height also changes depending on the viewer (see above) so make sure you don't embed it inline in a fixed height element which is too small (and can't scroll) or you will have display problems again.

In older versions of Internet Explorer, the iframe is always much wider whether you embed it inline or reveal it with a link. To control the width just add this to your stylesheet:
/*Plug-in controls*/
.IN-widget iframe {width: 364px !important;}
For whatever reason, the iframe requires at least 370 pixels (in any browser) for width when it's created by a revealer link, so make sure you remember that if you are using those versions.

Positioning the LinkedIn member Profile

A very common problem when using the revealing links is that the profile iframe created by clicking or hovering on the link appears very much to the right of and below the link. Usually it appears outside of the containing (parent) element but depending on your css it can appear inside, causing stretching or scroll bars.

The iframe uses absolute positioning to place itself on the page, so the simplest solution is to wrap a container element around the LinkedIn code and give that a style with 'position: relative;' - like so:
<b style="position: relative;">
<!--Plug-in code from LinkedIn goes here-->
</b>
Then paste the following code onto your style sheet and alter the 'left' and 'right' properties until they put the iframe where you want it to appear. NB you should not position it over the link at all!
/*Plug-in controls*/
.IN-widget iframe {left: 180px !important; top: 0px !important; width: 370px !important;}
I've used a bold tag as a container but you could use span if you don't want to affect the appearance of the link text. Note that I have set the width of the iframe in the second code snippet just to make things nice for those stuck with older browsers. If you are making it appear over other content, adding a border can help to differentiate it (the iframe background is added to take the white right to the border). For example:
/*Plug-in controls*/
.IN-widget iframe {left: 655px !important; top: 270px !important; width: 370px !important; border: 1px solid rgb(0,0,0); background: #ffffff;}
PLEASE NOTE - if you are putting multiple profile links on your webpage, you'll need to put separate containers around each one if you want to position the profiles separately (the css line does not need to be repeated).

If you want to see a working example, have a look at my website's about page. You can view source to see the code and you can also see how the iframe positions with the extra stylesheet line.

About Sableworks

Getting the member profile to close using onmouseout

When the profile iframe created by clicking or hovering on a revealing link apppears, the only way to close it is to click anywhere on the page outside of it. If you are using hover to make the profile appear, you might decide that it would be neater for your users if the profile disappeared when they moved their mouse off it.

To do this you do need some javascript. There are people out there with library -specific solutions (ie Dojo, Prototype, JQuery, etc) but Im' not using any of them on my own website so I came up with this raw javascript solution which anyone can use regardless of what libraries they do or don't use. This will work in browsers as old as IE6.

First put the following code in the head tag of your web page or (minus the script tags) into one of the javascript pages your web page uses.
<script type="text/javascript"><!--//--><![CDATA[//><!--
//Script by Sableworks
function closeLip(theID)
{
 var theParent = document.getElementById(theID);
 theParent.onmouseout = function() {var theTags = document.getElementsByTagName('iframe'); if (theTags.length > 0) {for (i = 0; i < theTags.length; i++) {if (theTags[i].id.indexOf('easyXDM_IN_Lib_li_gen') != -1) {theTags[i].onmouseout = function() {this.style.visibility = 'hidden'; this.parentNode.focus(); document.getElementById('theClick').click();};}}}};
}
//--><!]]></script>
As in the previous section, create a container element for the plug-in and give it a unique id - I've called mine 'lipContainer'. In this example, I've used a bold tag so that my link will be bold on the page but a plain span tag will do if you don't want to change the way it looks.

<b id="lipContainer" style="position: relative;">
<!--Plug-in code for profile(s) goes here-->
<!--Javascript functionality goes here-->
</b>
Then put your profile plug-in code and the following piece of javascript where shown by the comments. Make sure you replace 'lipContainer' with whatever you called your container!
<form name="safariClick" style="visibility: none; display: none;"><input id="theClick" type="hidden" onclick="function(){return;}" /></form>
<script type="text/javascript"><!--//--><![CDATA[//><!--
closeLip('lipContainer');
//--><!]]></script>
Mine looks like this when finished:
<b id="lipContainer" style="position: relative;">
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="http://www.linkedin.com/pub/finn-bell/36/b24/a23" data-format="click" data-text="Finn Bell"></script>
<form name="safariClick" style="visibility: none; display: none;"><input id="theClick" type="hidden" onclick="function(){return;}" /></form>
<script type="text/javascript"><!--//--><![CDATA[//><!--
closeLip('lipContainer');
//--><!]]></script>
</b>
PLEASE NOTE - if you are putting multiple profile links on your webpage, you'll need to put separate containers with unique ids around each one and make sure you put a matching function call in as shown for each one. You'll also need to ensure that the form (safariClick) is removed from the code for all but one of your links!

Browser compatibility

The LinkedIn code has good cross-browser compatibility as is but it may load more slowly at times or misfire if the user's internet connection is slow or weak. Then as with everything they just need to try again.

The solutions given here are designed to work in most browsers - I've tested it in Firefox, Internet Exploer (IE), Chrome, Opera and Safari on windows XP and Vista. The invisible form in the code to be pasted into the web page is there to allow Safari to use the click method properly. Both IE and Safari need this to properly close the iframe and, while IE will happily use any tag from body downwards, Safari updated its Javascript engine with Safari 5 and can be tricky with this method.

It is backwardly compliant with older browsers, inluding IE6. Why is this important?

If you have a UK audience, many large institutions (in particular financial institutions) still use very old browsers and that is what staff must use in the office. So for a professional audience browsing during the day, you might want to be sure you look good in older browsers if that's who you want to impress. For many that may not be a very important consideration but for those who work in or with that industry it's probably a lot more important.

Accessibility

Click vs hover? If you want to make life easier for users on tablets and other hand-held devices, or who use the keyboard to navigate web pages, click is the way to go.

The whole plug-in only works if your audience has javascript enabled, so keep that in mind if you have reason to think many of your users have javascript turned off or your website is required by law to give accessibility alternatives. It's always a good idea to do that anyway and, for the less experienced, here's how:
<noscript><a href="data-id">data-text</a></noscript>
The noscript tag is very useful for giving alternative content to people who, for whatever reason, have script-running turned off without having to give them alternative website versions. Just paste this in right after the plug-in code and replace 'data-id' and 'data-text' with the values those attributes have in your plug-in code.

For me this would be:
<noscript><a href="http://www.linkedin.com/pub/finn-bell/36/b24/a23">Finn Bell</a></noscript>
Hopefully the information in this post will save some of you out there some time and hair-pulling when trying to get this plug-in to play nice :)

2 comments:

  1. I was wondering if you know of how to do this with the IN/Apply button, my problem is that it loads the iframe correctly with the new size, but then it loads another iframe inside of it the original size and everything gets cut off..

    thanks for what you have here though as well, great job!

    Todd

    ReplyDelete
    Replies
    1. Hi Todd, I've been really busy the last couple of weeks but I'll see if I can have a look at the In/Apply button later this week. Glad you found what's here just now useful though.

      Delete

Because it's open to anyone, this blog is moderated...

Followers