ホームページにLINEボタンを埋め込む方法について

2024年7月23日

ホームページにLINEボタンを埋め込む方法について、詳しく説明します。

LINEボタンを追加することで、訪問者が簡単にLINEでコンテンツを共有したり、LINEアカウントと連携したりすることができます。

LINEのシェアボタンを追加する

LINEのシェアボタンを使うと、訪問者が簡単にページをLINEの友達やグループに共有できます。

以下はその手順です。

手順

LINEのシェアボタンのスクリプトを追加

HTMLの<head>タグ内に以下のスクリプトを追加します。

<head>
  ...
  <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
</head>

LINEのシェアボタンを埋め込む

HTMLの<body>タグ内の適切な場所に以下のコードを追加します。

<body>
  ...
  <div class="line-it-button" data-lang="ja" data-type="share-a" data-ver="3" data-url="https://example.com" data-color="default" data-size="large" data-count="false" style="display: none;"></div>
  <script>
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (!d.getElementById(id)) {
        js = d.createElement(s); js.id = id;
        js.src = "https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js";
        fjs.parentNode.insertBefore(js, fjs);
      }
    }(document, 'script', 'line-it-button-script'));
  </script>
</body>

パラメータの説明

data-lang: 言語設定（例: “ja” for Japanese）
data-type: ボタンの種類（”share-a” はシェアボタン）
data-url: シェアするURL（例: “https://example.com”）
data-color: ボタンの色（”default” または “white”）
data-size: ボタンのサイズ（”small”, “medium”, “large”）
data-count: シェア数を表示するかどうか（”true” または “false”）

LINEの公式アカウント友だち追加ボタンを追加する

LINE公式アカウントの友だち追加ボタンを設置すると、訪問者が簡単にあなたのLINE公式アカウントを友だち追加できます。

手順

LINEの友だち追加ボタンのスクリプトを追加

HTMLの<head>タグ内に以下のスクリプトを追加します。

<head>
  ...
  <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
</head>

LINEの友だち追加ボタンを埋め込む

HTMLの<body>タグ内の適切な場所に以下のコードを追加します。

<body>
  ...
  <div class="line-it-button" data-lang="ja" data-type="friend" data-lineid="@YOUR_LINE_ID" data-count="false" data-home="true" style="display: none;"></div>
  <script>
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (!d.getElementById(id)) {
        js = d.createElement(s); js.id = id;
        js.src = "https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js";
        fjs.parentNode.insertBefore(js, fjs);
      }
    }(document, 'script', 'line-it-button-script'));
  </script>
</body>