いまやコミュニケーションに欠かせないツールと言われている「LINE」ですが、ホームページでもこのようなボタンを見かけることはないでしょうか。こちらは「LINEで送る」ボタンと言い、Webサイトの情報をLINEの友だちやグループとシェアしたり、タイムラインに投稿できるボタンです。WebサイトのURLをLINEで簡単に伝えたい時などに有効です。このボタンは、みなさんのホームページにも簡単に設置することができますが、LINE公式ページで説明されている設置方法は2つあります。・まとめ「LINEで送る」ボタンを設置する2つの方法Webサイトにこのボタンの設置する方法は、LINE公式ページでアナウンスされていますが「Webサイトへの設置方法」と「技術仕様」の2パターンが説明されています。今回は以下のポイントに焦点をあて、どちらを使用したらよいのか、どのような違いがあるのか、それぞれのパターンで設置して比較してみました。※閲覧環境(使用するブラウザやバージョン)やLINEのログイン状況によって表示が異なる場合があります。「Webサイトへの設置方法」で設置したボタンをクリック(タップ)した際、送ることができるURLについて、LINE公式ページで以下のように説明されています。ボタンを設置したいページと、LINEで送りたいURLが異なる場合には「技術仕様」での設置を検討してみるとよいでしょう。URLは「LINEで送る」ボタンを呼び出した場所に自動的に設定されます。WebサイトのURLがhttps://example.comで、「LINEで送る」ボタン機能をhttps://example.com/test.htmlで呼び出した場合、「LINEで送る」ボタンはhttps://example.com/test.htmlにリンクされます。「Webサイトへの設置方法」で設置するボタンの表示は、以下から選択ができます。「技術仕様」で設置する場合にもボタンのデザインは同じようです。続いて、「Webサイトへの設置方法」で設置した「LINEで送る」ボタンを、LINEアプリがインストールされた環境とLINEアプリがインストールされていない環境でクリック(タップ)してみました。LINEアプリがインストールされた環境でクリックPC、スマホともにブラウザが開き、LINEのログイン画面が表示されました。お持ちのLINEアカウントでログインして手順をすすめます。LINEアプリがインストールされていない環境でクリック【PC】(左)ブラウザの別ウィンドウが開き、LINEのログイン画面が表示されました。ロゴから、LINEのアカウント(ログイン情報)が必要であることはわかりそうです。【スマホ】(右)ブラウザの別ウィンドウが開き、LINEのログイン画面が表示されました。LINEアプリのインストールリンクもあったので、戸惑うことなく操作できました。「技術仕様」で設置するボタンの表示は、以下から選択ができます。「Webサイトへの設置方法」で設置する場合にもボタンのデザインは同じようです。「技術仕様」で設置した「LINEで送る」ボタンを、LINEアプリがインストールされた環境とLINEアプリがインストールされていない環境でクリック(タップ)してみました。LINEアプリがインストールされた環境LINEアプリが起動しました。タイムラインに投稿するか、シェアする場合には友だちやグループを選択して送信します。【PC】LINEのサービスページに飛びました。なんでここに飛んでしまうんだろう?と困惑しそうです。【スマホ】端末によってエラーが表示されるケース(左/上)と、エラーが表示されないケース(右/下)がありましたが、LINEアプリが必要なことは伝わりそうです。LINEアプリのダウンロードリンクもあったので、戸惑うことなく操作できました。「Webサイトへの設置方法」と「技術仕様」選ぶポイント「Webサイトへの設置方法」と「技術仕様」のどちらで設置したらいいのか迷った場合は、次のポイントで選ぶとよいでしょう。「LINEアプリがインストールされていない環境で閲覧している人の考慮」は注意書きなどを行うと解決できそうです。LINEで送りたいURLと「LINEで送る」ボタンを表示したいページブラウザとLINEアプリどちらを起動したいかLINEアプリがインストールされていない環境で閲覧している人の考慮まとめいかがでしたか。「LINEで送る」ボタンについて、少し理解できたでしょうか?※上記は2017/02/09時点の内容です。最新の内容は、LINE公式のアナウンスをご確認ください。『グーペ』で「LINEで送る」ボタンを設置する方法もご紹介していますので、関連記事も合わせてご覧ください。【2020年1月】グーペの機能改善まとめホームページ作成サービス「グーペ」で行った、2020年1月の機能改善をお知らせします。「グーペ」で作成されたホームページの中から、優れているホームページを決定する『グー...グーペホームページ大賞ホームページ大賞2019【2019年12月】グーペの機能改善まとめホームページ作成サービス「グーペ」で行った、2019年12月の機能改善をお知らせします。ホームページ作成サービス「グーペ」...グーペホームページ大賞ホームページ大賞2019【2019年11月】グーペの機能改善まとめホームページ作成サービス「グーペ」で行った、2019年11月の機能改善をお知らせします。【2019年10月】グーペの機能改善まとめホームページ作成サービス「グーペ」で行った、2019年10月の機能改善をお知らせします。あなただけのホームページが1分で出来ます。はじめるツイートホームページ作成のヒントは「グーペ」のWebメディアでホームページをつくる上でのヒントや小ワザを、ホームページ作成サービス【グーペ】のスタッフがご紹介!書いている人は、Webディレクター、デザイナー、エンジニア、カスタマーサポートと職種もいろいろ。Console]の使い方、SNSアカウントの活用方法など幅広い記事をお届けします!ホームページをつくりたい、今あるホームページをもっとよくしたい、ホームページ運営に役立つツールを楽しく学びたい、といったみなさんの「やりたい」「知りたい」を応援します。