【Androidスマホでサクッと共有】モバイルWebサイトからWhatsAppでリンクを送信する方法

2024-06-21

Android モバイル Web サイトから WhatsApp でリンクを共有するプログラミング

WhatsApp Intent を使用してリンクを送信する

コード例:

<a href="https://api.whatsapp.com/send?phone=電話番号&text=リンクURL">WhatsAppで共有</a>

説明:

上記のコードは、href 属性に https://api.whatsapp.com/send を使用して WhatsApp Intent を呼び出します。
phone パラメータには、共有するリンクを受信する電話番号を指定します。

注意事項:

上記のコードは、ユーザーのデバイスに WhatsApp がインストールされていることを前提としています。
ユーザーが WhatsApp をインストールしていない場合、リンクは共有されません。

JavaScript ライブラリを使用してリンクを送信する

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/whatsapp-web-share.min.js"></script>

<button onclick="shareLink()">WhatsAppで共有</button>

<script>
function shareLink() {
  const link = "https://example.com/link";
  const recipient = "1234567890";

  WhatsAppWebShare.shareLink(link, recipient)
    .then(() => {
      console.log("Link shared successfully");
    })
    .catch(() => {
      console.error("Failed to share link");
    });
}
</script>

上記のコードは、npm を使用して whatsapp-web-share JavaScript ライブラリをインストールします。
ライブラリは、shareLink 関数を提供してリンクを共有することができます。
shareLink 関数には、共有するリンクの URL と、共有する相手先の電話番号を渡します。

Universal Links を使用してリンクを送信する

<a href="https://example.com/link?whatsapp_app=true">WhatsAppで共有</a>

上記のコードは、href 属性に whatsapp_app=true パラメータを追加して Universal Links を使用します。
Universal Links は、ユーザーのデバイスに WhatsApp がインストールされている場合、アプリでリンクを開くようにします。

Universal Links を使用するには、Web サイトが Apple Developer Program または Google Play Developer Console に登録されている必要があります。

Android モバイル Web サイトから WhatsApp でリンクを共有するには、さまざまな方法があります。それぞれの方法には、利点と欠点があります。最適な方法は、Web サイトの要件とユーザーの環境によって異なります。

WhatsApp Intent を使用してリンクを送信する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>WhatsAppでリンクを共有</title>
</head>
<body>
  <a href="https://api.whatsapp.com/send?phone=1234567890&text=https://example.com/link">WhatsAppで共有</a>
</body>
</html>

上記のコードは、シンプルな HTML ファイルです。
text パラメータには、共有するリンクの URL https://example.com/link を指定します。

JavaScript ライブラリを使用してリンクを送信する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>WhatsAppでリンクを共有</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/whatsapp-web-share.min.js"></script>
</head>
<body>
  <button onclick="shareLink()">WhatsAppで共有</button>

  <script>
  function shareLink() {
    const link = "https://example.com/link";
    const recipient = "1234567890";

    WhatsAppWebShare.shareLink(link, recipient)
      .then(() => {
        console.log("Link shared successfully");
      })
      .catch(() => {
        console.error("Failed to share link");
      });
  }
  </script>
</body>
</html>

shareLink 関数には、共有するリンクの URL https://example.com/link と、共有する相手先の電話番号 1234567890 を渡します。

Universal Links を使用してリンクを送信する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>WhatsAppでリンクを共有</title>
</head>
<body>
  <a href="https://example.com/link?whatsapp_app=true">WhatsAppで共有</a>
</body>
</html>