web

備忘録:LINEで送るボタンの設置方法。aタグにはターゲット指定を。

最近公式にリリースされたLINEで送るボタンについてちょっと仕事で調べる機会があったので今後のためにメモします。

公式の設置方法|LINEで送るボタン はてなブックマーク - 設置方法|LINEで送るボタンにて記述例をコピペしたところ何やら変な動き?

記事上でLINEで送るボタンを押すと当然アプリが立ち上がるんですが、 LINEでの共有が終わったあとブラウザに戻ると、そこにはLINEのサイトが開かれていました。

まぁ何も不思議なことではなくて、公式にも

ボタンタップ後、LINEが起動する前にWebブラウザが表示されます。

とあるようにそういう仕様なので、LINEで送るボタンのaタグにtarget=”_blank”を指定してあげればとりあえずはOKです。

記述例

Webサイトの場合
<a href="http://line.naver.jp/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.naver.jp%2F" target="_blank"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>
WordPressのテンプレートに記述する場合
<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?$gt;%0D%0A<?php the_permalink(); ?>" target="_blank"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

これでよし :)

直接LINEアプリを開く方法

そもそもLINEのサイトを開かずにURLスキームで直接アプリを開く方法が以下のブログで紹介されていました。

参考:【WordPress】ブログに「LINEで送る」ボタンを付ける方法 | しらさかブログZ はてなブックマーク - 【WordPress】ブログに「LINEで送る」ボタンを付ける方法 | しらさかブログZ

こっちのがもたつかないし便利ですね。さすがシラサカさん。
ただしこちらの場合アプリが入っていない端末では正常に動かないので注意

LINEで送るボタン設置時の注意点

最後に注意点を。
ガイドラインにある通り、LINE側が用意した5種類のボタン画像以外の使用は認められていないようです。気をつけなくては。。

以上、霙でした。

参考:LINEで送るボタン|メディア運営者の方へ はてなブックマーク - LINEで送るボタン|メディア運営者の方へ

参考:ガイドライン|LINEで送るボタン はてなブックマーク - ガイドライン|LINEで送るボタン