3 problems with the Share button

10 posts / 0 new
Last post
Oren Hurvitz's picture
Joined: 2011-07-20
Jul 20, 2011
3 problems with the Share button

Hi,

I'm using the Share Button, and I have encountered a few problems.

First: my application needs to add the button dynamically. However, the documentation assumes that the button will be included in the web page statically. I was able to solve this, but it's a hack. First, I load in.js at the top of the page. Then, wherever I want to display a Share button I add the "IN/Share" script and call IN.init(). However, this function is undocumented and I'm afraid it may disappear at any moment. Please add an official way to add the button dynamically. (I saw your suggestion to use IN.Parse() at https://developer.linkedin.com/thread/2936 , but that function is also undocumented.)

Second: there's a problem with the LinkedIn logo which is part of the button (I'm using the Vertical Count button). The blue "in" image includes the following CSS style: "z-index: 1 !important". This makes it appear on top of everything! E.g., when I open a dialog box (using HTML; not a real window), the image appears above the dialog box. I was able to solve this by locating this element at runtime and changing its z-index to "inherit !important". But this is an ugly hack because it relies on the structure of the Share Button, and it works using JavaScript (I can't override this style using only CSS because of the "!important" attribute). Please remove the z-index style. Alternatively, allow modifying the image using CSS by: a) Adding a fixed CSS class to the image; b) Removing the "!important" attribute.

Third: I would like to be able to specify explicitly which image to use for the page, or no image at all. Right now the Share code parses my web page to find an image. However, since this is a JavaScript-based application, the only image it finds is a "Please Wait" GIF, so that's what it uses. I prefer to point it to my company's logo (which doesn't appear in the static web page), or at the very least tell it not to use any image.

Thanks,

Oren Hurvitz
VP R&D, Kitely Ltd.

Anthony Munns's picture
Joined: 2011-07-20
Jul 24, 2011

All points are hugely valid I have been struggling to add the linked in code to my site: www.mobileinquirer.com - all works fine for everything but the Internet Explorer family......I am ashamed to admit I have spent well over 40 hours trying to work it out....a record by over 35 hours!!!...still lost.

Anthony Munns's picture
Joined: 2011-07-20
Jul 24, 2011

I dont get what you mean on your possible solution to my issues.

I have added:

into the header area, and the following code where I want it dynamically generated for each blog excerpt on home page:

" data-counter="right">

But where are you putting IN.init() I dont get javascript very well....thanks.

Anthony Munns's picture
Joined: 2011-07-20
Jul 24, 2011

" data-counter="right">

Anthony Munns's picture
Joined: 2011-07-20
Jul 24, 2011

Linked in developer areas stops you putting code in.....damn!

Adam Trachtenberg's picture
LinkedIn Employee
Joined: 2011-06-30
Jul 24, 2011

Try switching your text format to Plain Text from Filtered HTML. Does that work?

Eugene O'Neill's picture
LinkedIn Employee
Joined: 2011-01-07
Jul 26, 2011

1) IN.Parse() and IN.Init() are here to stay. While we do employ the policy that any undocumented methods may or may not be supported indefinitely, these two are uniquely crucial to the functionality of the framework. The amount of work it would require to remove IN.Parse()... I don't even want to think about it ;). IN.Init() is our preferred method for loading the framework asynchronously and won't be going anywhere. Feel free to use either method.

2) We force !important on a lot of the styles to avoid conflicts on other pages with aggressive styling behavior. We do try to play nicely across the web, as we are a guest in your house. We will consider removing z-index (this should be safe to do as it was a remnant of some legacy code that has been recently retired). This will require an audit of several buttons across multiple browsers so this change might not happen immediately.

3) Fortunately, our URL processing team has made some awesome improvements to the way we detect content on your page. We have started implementing the Open Graph Protocol and you can now start specifying how the Share plugin will detect your page. For example, specify <meta property="og:image" content="http://www.example.com/logo.png" /> and that will be the image that appears in the Share dialog. Check out http://ogp.me/ for more examples and documentation on using Open Graph in your page.

Again, thanks for the feedback. We only know if we're doing a good job when people like you let us know how it's working (or NOT working :D).

Eugene // Web Developer
LinkedIn

Oren Hurvitz's picture
Joined: 2011-07-20
- (Reply to #7) Aug 1, 2011

Thanks for the update! We already use og:image for Facebook, so this feature is perfect. Will you announce when the new Share button has been released? I prefer that to having to poll the code to see when it changes...

@Anthony: the Share button doesn't work for me in IE8, although it works fine in IE9. I forgot to list that as one of the problems. My "workaround" is this: we use several share buttons, so in IE8 we just increased the whitespace between the remaining buttons so that it isn't obvious that one of the buttons is missing... But yes, this is a real problem.

Here's the code I use to make the Share button appear dynamically. If you don't see a couple of lines of code below then blame the forum software :)

// 'container' is the DIV where the button should appear
container.innerHTML += "<script type=\"IN/Share\" data-url=\"" + shareUrl + "\" data-counter=\"top\"></script>";
IN.init();

Joined: 2012-03-16
Mar 16, 2012

I am having the same issues with IE8. My div looks almost exactly like Oren's listed above. Any ideas/solutions on this one?

Madison Bryan's picture
Joined: 2013-09-05
Jan 8, 2014

Is there a reference somewhere on when to use IN.init() and IN.parse()?