misallychan.com

雑記。はてブ、口コミ、WEBデザイン、アニメ・漫画についてとか。

「LINEで送る」シェアボタンで直接アプリを起動させる方法

今回は「LINEで送る」ボタンを押したらアプリが立ち上げられる記述をご紹介します。
f:id:misallychan:20170209174241p:plain

LINEのSocial Pluginsが配布されている

いつの間にかLINEのSocial Pluginsが公式で出てました。
media.line.me

前まではリンク方法しかなかったはずなので、Facebookのようにボタンを設置できるのは便利ですね。

ただし、設置してみるとブラウザでのログインが必要な仕様に・・・

こりゃ使えると思って早速実装してみたんですが、どうやらブラウザでログインをしてからシェアする仕様になっている様子。

公式でもユーザーフォローの部分にログインが明記されてますね。

ユーザーフロー
LINE Social Pluginボタンのユーザーフローは次の通りです。
LINE Social Pluginボタンを選択
LINEログインでログイン
シェア先を選択(友だちとシェア・タイムラインに投稿)したり、友だち追加、いいねしたりする

というわけで今回はこれ使いません。。便利なのに私が求めて機能はできませんでした。

そのままアプリが立ち上がったほうがユーザー的には便利では?

でも実際、いろんなサイトで実装されているボタンでは、そのままアプリが立ち上げられて便利だったし。
私だったらログインする行為なんてめんどくさいし。
一度ログインしていたら履歴は残るんだろうけどそういう人ばっかりじゃないし。
それにいちいちログインパスワードとか覚えてない人の方が多いだろうし

だからこれはあまりスマートな方法じゃないなあと思いました。
この手間だけで送るのをやめる人が出てくるだろうと。


そこで今回は「LINEで送る」ボタンを押したらアプリが立ち上げられる記述をご紹介します。

ボタンを押したらそのままアプリを立ち上げる。

色々調べたり試したりしてみましたが、結局過去のリンク方法が一番良さそう。
画像を準備する手間がありますが。

<a href="http://line.me/R/msg/text/?【タイトルやサイト名】
【URL】"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

WPのボタンを元にしてます。
【タイトルやサイト名】と書いたところにタイトルのテンプレートタグを入れたり、【URL】の部分にパーマリンクのタグを入れたりすれば表示されるので、普通に日本語入力でもいけるんじゃないかな。試してませんが。
私はSmartyを使ったのですが、Smartyのテンプレートでもイケました。


公式でボタン画像をDLできますが、スマホだと1/2のサイズにしないと画像が荒れます。
ただ、1/2のサイズにすると相当小さくなるので、もし大きなボタンにしたい時には作る必要が出て来ます。

ボタンを作る

公式でもロゴが配布されていますので、ポリシーに反しないようこれで作るのもありかもしれませんね。
英訳でしか出てないのですが……私は英語がわかりませんので責任は問いかねます…。

line.me

日本語で出してくれたら熟読して使うのにな〜笑

LINEで送るボタンが機能するかテストする

ボタンのテストが必要になりますね。
自分自身に送りたいけど、それってできないじゃないですか。

でも、自分だけで確認する方法あります。

自分一人しかいないグループを作るんです。

グループを作成したら、誰も招待しなければいい。
そして、送るボタンでグループから自分だけのグループを選択し、メッセージを送信すればテスト完了!!

ふっふっふ。これ、実際メモとかにも使えそうですね。


ぜひお試しあれ〜!