Web およびモバイル WhatsApp 共有ボタンを作成する

Web およびモバイル WhatsApp 共有ボタンを作成する
Web およびモバイル WhatsApp 共有ボタンを作成する
Louis Robert
2024年7月22日月曜日 5:46:04

WhatsApp の共有ボタンを最適化する

Web サイトに WhatsApp 共有ボタンを含めることは、ユーザーがあなたの情報を自分のネットワークと簡単に共有できるようになるため、ユーザー エンゲージメントを高めるための素晴らしいアプローチです。リンクを使用して、モバイル デバイスで WhatsApp をスムーズにアクティブ化するのが標準的な方法です。

それにもかかわらず、デスクトップ版の WhatsApp はこの戦略と互換性がありません。この投稿では、WhatsApp のオンライン バージョンとモバイル バージョンで機能する共有ボタンを作成するために必要なコードと手順を説明します。

指示 説明
encodeURIComponent() 特定の文字が出現するたびに、その文字の UTF-8 エンコーディングに対応する 1 つ、2 つ、または 3 つのエスケープ シーケンスを置き換えることによって、URI コンポーネントをエンコードします。
window.open() 指定された URL で新しいブラウザ ウィンドウまたはタブを開くことにより、WhatsApp Web 上でリンクを共有できるようになります。
express.static() 静的ファイルをクライアントに提供し、提供されたディレクトリから HTML、CSS、および JavaScript によって静的ファイルにアクセスできるようにします。
res.redirect() リダイレクト応答を送信することで、クライアントを指定された URL にリダイレクトします。これは、WhatsApp Web 共有リンクにリダイレクトするのに役立ちます。
app.use() この例では、Express アプリケーションにミドルウェア機能をマウントすることで静的ファイルを提供します。
app.get() GET クエリのルート ハンドラーを定義することで、WhatsApp Web 共有リンクのエンドポイントを作成します。
document.getElementById() スクリプトがイベントを処理できるように、指定された ID を持つ HTML 要素のインスタンスを提供します。
onclick 特定の HTML 要素をクリックしたときにトリガーされるイベント ハンドラーを作成します。これにより、共有機能がトリガーされます。

クロスプラットフォームの WhatsApp 共有機能の有効化

最初のスクリプトは、WhatsApp のオンライン バージョンとモバイル バージョンの共有ボタンを作成します。 HTML そして JavaScript。モバイル共有ボタン href 属性は、モバイル デバイスで WhatsApp を開き、事前に入力されたメッセージを使用します。 whatsapp://send?text= URL スキーム。ボタン id 「shareButton」のデスクトップ版用に作られています。このボタンには、 onclick スクリプトによって追加されたイベント リスナー。クリックすると、 https://web.whatsapp.com/send?text= WhatsApp Web の URL を作成するために使用されます。そして使用します encodeURIComponent メッセージを暗号化します。 window is then used to open the created URL in a new browser tab.open、WhatsApp Web ユーザーがメッセージを配布できるようになります。

2 番目のスクリプトでは、 Node.js そして HTML フロントエンド開発とバックエンド開発の両方に。の Express フレームワークはによって使用されます Node.js サーバーを構成するバックエンド スクリプト。サーバーがルートを定義します /share これは、事前に入力されたメッセージを含む WhatsApp Web 共有 URL に再ルーティングし、「public」ディレクトリから静的ファイルを配信します。 Web およびモバイルの共有ボタンはフロントエンド スクリプトによって生成されます。同じ whatsapp://send?text= URL スキームはモバイル ボタンで使用されます。の /share サーバー上のエンドポイントは、Web 共有ボタンによってリンクされます。このエンドポイントに到達すると、ユーザーは、次を使用してエンコードされたメッセージとともに WhatsApp Web に送信されます。 res.redirect、WhatsApp Web共有を有効にします。

WhatsApp 共有ボタン用の完全な Web およびモバイル ソリューションの開発

HTML と JavaScript のソリューション

<!DOCTYPE html>
<html>
<head>
<title>WhatsApp Share Button</title>
</head>
<body>
<!-- Mobile Share Button -->
<a href="whatsapp://send?text=Hello%20World!">Share on WhatsApp Mobile</a>
<!-- Desktop Share Button -->
<button id="shareButton">Share on WhatsApp Web</button>
<script>
document.getElementById('shareButton').onclick = function () {
  var url = 'https://web.whatsapp.com/send?text=' + encodeURIComponent('Hello World!');
  window.open(url, '_blank');
};
</script>
</body>
</html>

WhatsApp 共有のためのフロントエンドおよびバックエンド ソリューションを実践する

HTML と Node.js の統合

