jquery - How can I list two Linkedin Follow Buttons in a Twitter Bootstrap Dropdown

Question

I have been messing with this for awhile... http://jsfiddle.net/ravenna/GFydL/7/

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li>Test</li>
      <li>
       <script type="IN/FollowCompany" data-id="621453" data-counter="right"></script>   

      </li>
  </ul>
</div> 

What I have is multiple drop-downs that each represent a user profile. If the user has a Linkedin Profile on file with us then a follow button is visible for their dropdown.

All browsers show the first one, and chrome shows the second one just fine. FF and IE only show a sliver of the icon for the 2nd and any more. any idea how to see any number of linked in Follow buttons?

Answer 1

First i found the buttons load slow sometimes so you could open the drop-down before your buttons loads.

I couldn't test on IE. I found a solution for firefox. The linkedin api (js) loads a div in a iframe in a iframe in a span in a span (or something like) that. I found the button iframes load but got a width of only 2px. The 2 px width seems to be caused by the display:none of the ul.dropdown-menu. My solution replace the display with visibility so the div got space:

 ul.dropdown-menu
 {
 display: block; visibility: hidden;
 }  

.open > .dropdown-menu
{
visibility: visible;
}   

See: http://jsfiddle.net/bassjobsen/dsasu/1/

Instead of the visibilty you also could load the content elsewhere with space and copy it to the dropdown on first click.