「LINEで送る」ボタンを設置する

「LINEで送る」ボタンの設置方法

最近のシェアの主流とも言える「LINEで送る」ボタン

今回はその設置方法をまとめておく。

LINEの公式サイトから作成する

まず1つ目の方法として、LINEの公式サイトのジェネレータから作成する方法。

以下のページから作成することができる。

LINE Social Plugins #LINEで送るボタン
https://media.line.me/ja/how_to_install#lineitbutton

手順としては以下の通り。

  1. 「LINEで送る」ボタンに設定したいURLを入力する
  2. 生成されたソースコードを自分のホームページなどに貼り付ける
  3. スクリプトタグを同ページに貼り付ける

とってもカンタン。

自由なデザインで作成する(URL指定)

公式ジェネレータでは、決まったデザインで使いにくい。
という場合は、以下のURLで「LINEで送る」ボタンを設置することが可能。

http://line.me/R/msg/[text or image]/?[data]

[text or image]には、送信データの種類を入力する。
文字ならtext、画像ならimageと入力。

[data]には、送信内容を入力する。
文字なら半角の場合はそのまま、全角ならエンコードして入力。
画像ならファイルパスを入力。

サンプルタグ
<a href="http://line.me/R/msg/text/?https://www.out48.com"><img src="[画像パス]"></a>

まとめ

ジェネレータ版とURL版では動きが若干違うけど、アイフォンで確認したところ、どちらも動いた。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です