グーペで「友だち追加」「LINEで送る」ボタンを設置する方法

この記事では、グーペで作成したホームページにLINEの「友だち追加」や「LINEで送る」ボタンをかんたんに設置する手順をわかりやすくまとめました。この記事どおりに進めれば、ホームページから友だちを増やす・記事を拡散する準備が整います。

準備：LINE公式アカウントでボタンのコードを用意する

友だち追加ボタン

ホームページにLINEの友だち追加ボタンを設置するには、LINE公式アカウントの管理画面でHTMLコードを発行し、それを貼り付けるのが最も確実な方法です。
「友だち追加」ボタンを設置すると、見ている人がワンタップでLINE公式アカウントを友だち登録可能です。  友だちになった相手へはメッセージ配信でお知らせやクーポンを直接届けられるので、再訪や実店舗への来店のきっかけを作りやすくなります。

LINE Official Account Managerにログインします。
画面上部のホームから「友だちを増やす > 友だち追加ガイド > ボタンを作成」と遷移していくと、HTMLが出力されています。こちらをコピーしてグーペの管理画面に登録します。

LINEで送るボタン

ホームページに「LINEで送るボタン」を設置するには、LINEヤフー社が提供する公式の「ソーシャルプラグイン」を利用するのが最も簡単です。ホームページを訪れた人がこのボタンをクリックすると、表示しているページのURLをLINEの友だちやグループに送ることができます。

LINE Developers（LINE Social Plugins）の「「LINEで送る」ボタンを設置する」の案内ページを開きます。

公式アイコンを選ぶか、カスタムアイコンを選んで、URLとデザインを指定してコード（あるいはリンク）を作成します。おすすめは公式アイコンを使用する方法です。

公式アイコンを使用する場合(おすすめ)

先ほどの「「LINEで送る」ボタンを設置する」の案内ページ内の「LINE公式アイコンを使用」から作成手続きを行います。

最後に「LINE Social Pulginsガイドラインに同意します」にチェックを入れるとHTMLが出力されています。こちらをコピーしてグーペの管理画面に登録します。

カスタムアイコンを使用する場合

カスタムアイコンを使用に記載の指示にしたがってください。

設置：グーペの「外部パーツ（ウィジェット）」に貼る

友だち追加ボタンやLINEで送るボタンをホームページに設置するには、グーペの外部パーツ機能を利用するのがおすすめす。

管理画面から外部パーツを開き、登録するを押します。

パーツの種類で「ウィジェット」を選び、ソースコード欄に先ほどコピーしたボタンのコードを貼り付けます。

ホームページを表示して、表示位置と動作を確認します。
※テンプレートによって表示場所は変わります。

よくあるつまずきと対処

• ボタンが出ない、押しても動かない
  • コードを途中で削っていないか、そのまま貼り付けたかを確認。
  • 「LINEで送る」カスタム方式なら「LineIt.loadButton()」を呼んでいるか確認。
• ログイン方法がいつもと違う
  • 2025年からビジネスIDに統合されています。案内に沿って設定・統合作業を進めてください。
• QRコードも載せたい
  • Official Account Managerの「友だち追加ガイド > 友だち追加QRコードを作成」で取得できます。印刷物や店頭POPにも便利です。
    • 詳しくは LINE公式アカウント（旧 LINE@） – 友だち追加ガイド｜LINEヤフー for Businessをご確認ください

まとめ

• 「LINEで送るボタン」はLINE Developersの手順に沿って準備
• 「友だち追加ボタン」はLINE公式アカウントを作成し、LINE Official Account Managerから作成
  • LINE公式アカウントの作成はLINE公式アカウント導入手順【キャプチャ付き】をご覧ください
• グーペで作成したホームページに「友だち追加」「LINEで送る」ボタンを設置するのは、管理画面にログイン後、「外部パーツ > ウィジェット」にコードを貼るで実現

この流れで設定すれば、サイトからの友だち追加とシェア拡散の土台づくりは完了です。コンテンツ更新やクーポン配信など、LINE運用の施策にも広げていきましょう。

ホームページ作成を検討している方へ

グーペなら、信頼度アップやブランド強化に有効な独自ドメインのホームページをどこよりも早く簡単に作成できます。