ホームページへ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

応用編カテゴリの最新記事