タグアーカイブ リンク

WhatsAppボタンがモバイルで機能しない原因とゼロ幅スペースの除去方法

WhatsAppボタンがモバイルで機能しない原因とゼロ幅スペースの除去方法

WhatsAppボタンをスマホでタップしても「その電話番号はWhatsAppに登録されていません」と表示され、リンクが機能しないときは、URLに目に見えないゼロ幅スペース(%E2%80%8B)が紛れ込んでいる可能性が高い。対象プラグインを最新版に更新し、設定画面で保存し直すだけで解消できる。

ワッツアップボタンがモバイルで反応しない原因はゼロ幅スペース

ワッツアップボタンがモバイルで反応しない原因はゼロ幅スペース

WhatsAppボタンのリンクに「ゼロ幅スペース」と呼ばれる不可視の文字が混入すると、モバイル版WhatsAppが電話番号を正しく認識できなくなる。ゼロ幅スペースは、画面上では見えないままURLの一部として送信されるため、一見すると正しいリンクに見える。

具体的には、電話番号の直後に%E2%80%8Bというエンコードされたゼロ幅スペースが付与されると、WhatsApp側で「番号に不正な文字が含まれる」と判断される。ブラウザで直接リンクを開くと動作するのは、デスクトップ版や一部の環境でゼロ幅スペースを無視するためだ。

この問題は、プラグインがWhatsAppリンクを自動生成する際に、プリフィルドメッセージ(あらかじめ入力されるメッセージ)と電話番号の結合処理で発生しやすい。特に、電話番号フィールドの末尾に目に見えないホワイトスペースや手動コピー由来の文字が混入すると、リンク全体が壊れる。

ゼロ幅スペースを除去してWhatsAppリンクを正常化する手順

ゼロ幅スペースを除去してWhatsAppリンクを正常化する手順

多くの場合、プラグインのアップデートでこの自動生成ロジックが修正されている。以下の手順で解決できる。

STEP 1 WordPress管理画面からプラグインを最新版に更新する
↓
STEP 2 フローティングボタン設定画面のWhatsAppタブを開く
↓
STEP 3 電話番号フィールドとプリフィルドメッセージを確認し、保存をクリックする
↓
STEP 4 スマホでWhatsAppボタンをタップし、正常に開くことを確認する

更新後は、念のため一度設定画面を開いて保存し直すことで、古いキャッシュや設定値が残っていても新しいリンク生成ロジックが適用される。

リンクに含まれるゼロ幅スペースを手動で確認する方法

ブラウザのデベロッパーツールを使うと、実際にボタンに設定されているリンクを確認できる。電話番号の直後に「%E2%80%8B」という文字列が見えたら、それが原因だ。正常なリンクは次のようになる。

正しいリンク
https://wa.me/49208883522?text=Hello

不正なリンク
https://wa.me/49208883522%E2%80%8B?text=Hello

ゼロ幅スペースは見た目に存在しないため、コピー&ペーストで気づかないことがほとんどだ。リンクをメモ帳などのプレーンテキストエディタに貼り付けて、カーソルを動かすと不自然な停止がある場合もある。

プラグインを更新した後も直らない場合の確認ポイント

プラグインを更新した後も直らない場合の確認ポイント

更新や保存後にも改善しないときは、次を順にチェックする。

電話番号フィールドに隠れた空白や全角文字が残っていないか

設定画面の電話番号フィールドに、コピー&ペースト時に混入した半角スペースや改行、全角数字が含まれていると、ゼロ幅スペースとは別にリンクが壊れる原因になる。電話番号は半角数字のみで入力し、先頭の「+」は国番号として正しく付ける。

プリフィルドメッセージを空にして保存できるか

古いバージョンでは、プリフィルドメッセージを空にできない仕様のプラグインがあった。メッセージ欄に自動挿入される文字列が原因でゼロ幅スペースが付与されるケースでは、メッセージを完全に空にして保存できるか確認する。空にできない場合は、メッセージを短い英数字のみに変更して様子を見る。

ブラウザキャッシュとCDNキャッシュを削除する

設定を保存しても、ブラウザやCDN(コンテンツデリバリネットワーク / 配信網)に古いリンクがキャッシュされていると、スマホでは以前の不正なURLが読み込まれる。キャッシュを削除してから再度確認する。

よくある質問

ゼロ幅スペースとは何か

ゼロ幅スペース(Zero-width space)とは、幅を持たない特殊な空白文字だ。主にテキストの改行位置を制御するために使われるが、URLに混入すると端末やアプリが正常に解釈できなくなる。

WhatsAppボタンだけが機能しなくなる理由は

WhatsAppのモバイルアプリは電話番号のパース処理が厳格で、番号の直後に不正な文字があると認識エラーを返す。他のSNSボタンは許容する場合が多く、問題が顕在化しにくい。

デスクトップでは動作するのにモバイルで失敗するのはなぜか

デスクトップ版WhatsAppやブラウザは、ゼロ幅スペースを含むURLを自動的に無視したり正規化する処理が入るため、同じリンクでも動作する。モバイルアプリはより厳密にURLを検証する。

プラグインを更新せずに手動で修正できるか

可能ではある。デベロッパーツールで該当のボタンのHTMLを編集し、URLからゼロ幅スペースを取り除けば一時的に動く。ただし、テーマやプラグインの更新で元に戻るため、恒久対応としてはプラグイン本体のアップデートが推奨される。

この記事のポイント

  • WhatsAppリンクにゼロ幅スペースが混入するとモバイルで番号が認識されない
  • プラグインの最新版では電話番号とプリフィルドメッセージの生成処理が修正されている
  • 設定画面を開いて保存し直すだけで新しいリンク生成ロジックが適用される
  • 改善しない場合は電話番号の全角文字や空白、キャッシュを確認する
  • プリフィルドメッセージを空にできると今後の再発防止につながる