ブログのスマートフォンページに「LINEで送る」自作ボタンを設置

前回の記事では、スマートフォンの記事に関して、ページのタイトルとURLを公式Twitterアプリでツイート出来るボタンの作成及び設置方法を紹介しました。

今回はその続編です。今回はLINEで送るボタンを作成してみます。

僕自身は記事をLINEで送った事が無いのですが、最近では多くのサイトで「LINEで送る」ボタンを見かけます。

LINEは連絡手段アプリとして多くのシェアを占めていることから、このボタンが設置されることで読者の利便性が高まる事が期待できます。

「LINEで送る」ボタンは公式に用意されていますが、前回の記事で、適当なボタンなら作れる事がわかったので自作することにしました。

「押したら記事のタイトルとURLがセットされるLINEボタン」を作ってみましたので、FC2ブログにおけるその過程を記録しておきます。

スマートフォンページにLINEボタンを設置する方法

まずは、Pixelmatorで角丸アイコンを作成する方法で書いたように、LINE用のボタン画像を作成しました。

次に、このボタン画像にリンクを設置しました。

LINEにはテキスト内容を送るURLスキームが用意されています。設置したリンクは以下になります。
<a href="line://msg/text/<%topentry_title> <%topentry_link>"><img src="https://hibikanblog.net/wp-content/uploads/img/20140706031914dfa.png" /></a>

なお、<%topentry_title>と<%topentry_link>はFC2ブログの変数であり、それぞれページタイトル、ページURLに対応しています。

以上より作られたボタンは以下のように表示されます。

スマートフォンでボタンを押し、送信したい相手を選択すると、記事タイトルとURLがセットされて送信できます。

LINEで記事を送るボタンが作成できました。