スマホアプリのレビューサイトや、攻略サイトなどはLINEで共有できるものが多いというか当たり前ですが、個人ブログでもLINEで共有できた方が、より多くの人にサイトを知ってもらうことができると思いせんか？
せっかくブログをしているのならより多くの人に知って貰いたい。ということで、LINE公式サイトで用意されている方法を使用することでも簡単にLINEで送るボタンなどを作成できますが、今回は、LINE URLスキームを使って、aタグの見た目をCSSでオリジナルのデザインにしていきたいと思います。
LINE URLスキーム
今回は「https://line.me/R/」のURLスキームを使用した方法で作成をしていきたいと思います。
使用できるURLスキーム一覧は公式サイトのこちらに一覧で掲載されているます。
公式サイトにもあるように、「https://line.me/R/」は、ユーザーがLINEをインストールしていない場合は、「Webブラウザが開き、LINEアプリのダウンロードを求めるページが開く。」ようになっているので、利便性が高いと思います。
msg/text/?
上記の「https://line.me/R/」に末尾にmsg/text/?を追加して、「https://line.me/R/msg/text/?」として?以降に共有したい文言を入れていきます。
公式サイトに「パラメータは必ずUTF-8を用いてURLエンコードしてください。」とあるので?以降の文言はUTF-8を用いてURLエンコードをする必要があります。ワードプレスで投稿の情報を取得して利用するには下記の方法でLINEで送るを利用できました。投稿ページでの利用を想定しています。
<a class="line" href="https://line.me/R/msg/text/?<?php echo urlencode(mb_convert_encoding(get_the_title(),"UTF-8","auto")); echo '%0A' . urlencode(mb_convert_encoding(esc_url(home_url($_SERVER['REQUEST_URI'])),"UTF-8","auto")); ?>" rel="nofollow">LINE</a>
タイトル、URL共にmb_convert_encodingで文字エンコーディングをUTF-8に変換後、urlencodeしています。%0Aは改行です。タイトルとURLの箇所で改行をしています。
URLエンコードについては、phpが使用できない環境であればJavaScriptのencodeURIComponent()を使用してするのが良いのかなと思います。
LINEで送るボタンをCSSを利用してオリジナルのデザインにする方法
.line {
background-color: #01b901;
border: 2px solid #01b901;
border-radius: 0;
color: #fff;
padding:4px 32px;
-webkit-transition: all .3s;
transition: all .3s;
}
.line:hover {
background-color: #fff;
color: #55acee;
}
twitterの時と同じように下記のようなボタンが作成されます。
丸ボタンがよければborder-radius: 0;のところに好きな数値を入れると丸まります。20pxを指定すると下記のようになります。
LINEの利用規約
LINEの利用規約の利用条件の2に
設置者は、LINEソーシャルプラグインボタンを外部サイトに設置する場合、専用アイコンを使用しなければなりません。但し、設置者は、専用アイコンの代わりに当社が指定するテキスト文字を使用することができます。
とあるので、指定されているテキスト文字以外での変更は規約違反になってしまうので注意が必要です。
以上がLINEで送るボタンをCSSを利用してオリジナルのデザインにする方法でした。