<article>
  <h1>Title of Post</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur a unde laborum ex dolore mollitia est, doloremque magnam laudantium obcaecati quas vero tenetur excepturi et praesentium veritatis optio quisquam perferendis?</p>
  <p>Tempore ex aspernatur doloremque. Minima cumque dolorum nam, a error necessitatibus magnam natus maiores sit alias, iusto reprehenderit sapiente tempore doloremque exercitationem nihil voluptate corporis sed ipsa at? Eos, voluptas.</p>
</article>
article {
  max-width: 400px;
  margin: 2rem auto;
  padding: 2rem;
  background: #eee;
  box-shadow: 0 5px 5px rgba(black, 0.2);
  font: 300 100%/1.5 system-ui;
  border-radius: 6px;
  h1 {
    margin: 0 0 1rem 0;
  }
  > :last-child {
    margin-block-end: 0;
  }
}
View Compiled 
if (navigator.share) {
  const article = document.querySelector("article");
  article.insertAdjacentHTML(
    "beforeend",
    `
    <button onclick="window.doSharing(this)">Share</button>
  `
  );
}

window.doSharing = (el) => {
  navigator.share({
    title: el.parentNode.querySelector("h1").innerText,
    text: el.parentNode.querySelector("p").innerText,
    url: "https://codepen.io/chriscoyier/pen/KKzjQWO"
  });
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.