携帯電話のWebページのリンクをクリックしたときに通話をトリガーする方法


493

モバイルデバイス用のWebページを作成する必要があります。まだ理解していないことが1つだけあります。テキストをクリックして電話をかけるにはどうすればよいですか。

mailto:メールのタグのように入力できる特別なURLはありますか?

デバイス固有のソリューションは好ましくありません。

iPhoneが電話番号を自動的に認識してリンクを作成することはわかっていますが、これを画像やほとんどのモバイルデバイスにも適用できればすばらしいと思います。

回答:


868

最近のほとんどのデバイスはtel:スキームをサポートしています。だから使用して<a href="tel:555-555-5555">555-555-5555</a>、あなたは行くのが良いはずです。

画像に使用したい場合は、<a>タグを使用して、<img/>配置された他の通常の状況と同じように配置できます。<a href="tel:555-555-5555"><img src="path/to/phone/icon.jpg" /></a>


12
これはデスクトップ用にどのようにダウングレードされますか?あなたは明らかにこれがデスクトップへのリンクを伝えたくないのですか?または、ブラウザでスニッフィングして囲みタグを削除する必要がありますか?
3Dom 2013年

9
@ 3Domお試しください。起動するか、電話プログラムを要求します。
Cees Timmerman

1
@ 3DomデスクトップAurora 29.0a2(2014-02-07)では問題ありません。画像リンクを使用して電話をかけ(Andrewの回答を参照)、その横にプレーンテキストで番号を付けることができます。
Cees Timmerman、2014

2
将来の参考のために:OS X Yosemite以降では、これによりFacetimeアプリが起動し、ユーザーがiPhoneを持っている場合は、デスクトップ/ラップトップで実際に電話をかけることができます。
Jeff Huijsmans、2015年

8
こんにちは。プラス記号と国コードを次のように配置することを忘れないでください。Skypeを使用する場合、+ 1-555-555-5555はインスタントダイヤリングに必須です。
Samuel Ramzan

59

適切なURLスキームはtel:[number]なので、

<a href="tel:5551234567"><img src="callme.jpg" /></a>

45

完全を期すために、ここに回答を追加します。

<a href="tel:1234567">Call 123-4567</a>

ほとんどのデバイスで問題なく動作します。ただし、デスクトップでは、これはクリックしても機能しないリンクとして表示されるため、モバイルデバイスでのみ条件付きで表示されるようにCSSを使用することを検討する必要があります。

また、Skype(かなり一般的)はデフォルトで異なる構文を使用することを知っておく必要があります(ただし、tel:を使用するようにパラメーター化できます)。

<a href="callto:1234567">Call 123-4567</a>

ただし、最新のモバイルブラウザー(Androidでは確実にわかっていtelます)では、構文は呼び出しアクションを完了するために使用できる利用可能なアプリケーションのポップアップを提供するはずです。


urlで、Androidで共有ダイアログを開く方法を知っていますか?
2015年

@whizcreed申し訳ありませんが、私の地域ではありません。
vvohra87 2015年

4
「tel」プロトコルはSkypeで機能しますか、それとも「callto」プロトコルのみで機能しますか?
ハッチムーア

@HutchMoore「tel:」接頭辞をSkypeに関連付けることができます。「CALLTO:」との通話を開始することができ、Skypeのパラメータ(オプションの横にあるオプションがあります。プレフィックスは
salcoin

20

クリック可能なスマートフォンリンクコード:

次のリンクを使用して、クリック可能な電話リンクを作成できます。以下のコードをコピーしてWebページに貼り付け、電話番号で編集できます。このコードはすべての電話で機能するわけではありませんが、iPhone、Droid / Android、およびBlackberryで機能します。

<a href="tel:1-847-555-5555">1-847-555-5555</a>

電話番号リンクは、上記のようにダッシュを付けて、または付けずに使用できます。また、次の例でも使用できます。

<a href="tel:18475555555">1-847-555-5555</a>

この例のように、電話番号が「tel:18475555555」で設定されている限り、リンク内の任意のテキストを使用することもできます。

<a href="tel:18475555555">Click Here To Call Support 1-847-555-5555</a>

以下は、チェックアウトできるクリック可能な電話のハイパーリンクです。電話以外のほとんどのブラウザでは、このリンクから「ウェブページを表示できません」というエラーが表示されるか、何も起こりません。

注: iPhone Safariブラウザーはページ上の電話番号を自動的に検出し、このページのコードを使用せずにテキストを通話リンクに変換します。

WTAIスマートフォンリンクコード:WTAIまたは「ワイヤレステレフォニーアプリケーションインターフェース」リンクコードを以下に示します。このコードは正しい携帯電話プロトコルと見なされ、Droidなどのスマートフォンで機能しますが、iPhoneのApple Safariでは機能しない可能性があるため、上記のコードをお勧めします。

<a href="wtai://wp/mc;18475555555">Click Here To Call Support 1-847-555-5555</a> 

3

基本的に、が前に付いた電話番号を指すattrを持つ<a>要素を使用hreftel:ます。プラスは国コードを指定するために使用でき、ハイフンは人間の目のためだけに含めることができることに注意してください。

MDN Webドキュメント

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Creating_a_phone_link

HTMLの<a>要素(またはアンカー要素)は、そのHREF属性と一緒に、他のウェブページ、ファイル、同じページ内の位置、電子メールアドレス、または任意の他のURLへのハイパーリンクを作成します。

[…]

電話リンクを提供することは、電話に接続されたWebドキュメントおよびラップトップを表示するユーザーに役立ちます。

<a href="tel:+491570156">+49 157 0156</a>

IETFドキュメント

https://tools.ietf.org/html/rfc3966

tel電話番号のURI

「tel」URIの構文は次のとおりです。

telephone-uri = "tel:"電話加入者

[…]

tel:+1-201-555-0123:このURIは、米国の電話番号を指します。ハイフンは、数値をより読みやすくするために含まれています。国、市外局番、加入者番号が分かれています。

tel:7042;phone-context=example.com:URIは、「example.com」のコンテキスト内で有効な市内電話番号を示します。

tel:863-1234;phone-context=+1-914-555:URIは、特定の電話プレフィックス内で有効な市内電話番号を示します。


0

HTMLアンカータグ<a>を使用し、属性hrefをで開始するだけですtel:。国番号から電話番号を始めることをお勧めします。次の例に注意してください。

<a href="tel:+989123456789">NO Different What it is</a>

この例では、国コードは+98です。

ヒント:携帯電話に非常に適しています。macOSでのtel:プレフィックスコールは知っていますFaceTimeが、Windowsではわかりませんが、Skypeを起動する原因となったと思います。

詳細情報ブラウザでサポートされているURLスキームのリストにアクセスして、すべてのhref値のプレフィックスを確認できます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.