• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン

2013/03/13

書いた人:
katoppa!
カテゴリ:
HTML   Web制作
15,180 views

・ユーザ数が1億人を突破したLINE! ・「LINEで送る」、実装してみまSHOW! ・ここでちょっと注意! の、3本立てでお送りします。

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


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

どうも。katoppa!です。

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

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

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

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

http://media.line.naver.jp/howto/ja/

次に、幾つか生成するスクリプトの設定をしましょう。
まずボタンのタイプを選択します。
line01
更に「送るテキスト」を設定。特定の文字列をLINEで送る場合は「直接入力」を、サイトのタイトルとURLをLINEで送る場合は「ページタイトルとURLを使う」を選択してください。(よくわかんないという人は、とりあえず「ページタイトルとURLを使う」を選んでやってみましょう!)
line02
最後に、プレビューを確認して、問題なければソースコードをコピーしましょう。
line03

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

ここでちょっと注意!

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

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

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

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


この記事を読んだ人はこんな記事も読んでいます

<

>