CODEWITHSUNDEEP
javascriptlinkedin-api
caston
caston

Reputation: 159

Dynamically generated LinkedIn share button in JavaScript

Before I start I should mention that I recently posted a similar question where I was trying to do the same with Twitter. I ended up using the twttr.widgets.createShareButton function which worked very cleanly. There may be a similar solution to this issue but I haven't yet been able to find something like that from reading the Microsoft LinkedIn share-plugin guide.

I am using details and summary tags to show a list of professions with data-elements in each summary storing a code that is appended to the URL of a website. When the user clicks on a summary element it creates a hyperlink to the page with functional skills listing for that role. I then want to generate a button so the website user can share to LinkedIn.

Here is my codepen with what I have so far. I have put the code to generate the LinkedIn share button in a function called lnShare. The line below doesn't seem to be working.

document.getElementById("p3").appendChild(ln)

I tried returning ln from the lnShare function then calling the appendChild directly after calling the function but that doesn't work either. I am getting:

ReferenceError: ln is not defined

To better illustrate what I am trying to do this codepen shows it working with the Twitter twttr.widgets.createShareButton function.

Here is my code:

function lnShare() {
console.log("lnShare started");
const ln = document.createElement('script');
ln.id="LN";
ln.type="IN/Share";
ln.setAttribute("data-url", fs.href);
//document.getElementById("p3").appendChild(ln);
console.log(ln);
return ln;  
 }

const root = "https://www.onetonline.org/link/summary/";



const fs = document.createElement('a');
fs.id="FS";
const linkText = document.createTextNode("functional skills");
fs.appendChild(linkText);
fs.classList.add("hide");
fs.title = "functional skills";
fs.href = "https://www.onetonline.org/link/summary/";

document.getElementById("p1").appendChild(fs);


document.getElementById("container").addEventListener("click",function(e) {
  const tgt = e.target;
  const isSummary = tgt.tagName==="SUMMARY";
  const code = tgt.dataset.code;
  console.log(root+code);
  fs.classList.toggle("hide",!isSummary || !code); // show only if summary AND code exists
  if (isSummary && code) {
    fs.href=root+code;
    console.log(fs.href);
    lnShare(fs.href);
    document.getElementById("p3").appendChild(ln);
  }  
})
.hide { display:none; }
<div id="container">
  <details id="agriculture" class="details">
    <summary>Agriculture</summary>
    <details>
      <summary data-code="53-7064.00">Picking & packing</summary>
    </details>
    <details>
      <summary data-code="45-2092.02">Farm worker</summary>
    </details>

    <details>
      <summary data-code="45-2091.00">Agricultural Equipment Operator</summary>
    </details>
    <details>
      <summary data-code="45-2093.00">Farmworkers, Farm, Ranch, and Aquacultural Animals</summary>
    </details>

  </details>

  <details id="construction" class="details">
    <summary>Construction</summary>
    <details>
      <summary data-code="47-2061.00">Construction Labourer</summary>
    </details>
    <details>
      <summary data-code="47-2073.00">Operating Engineers and Other Construction Equipment Operators</summary>
    </details>
    <details data-code="47-2051.00">
      <summary>Cement Masons and Concrete Finishers</summary>
    </details>
    <details>
      <summary data-code="47-2021.00">Brickmasons and Blockmasons</summary>
    </details>
    <details>
      <summary data-code="47-4031.00">Fence Erector</summary>
    </details>
    <details>
      <summary data-code="17-3031.01">Surveying Technician</summary>
    </details>
  </details>
</div>

<p id="p1"></p>

<p id="p2"></p>
<p id="p3"></p>
  

  <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>

All assistance is much appreciated.

Upvotes: 0

Views: 400

Answers (2)

Ali Waqas
Ali Waqas

Reputation: 335

The first problem is that ln is not in scope in the line document.getElementById("p3").appendChild(ln) you can try using document.getElementById("p3").appendChild(lnShare())

Upvotes: 1

holtc
holtc

Reputation: 1820

You're referencing ln in document.getElementById("p3").appendChild(ln);, but that variable has not been initialized. You need to update the previous line to const ln = lnShare(fs.href);

Upvotes: 1

Related Questions