LINEの友達追加ボタン

[taeko_m]

LINEの友達追加ボタンのソースコードをフッターのSNSアイコンあたりに置きたいと思っているのですが、

タグの差し込み箇所や方法を教えていただくことできないでしょうか。

現状のテーマはDebutです。

 

 

[Qcoltd · Accepted solution]

ご質問いただいている、LINEの友だち追加ボタンをフッターに追加する件ですが、

LINEが出している、友だち追加ボタンで発行されたコードを元に設定方法を記載させていただきます。

■LINE友だち追加ボタン発行ページ

https://developers.line.biz/ja/docs/line-social-plugins/install-guide/using-add-friend-buttons/

設定手順

1. 管理画面より「オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集」からコード編集画面を開きます。
2. コード編集画面の「ファイルを検索」エリアに、『footer.liquid』と入力しソートされたファイルを開きます。
3. footer.liquidファイル内で、『small--one-whole site-footer-item-tall』を検索してください。
4. その次の行に下記コードを貼り付けてください。
   赤字部分はLINE友だち追加ボタン発行ページで作成したコードに変更してください。
   <style>から</style>部分は友達ボタンの位置調整のために記載しています。
   <div class="line-it-button" data-lang="ja" data-type="friend" data-env="REAL"   data-lineId="@lineteamjp" style="display: none;"></div>
   <script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
   <style>
     .site-footer__social-icons {
       display:inline-block;
       vertical-align:top;
     }
     .line-it-button {
       margin-top:3px;
       margin-right:15px;
     }
     @media screen and (min-width: 990px) {
       .site-footer-item-tall {
         text-align: right;
       }
       .line-it-button {
         margin-top:10px;
       }
     }
   </style>
   

表示例

ご参考まで。
(キュー小坂)

[taeko_m]

こちらお返事をしておらず、申し訳ありません。大変助かりました！

無事表示されました、大変ご丁寧に解説いただきありがとうございました🙇‍♀️