- LINE公式アカウントの友だち追加ボタンはどうやって作るの?
- ホームページにLINE公式アカウントの友だち追加ボタンを設置したい
- LINE公式アカウントの管理画面の表示がスマホとパソコンと違ってわかりにくい
この記事では、LINE公式アカウントの友だち追加ボタンの作り方と、友だち追加ボタンをWebサイトやブログ、LP(ランディングページ)などに設置する方法を、スマホとパソコンにわけて初心者にわかりやすく解説します。
この記事を読むと、LINE公式アカウントの友だち追加ボタンをWebサイトやブログ上にコピー&貼り付けするだけで設置できることがわかり、友だち追加の導線を作ることができますよ。
LINE公式アカウントの友だち追加ボタンの作り方・設置方法
LINE公式アカウントの友だち追加ボタンの作り方と、Webサイトやブログなどに設置するおおまかな流れは以下のとおりです。
- 管理画面にログイン
- 「友だちを増やす」(または「友だち追加ガイド」)を選択
- 「ボタンを作成」を選択
- 友だち追加ボタンのHTMLをコピー
- URLを貼り付けたい場所に貼り付ける
友だち追加ボタンは、LINE公式アカウントの管理画面からHTMLソースコードを取得して、HTMLソースコードをWebサイトやブログなどに貼り付けると表示されます。
次に、LINE公式アカウントの友だち追加ボタンのHTMLの確認方法と、HTMLを貼り付ける手順をパソコンとスマホにわけて解説します。
LINE公式アカウントのQRコードと友だち追加URLが必要な方は、こちらをご参照ください。
![](https://linelab.jp/wp-content/uploads/2023/08/linelab-11.png)
![](https://linelab.jp/wp-content/uploads/2023/08/linelab-14.png)
スマホで友だち追加ボタンのHTMLソースコードを取得・貼り付ける方法
![](https://linelab.jp/wp-content/uploads/2023/08/undraw-1-1-768x403-1.png)
「LINEアプリで登録・ログイン」をクリックしてログインします。
![](https://linelab.jp/wp-content/uploads/2023/08/S__4808714-576x1024-1.jpg)
ログイン後、ホーム画面のメニュー項目の中から「友だちを増やす」をタップします。
![](https://linelab.jp/wp-content/uploads/2023/08/S__4808716-576x1024-1.jpg)
![](https://linelab.jp/wp-content/uploads/2023/11/S__5267472-576x1024.jpg)
![](https://linelab.jp/wp-content/uploads/2023/11/S__5267474-576x1024.jpg)
「コピー」をタップして、友だち追加ボタンのHTMLソースコードをコピーしてください。
![](https://linelab.jp/wp-content/uploads/2023/11/S__5267475.jpg)
コピーしたHTMLソースコードは、ブログやLPなど設置したい場所に貼り付けてください。
友だち追加ボタンを設置する方法について詳しく知りたい方は、こちらの記事をご参照ください。
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-3.png)
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-5.png)
パソコンで友だち追加ボタンのHTMLソースコードを取得・貼り付ける方法
![](https://linelab.jp/wp-content/uploads/2023/08/linelab-3.png)
![](https://linelab.jp/wp-content/uploads/2023/10/スクリーンショット-2023-10-04-11.00.00-1024x110.png)
「LINE公式アカウント」にある「管理画面にログイン」をクリックします。
![](https://linelab.jp/wp-content/uploads/2023/10/screencapture-lycbiz-jp-login-2023-10-04-11_01_51-1024x691.jpg)
![](https://linelab.jp/wp-content/uploads/2023/10/スクリーンショット-2023-10-04-11.17.44.png)
ログイン後、ホーム画面の左側にあるメニュー項目の中から「友だち追加ガイド」をクリックします。
![](https://linelab.jp/wp-content/uploads/2023/08/スクリーンショット-2023-08-09-17.26.39-768x396-1.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-06-5.50.52-1024x289.png)
「コピー」をタップして、友だち追加ボタンのHTMLソースコードをコピーします。
![](https://linelab.jp/wp-content/uploads/2023/11/screencapture-manager-line-biz-account-303akjlx-gainfriends-2023-11-06-05_52_52-1.png)
コピーしたHTMLソースコード、ブログやLPなど設置したい場所に貼り付けてください。
友だち追加ボタンの設置方法を詳しく知りたい方は、こちらの記事をご参照ください。
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-3.png)
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-5.png)
LINE Social Pluginsを使って友だち追加ボタンを設置する
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-06-11.35.34.png)
LINEヤフー株式会社の「LINE Developers(LINEディベロッパーズ)」が提供する「LINE Social Plugins(LINEソーシャルプラグイン)」の利用ガイドラインに同意すると、上記のような友だち追加ボタンのHTMLソースコードを取得することができます。
詳細は、LINE Developers「友だち追加」ボタンを設置する」をお読みください。
友だち追加ボタンの設置方法を詳しく知りたい方は、こちらの記事をご参照ください。
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-3.png)
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-5.png)
まとめ
この記事では、スマホとパソコンそれぞれの、LINE公式アカウントの友だち追加ボタンの作り方とWebサイトやブログ、LPなどに設置する方法を解説しました。
- 管理画面にログイン
- 「友だちを増やす」を選択
- 「ボタンを作成」を選択
- 友だち追加ボタンのHTMLソースコードをコピー
- コピーしたHTMLソースコードをブログ等貼り付けたい場所に貼り付ける
- 管理画面にログイン
- 「友だち追加ガイド」を選択
- 「ボタンを作成」を選択
- 友だち追加ボタンのHTMLソースコードをコピー
- コピーしたHTMLソースコードをブログ等貼り付けたい場所に貼り付ける
LINE Developers「友だち追加」ボタンを設置する(利用ガイドラインに同意が必要)
関連記事
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-3-300x158.png)
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-5-300x158.png)
![](https://linelab.jp/wp-content/uploads/2023/08/linelab-11-300x158.png)
![](https://linelab.jp/wp-content/uploads/2023/08/linelab-14-300x158.png)