More than 5 years have passed since last update.

LINE@の友達追加ボタンをフッターに表示させる

Posted at 2018-09-26

こんにちはです。ここで紹介するのは、GMOのミチルのような下部にLINE@の友達追加機能を持ったボタンを表示させる方法です。マーケティングにおけるLINE@の有効性はここでは述べませんが、メディアに自社のLINE@ 友達追加ボタンを掲出することで効率的にLINE@フォロワーを増やすことができます。

https://michill.jp/
(左下のようなUI)

ここでは簡易的なLINE@のアイコンを表示させるだけのUIを紹介します。（細かいデザイン調整は各自でよろしく）

HTML

アイコンはawesomefontのデザインを使うので、awesomefontのインストールをお願いします。（fab fa-line　の部分）

footer

<div id="to-line">
<a href="https://line.me/R/ti/p/%4XXX" title="LINE@へ"><i class="fab fa-line"></i></a>
</div>

#to-line {
	position: fixed;
	right: 20px;
	z-index: 99999;
	background:none;
	bottom: 30px;
}

.fa-line{　
color:green;
font-size:65px;
}

以上、不明点があれば@toku168までお気軽に聞いてください。