「LINEで送る」ボタンを実装する方法

ユーザ数が1億人を突破したLINE！

どうも。katoppa!です。

LINEのユーザ数が1億人を突破したというニュースは耳に新しい話題ですね。
「LINE」登録ユーザー数が世界1億人を突破、各種記念キャンペーンを開始 – インターネットコム

（※NHN Japan Corporation | 「LINE」、世界1億ユーザーを突破より引用）

若年層への浸透率も高いLINEは、Web業界でも今や看過できない重要なソーシャルツールになっています。そんなLINEへURLやテキストを送ることができる「LINEで送る」ボタンが、公式にリリースされていますよ。

今回はそのボタンの実装方法をご紹介します。

「LINEで送る」、実装してみまSHOW！

まずは公式サイトのページへアクセス！
設置方法｜LINEで送るボタン

次に、幾つか生成するスクリプトの設定をしましょう。
まずボタンのタイプを選択します。

更に「送るテキスト」を設定。特定の文字列をLINEで送る場合は「直接入力」を、サイトのタイトルとURLをLINEで送る場合は「ページタイトルとURLを使う」を選択してください。（よくわかんないという人は、とりあえず「ページタイトルとURLを使う」を選んでやってみましょう！）

最後に、プレビューを確認して、問題なければソースコードをコピーしましょう。

あとは、HTMLファイルの「LINEで送る」を実装したい箇所に先ほどのソースコードをペーストするだけ。

ここでちょっと注意！

facebookのいいね！ボタンや、twitterのツイートボタンとは少し異なる点がありますので、お気をつけください。
実は、「LINEで送る」というボタンは、現在スマートフォンのみで利用できるボタンです。PCサイトで実装しても、LINEで送ることができず、LINE公式サイトが表示されます。

PCサイトで表示してもユーザの混乱を招く結果になるかもしれませんので、「スマホで見た場合のみ表示する」など、工夫する必要がありそうです。

その他にも、文字列やURLは、エンコードをUTF-8にしておく必要があります。そうでない場合、文字化けしてしまうとのこと。

以上です！
正しく使って楽しくユーザビリティを高めましょうー。