// Backend: server.js (Node.js)
const express = require('express');
const app = express();
const port = 3000;
app.use(express.static('public'));
app.get('/share', (req, res) => {
  const message = 'Hello World!';
  const url = `https://web.whatsapp.com/send?text=${encodeURIComponent(message)}`;
  res.redirect(url);
});
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

<!-- Frontend: public/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>WhatsApp Share Button</title>
</head>
<body>
<a href="whatsapp://send?text=Hello%20World!">Share on WhatsApp Mobile</a>
<a href="/share">Share on WhatsApp Web</a>
</body>
</html>

WhatsApp の共有ボタンを使用してユーザー エクスペリエンスを向上させる

WhatsApp 共有ボタンを設置する際には、さまざまなデバイスでのユーザー エクスペリエンスを考慮する必要があります。対話するとき、モバイル ユーザーはデスクトップ ユーザーとは異なる動作をします。そのため、両方のプラットフォームの共有機能が完璧に動作することを保証することが重要です。ユーザーは、モバイルデバイスを使用するときに迅速かつ迅速なアクティビティを望んでいます。 WhatsApp アプリとの直接通信は、 whatsapp://send?text= URL スキーム。迅速かつ簡単な共有エクスペリエンスを提供します。

このスムーズなエクスペリエンスを PC 上で再現するのは困難です。 WhatsApp Web インターフェイスにアクセスする必要があるだけでなく、メッセージが準備され、送信の準備ができていることを確認する必要もあります。これには、慎重な URL 処理と正しいメッセージ エンコーディングが必要です。 encodeURIComponent。さらに、デスクトップ ユーザーは、共有ボタンに簡単にアクセスして表示できると便利だと感じるかもしれません。これは、ボタンのレイアウトとページ上の位置を慎重に計画することで実現できます。こうした細かい点に気を配ることで、使いやすく、すべてのデバイスでのエンゲージメントを高める共有機能を開発できます。

WhatsApp の共有ボタンに関するよくある質問

  1. 携帯電話に WhatsApp の共有ボタンを作成するにはどうすればよいですか?
  2. の中に href の属性 a タグを使用するには、 whatsapp://send?text= URL スキーム。
  3. WhatsApp Web の共有ボタンを機能させるにはどうすればよいですか?
  4. WhatsApp Web URL を作成し、それを開くボタン要素を利用します。 window クリック時のイベント。開く。
  5. どういうことですか encodeURIComponent として役立ちます？
  6. URL が適切にフォーマットされていることを保証するために、特定の文字をエスケープ シーケンスに置き換えることによって URI コンポーネントをエンコードします。
  7. 共有ボタンにバックエンドが必要な理由は何ですか?
  8. バックエンドは URL の作成とリダイレクトを管理できるため、より信頼性が高く適応性のある共有ソリューションを提供します。
  9. Express はどうやって res.redirect 関数？
  10. クライアントは、指定された URL にリダイレクトするリダイレクト応答を受け取ります。
  11. モバイル共有ボタンとウェブ共有ボタンを同時に使用できますか?
  12. はい、Web およびモバイル プラットフォーム用に独自のボタンをデザインしたり、スクリプトを使用してプラットフォームを識別し、URL を適切に変更したりできます。
  13. デスクトップ共有には次の使用が必要ですか? window.open?
  14. 確かに、 window.To make sure the message is transmitted, use the open WhatsApp Web 共有 URL で新しいタブを開くオプション。
  15. 共有ボタンをより見やすくするにはどうすればよいですか?
  16. Web サイト上でボタンを目立つように表示し、何を行う必要があるかを明確に示すテキストやアイコンを使用します。
  17. ユーザーのモバイル デバイスに WhatsApp がインストールされていない場合はどうなりますか?
  18. WhatsApp がインストールされていない場合は、ダウンロードするように求められ、共有の試みは失敗します。
  19. 共有リンクにあらかじめ書き込まれているメッセージを変更できますか?
  20. はい、メッセージを正しくエンコードし、URL 内のテキスト パラメーターを変更することで、メッセージを変更できます。

WhatsApp 共有ボタンの追加に関するまとめ

Web サイトに WhatsApp 共有ボタンを含めると、クロスプラットフォームのコンテンツ共有が容易になり、ユーザー エンゲージメントが向上します。 WhatsApp のデスクトップ版とモバイル版との互換性を確保するには、特定の URL スキームと JavaScript メソッドを使用する必要があります。さらに、Node.js バックエンドのサポートにより、信頼性が高く適応性のあるソリューションを提供できます。これらのことを考慮して、効果的でユーザーフレンドリーでありながら、使いやすさとリーチを向上させる共有機能を設計できます。