Is it possible to trigger share menu on smartphones (via HTML/JS)?

Is there an existing possibility to trigger the share functionality in local browsers on smartphones via HTML or JavaScript?

Of course there are many services which provide a share button. But when I e.g. want to share a website on facebook, I need to be logged in to facebook in the browser I am currently using.

Almost all browsers got an own share functionality build in, which triggers a system menu to choose which app you want to use to share:

This question is about: How to trigger this menu?

I know it is possible to trigger a phone call with a specified prefix in href attribute of links, like tel: or callto:. Maybe such a shortcut for this share menu is also existing? Or some javascript code? Or a totally different way how to do it?

Thanks in advance.

Solution 1:

It is possible with a big catch. Currently only available in Chrome for Android, Samsung internet and on Safari (desktop and mobile). And support is coming to Edge and Chrome on desktop http://caniuse.com/#feat=web-share

if (navigator.share) {
  navigator.share({
    title: document.title,
    text: "Hello World",
    url: window.location.href
  })
  .then(() => console.log('Successful share'))
  .catch(error => console.log('Error sharing:', error));
}

https://developers.google.com/web/updates/2016/10/navigator-share

Solution 2:

I added this as all answers seems outdated by 2018-07-16.

It is possible, but only in a few browsers (MDN Reference), achieved througth the one method API in navigator:

navigator
    .share({
        title: document.title,
        text: 'Hello World',
        url: window.location.href
    })
    .then(() => console.log('Successful share! 🎉'))
    .catch(err => console.error(err));

Google's reference: https://developers.google.com/web/updates/2016/10/navigator-share

Also, there was a thing called Web Intends which is a dead project, you should go with navigator.share instead.

Solution 3:

Answered Apr 10 2013

To my knowledge, there is no such implementation in current browsers on mobile OS's. Since the question interested me - a google search revealed there is work being done in this direction:

• https://dvcs.w3.org/hg/web-intents/raw-file/tip/spec/Overview.html
• http://webintents.org/

Sorry - I do not know a workaround.

Solution 4:

It's now possible with the Web Share API!

However, it isn't widely supported as of yet. Currently, it's only available in Safari (mobile and desktop), and Chrome for Android. See Can I Use for details.

According to Introducing the Web Share API on Google Developers, there are several things to keep in mind:

• your page needs to be served over HTTPS
• you can only call navigator.share(…) in response to a user action, such as a click (i.e., you can't call it on page load)
• you should feature-detect it in case it's not available on your users' platform (e.g., via navigator.share !== undefined)

The Google Developers article also notes that URLs shared with the Share API need not be on your own domain—you can share any URL.

Putting that all together, you could use something like this which uses the Share API if it's available, and falls back to sending an email if it's not^*:

function createShareButton() {
  const btn = document.createElement("button");

  const title = document.title;
  const text = "Check this out!";
  const url = window.location.href;

  btn.innerText = "share" in navigator ? "Share" : "Share via e-mail";

  btn.onclick = () => {
    if (navigator.share !== undefined) {
      navigator
        .share({
          title,
          text,
          url
        })
        .then(() => console.log("Shared!"))
        .catch(err => console.error(err));
    } else {
      window.location = `mailto:?subject=${title}&body=${text}%0A${url}`;
    }
  };

  return btn;
}

document.title = "Demo";
document.body.appendChild(createShareButton());

_{*: Please do consider using a more appropriate fallback, (e.g., social sharing) depending on your use case.}