2020.12.22  2021.04.05

LINE友達追加機能をサイトに埋め込む方法

皆さんこんにちは!マコブログです!

今回は、LINEの友達追加ボタンを埋め込みだけで簡単に設置する方法を紹介していきたいと思います。
LINE公式が準備しているプラグインの為、便利でユーザーから見てもわかりやすいデザインになっております。

友だち追加ボタンの実装

友達追加ボタンを設置したい場所に下記のコードをはりつけてください。

<script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
<div class="line-it-button" data-lang="ja" data-type="friend" data-lineid="@linejp" style="display: none;"></div>

たったのこれだけです。

上記のコードはLINE公式が準備している外部jsファイルを読み込んで、iframeタグを呼び出しています。

「data-lineid=”@lineteamjp”」という記述があると思いますが、@lineteamjpを自分のLineIDにしましょう。
動的に生成されるのであれば、<?php echo $LINE_ID; ?>をdata-lineidの中に入れるのもありです。
ただ、data-lineidが空の場合、ボタンは生成されないので注意してください。

ボタンのレイアウト調整はできませんが、スマホで使用すればユーザーにも伝わりやすいデザインです。
LINEへログイン状態であれば、友達追加画面にいどうできますので、QRコード画面に飛ばすよりもパフォーマンスが高いと思われます。



下記が公式のサイトになります。
https://social-plugins.line.me/ja/how_to_install

友達追加の他に「LINEで送るボタン」、「いいねボタン」が設置可能なので、公式ページをみて引用するのもありだと思います。

いかがでしたか?今回は、LINEの友達追加画面に遷移させるボタンの実装をしました。
読み込むjsファイルはLINE公式が準備しているものですので、安全性は高く、他のサイトでも使用されているので、是非この機会に利用してみましょう!

こちらの記事も是非チェックしてみてください↓
Google仕事検索を使って求人情報をアピールする方法

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →