ホームページへLINE「友だち追加」ボタンを設置する

ホームページへLINE友だち追加ボタンを設置する

LINEのお友達追加ボタンをホームページに掲載する方法を説明します。

ホームページに「友だち追加ボタン」を掲載する場合は、「LINE公式アカウント」の利用登録が必要になります。

LINE公式アカウント開設方法

  1. LINE公式アカウントアクセスします。
  2. アカウントの開設をクリックします。
  3. LINE公式アカウントをはじめるをクリックします。
  4. LINEアカウントでログインをクリックします。
    ビジネスアカウントをお持ちのかたは、ビジネスアカウントでログインでも構いません。
    ※利用方法によっては、有料となりますのでご注意ください。(詳細はLINE公式アカウントサイトにてご確認ください。)
  5. ログインします。

友だち追加ボタンの作成・掲載方法

友だち追加ボタンのコードを取得する

  1. LINE公式アカウント管理画面の左メニューバーから
    友だちを増やす → 友だち追加ガイド の順でクリックします。
    HPへLINEお友だち追加ボタン1
  2. ボタンを作成するをクリックします。
    HPへLINEお友だち追加ボタン2
  3. コードが表示されますので、コピーをクリックし、コードをコピーします。
    HPへLINEお友だち追加ボタン3

ホームページへ友だち追加ボタンを設置する(コード貼り付け)

取得したコードをホームページ側へ設置する方法です。
今回は、サイドバーへ設置します。

  1. つくれるウェブで作成したホームページの管理画面にログインします。
  2. サイドバーが表示されているページを開きます。
  3. サイドバーに表示されている「+」ボタンをクリックします。
  4. レイアウト選択より 文章 をクリックします。
    HPへLINEお友だち追加ボタン4
  5. エディターのツールバーにある ソース をクリックして切り替えます。
    (ソースモードに切り替えることで、ソースコード(HTMLコード等)を貼り付けることができます。)
    HPへLINEお友だち追加ボタン5
  6. 先ほどのコピーしたコードを貼り付けたら、完了 をクリックします。
  7. 「お友だち追加ボタン」が表示されました。

友だち追加のQRコードを掲載する場合

  1. LINE公式アカウント管理画面の友だち追加ガイドを表示し、友だち追加QRコードを作成 をクリックします。
  2. QRコードが表示されますので、ダウンロード をクリックします。
    zip形式でダウンロードされますので、予め解凍しておいてください。

ホームページへ友だち追加のQRコードを設置する

  1. つくれるウェブで作成したホームページの管理画面にログインします。
  2. サイドバーが表示されているページを開きます。
  3. サイドバーに表示されている「+」ボタンをクリックします。
  4. レイアウト選択より 画像 をクリックします。
    HPへLINEお友だち追加ボタン2-3
  5. ダウンロードしたQRコードをアップし 完了 をクリックします。
  6. 「お友だち追加」のQRコードが表示されました。

掲載イメージ

 HPへLINEお友だち追加ボタン2-4