# Lineの友達追加ボタン **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [March 1, 2023, 9:24am UTC](https://community.shopify.com/t/line/196009 "2023-03-01T09:24:31Z")\ **Posts on this page:** 3\ **Page:** 1 ## AI-generated summary LINEの友達追加ボタンをShopifyテーマ「Debut」のフッターSNSアイコン付近に設置する方法についての質問と回答。 **解決方法:** - LINE公式の友だち追加ボタン発行ページでコードを取得 - 管理画面から「テーマ > コードを編集」で`footer.liquid`ファイルを開く - `small--one-whole site-footer-item-tall`を検索し、次の行にLINEボタンのコードを挿入 - CSSスタイルでボタンの位置調整(マージン、配置など)を行う **結果:** 質問者は詳細な手順説明により無事にボタンを表示できたことを報告。スクリーンショット付きで具体的な実装例が提供され、問題は解決済み。
**Author:** ![taeko\_m](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@taeko\_m](https://community.shopify.com/u/taeko_m)\ **Post date:** [March 1, 2023, 9:24am UTC](https://community.shopify.com/t/line/196009/1 "2023-03-01T09:24:31Z")
LINEの友達追加ボタンのソースコードをフッターのSNSアイコンあたりに置きたいと思っているのですが、 タグの差し込み箇所や方法を教えていただくことできないでしょうか。 現状のテーマはDebutです。 ![ja.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/1/a197d1e89497e0e8bf07a0c9e859c7a54356afce.png) ![スクリーンショット 2023-03-01 18.11.15.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/3X/d/b/db13a88d9e453030235124e43f781b513726911f.jpeg) ---
**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\ **Post date:** [March 3, 2023, 11:07am UTC](https://community.shopify.com/t/line/196009/2 "2023-03-03T11:07:08Z")
ご質問いただいている、LINEの友だち追加ボタンをフッターに追加する件ですが、 LINEが出している、友だち追加ボタンで発行されたコードを元に設定方法を記載させていただきます。 ■LINE友だち追加ボタン発行ページ [https://developers.line.biz/ja/docs/line-social-plugins/install-guide/using-add-friend-buttons/](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友だち追加ボタン発行ページで作成したコードに変更してください。から部分は友達ボタンの位置調整のために記載しています。 **.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;** **}** **}** **表示例** ![Qcoltd_0-1677841564351.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/a/0/d/a0d04d71427c94bde8837600e0344c1963d8bbfa.png) ご参考まで。 (キュー小坂) ---
**Author:** ![taeko\_m](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@taeko\_m](https://community.shopify.com/u/taeko_m)\ **Post date:** [December 12, 2023, 10:21am UTC](https://community.shopify.com/t/line/196009/3 "2023-12-12T10:21:30Z")
こちらお返事をしておらず、申し訳ありません。大変助かりました！ 無事表示されました、大変ご丁寧に解説いただきありがとうございました?‍ ♀