ウェブサイトやブログにLINEの友達追加ボタンを載せたい
iPhoneやアンドロイド端末だと簡単にQRコードなどでLINEの友達追加ができますが、パソコンでウェブサイトを作成したりブログ運営、
ホームページ制作をしている人はなかなかこの機会がなくて簡単にできるのかな?
できれば友達追加ボタンを設置したい!
と思っている方も多いと思います。
そこで今回そのお悩みを解決します。
LINEの友達追加ボタンを簡単に図解つきで設置する方法をお伝えしていきます。
LINE公式アカウントのメリット
- 友だち全員に届けたい情報や広告を一斉配信できる
- メールやSMSより開封率が高く登録が簡単、安心
- 常用している人が多く、他のSNSよりも発信を届けやすい
- 運用費は0円
準備するアプリ
①LINEのアカウント
![](https://try-garden.com/wp-content/uploads/2021/03/bandicam-2021-03-27-04-38-01-552.jpg)
常用しているLINEのアカウントが必要です。
ほとんどの方が利用されていると思いますが、ない場合はまず一番最初にダウンロードして作成してください。
②LINE公式アカウント(Official Account)
![](https://try-garden.com/wp-content/uploads/2021/03/bandicam-2021-03-27-04-34-09-065.jpg)
LINEで自分の運営している店舗、サイト、事業のお知らせやブランディングなどを告知できるアプリです。
LINEの友達追加ボタンをウェブサイトに設置する上で必須のアプリとなりますので必ずダウンロードしてください。
友達追加ボタンを設置する手順
iPhoneのスクリーンショットで説明
※LINEのアカウントを作成してある状態で説明します。
↓LINE公式アカウントアプリを開きます。
【LINEアプリでログイン】
をクリック
![](https://try-garden.com/wp-content/uploads/2021/03/S__4521990.jpg)
↓一度LINEのアプリへ移ります。LINEとの連携をします。
【許可する】
をクリック
![](https://try-garden.com/wp-content/uploads/2021/03/S__4521991.jpg)
↓LINE公式アプリを開くか尋ねられます。
【確認】
をクリック
![](https://try-garden.com/wp-content/uploads/2021/03/S__4521992.jpg)
↓説明が表示されます。
【通知をオンにする】
をクリック
![](https://try-garden.com/wp-content/uploads/2021/03/S__4521993.jpg)
↓アカウント名、業種、会社、メールアドレスなどを入力してきます。
※画像は後ほど変えられます。
入力が終わったら
【確認】
をクリック
![](https://try-garden.com/wp-content/uploads/2021/03/S__4521994.jpg)
↓入力内容に間違いがないか確認します。
【アカウントを作成】
をクリック
![](https://try-garden.com/wp-content/uploads/2021/03/bandicam-2021-03-27-05-01-24-359.jpg)
↓LINEの公式アカウントが作成されました。
【TOPに戻る】
をクリック
![](https://try-garden.com/wp-content/uploads/2021/03/bandicam-2021-03-27-05-04-29-362.jpg)
↓情報利用に関する同意についてをよく読み
【同意】
をクリック
![](https://try-garden.com/wp-content/uploads/2021/03/S__4521998-1.jpg)
↓使い方をチェックして
【ホーム】
に戻ります。
![](https://try-garden.com/wp-content/uploads/2021/03/bandicam-2021-03-27-05-07-53-099.jpg)
↓ホームに戻ったら
【友達を増やす】
をクリック
![](https://try-garden.com/wp-content/uploads/2021/03/bandicam-2021-03-27-04-48-50-544.jpg)
↓友達を増やすへ移動したら
【友達追加ボタン】
をクリック
![](https://try-garden.com/wp-content/uploads/2021/03/bandicam-2021-03-27-04-49-13-278.jpg)
↓友達追加ボタンをクリックしたら
【HTMLを表示】
をクリック
![](https://try-garden.com/wp-content/uploads/2021/03/bandicam-2021-03-27-04-49-27-762.jpg)
↓HTMLを表示したら
【コピー】
してサイトにHTMLとして貼り付けしてください。
![](https://try-garden.com/wp-content/uploads/2021/03/bandicam-2021-03-27-04-49-47-662.jpg)
~ウェブサイトのサーバー契約するなら~
Xサーバー
![](https://www13.a8.net/0.gif?a8mat=3B7GQG+6G73H6+CO4+6BU5T)
コノハウィング
![](https://www12.a8.net/0.gif?a8mat=3B7GQF+AEHP22+50+5SEKLD)
パソコンのワードプレスの画面で説明
↓+ボタンを押してブロックを追加します。
【カスタムHTML】
をクリック
![](https://try-garden.com/wp-content/uploads/2021/03/bandicam-2021-03-27-03-42-50-978.jpg)
↓【コピーしたHTMLを張り付け】
![](https://try-garden.com/wp-content/uploads/2021/03/bandicam-2021-03-27-03-43-20-272.jpg)
↓プレビューを確認して
【友達追加ボタン】
が追加されていればOK
※念のためプレビューから友達追加ページへ飛ぶか確認しておいて下ださい。
![](https://try-garden.com/wp-content/uploads/2021/03/bandicam-2021-03-27-03-43-54-553.jpg)
最後に
とても簡単に追加することができました。
これで来店時の連絡やメッセージ、お店の告知など簡単に行うことができるようになります。
ぜひご活用ください!