ホームページ作成「グーペ」 トップ » ホームページ作成お役立ち記事» SNS»LINE» 「LINEで送るボタン」「友だち追加ボタン」「いいねボタン」の違いをおさえて...
  • カテゴリー: SNSLINE
  • 2017年6月12日 月曜日

「LINEで送るボタン」「友だち追加ボタン」「いいねボタン」の違いをおさえて、ホームページに表示してみよう!

「LINE」が提供するホームページに表示できるボタンは、次の3種類あることをご存じですか。

  • LINEで送るボタン
  • 友だち追加ボタン
  • いいねボタン

くわしくは、「LINE」の公式ページでも案内されていますが、ホームページなどに表示されているこれらのボタンは「ページを閲覧する人」が利用するものです。
ホームページを運営する側では、これらのボタンをあらかじめ用意しておき、「閲覧する人」に利用してもらうことで、ホームページの拡散や集客・認知度アップにつながることになります。

今回は、ホームページ運営においてメリットの多い、この3種類のLINEボタンの特徴とホームページに表示する手順についてくわしくご説明します!

LINEボタンの種類について

まずは、「LINE」が提供する3種類のボタンの特徴を見ていきましょう。

■ LINEで送るボタン

Webページの情報をLINEの友だちやグループとシェアできるボタンです。

LINEで送るボタン

▽LINE公式ページ – LINEで送るボタン
https://media.line.me/ja/#lineitbutton

■ 友だち追加ボタン

ホームページ運営側において、ビジネス用や公式アカウントと言われるLINE@アカウントを作成されている場合に、「友だち追加」できるボタンです。LINE@アカウントから配信される情報を受け取りたい人が利用するボタンです。

友だち追加ボタン

▽LINE公式ページ – 友だち追加ボタン
https://media.line.me/ja/#addfriend

■ いいねボタン

いいねした人の「LINE」のホームに投稿され、タイムラインにながれます。「Facebook」では、いいねした人のホームに投稿され、ニュースフィードにもながれますが、このイメージです。

いいねボタン

▽LINE公式ページ – いいねボタン
https://media.line.me/ja/#likebutton

LINEボタンの設置方法

続いて、ホームページに実際に設置する方法です。
今回は、ホームページ作成サービス「グーペ」での設置を試してみました!「グーペ」をご利用の方はもちろん、みなさんのホームページに活かせそうな点は、ぜひご活用ください♪

■ LINEで送るボタンの設置方法

これまでは「Webサイトへの設置方法」と「技術仕様」の2種類のコードが用意されていた「LINEで送る」ボタンですが、2017/05/08時点のLINE公式ページでは、この「Webサイトへの設置方法」「技術仕様」といった表現がなくなっています。

<LINEページ>での操作

(1)ホームページに表示したいボタンを選択する

LINEで送るボタン

(2)ボタンを設置するホームページのURLを入力する
(3)コードをコピーする

LINEで送るボタン

<グーペ管理画面>での操作

(4)エディタを「HTML入力」モードにする
※画像をクリックすると大きい画像をご覧いただけます。

グーペ管理画面

(5)(3)でコピーしたコードを貼りつける

グーペ管理画面

動的WebサイトでLINEで送るボタンを呼び出す

▽LINE公式ページ – 設置方法
https://media.line.me/ja/how_to_install#lineitbutton

■ 友だち追加ボタンの設置方法

<LINEページ>での操作

(1)LINE公式アカウントもしくはLINE@アカウントのLINE IDを入力する (2)ホームページに表示したいボタンを選択する

友だち追加ボタン

(3)コードをコピーする

友だち追加ボタン

<グーペ管理画面>での操作

(4)エディタを「HTML入力」モードにする
※画像をクリックすると大きい画像をご覧いただけます。

グーペ管理画面

(5)(3)でコピーしたコードを貼りつける
※画像をクリックすると大きい画像をご覧いただけます。

グーペ管理画面

▽LINE公式ページ – 設置方法
https://media.line.me/ja/how_to_install#addfriend

■ いいねボタンの設置方法

<LINEページ>での操作

(1)ボタンを設置するホームページのURLを入力する
(2)ホームページに表示したいボタンを選択する

いいねボタン

(3)友だち追加ボタンのオプションを選択する

いいねボタン

(4)コードをコピーする

いいねボタン

<グーペ管理画面>での操作

(5)エディタを「HTML入力」モードにする
※画像をクリックすると大きい画像をご覧いただけます。

グーペ管理画面

(6)(4)でコピーしたコードを貼りつける
※画像をクリックすると大きい画像をご覧いただけます。

グーペ管理画面

▽LINE公式ページ – 設置方法
https://media.line.me/ja/how_to_install#likebutton

LINEボタンの使用方法(閲覧者側)

今回設置したLINEボタンですが、本記事の執筆者の環境では、LINEアプリではなく、Webブラウザが起動しLINEのログイン画面が表示されました。
LINE公式ページで、ユーザーフロー(LINEボタンの使用方法)として案内されている通りの動作かと思われますが、仕様の詳細についてはLINEへとご確認ください。

1.LINE Social Pluginボタンを選択
2.LINEログインでログイン
3.シェア先を選択(友だちとシェア・タイムラインに投稿)したり、友だち追加、いいねしたりする

いかがでしたか。上記のようなボタンを有効に取り入れることで、ホームページのURLの拡散や認知度アップにつながります。この機会に導入を検討してみてはいかがでしょうか♪
※上記は2017/05/08時点の内容です。最新の情報はLINE公式ページをご確認ください。

その他の関連記事