LoginSignup
55

More than 5 years have passed since last update.

PCもスマホも両方OKなLINEのカスタマイズシェアボタン

Last updated at Posted at 2017-10-07

追記:2018/04/13

いつのまにか公式にPC対応のカスタムアイコン用のシェアURLが提供されていました。

https://social-plugins.line.me/lineit/share?url={URL}

よって今後はこちらのURLを使ったほうがよさそうです。

以下内容は一応残しておきますが非推奨となります。


TL;DR

デザイナーさんから上がってきたデザインデータを見るとSNSのシェアボタンが公式のものではなく独自デザインの場合があるかと思います。そういったものに対応するためにみなさんは「シェアボタン カスタマイズ」や「シェアボタン デザイン 変更」などでググるなどします。そうすると以下のようなコードが見つかるのですがLINEだけは一癖があり………

:worried: よくあるLINEのシェアボタンコード :cold_sweat:

開発者のみなさんには何度も見慣れたコードかもしれません。

よくあるボタンのコード
<a href="http://line.me/R/msg/text/?[ページURL]">LINEでシェアするボタン</a>
  • スマホ
    • うまくリンクされる
  • PC
    • 対応していない
    • PC時のみ非表示にしたり……。

このように昔のコードなのでPC(ブラウザ版LINE)に対応していないのです…。

:calling: LINE it!(LINEで送る)ボタン :calling:

もちろん公式のボタンはPC対応で提供されていますね。しかし…

我々が求めていることができない仕様です。


ようするにPCの場合は諦めて公式ボタンか設置しないかの選択肢しかありませんでした。

本題 :point_down:

:grinning: PCスマホOKな新しいシェアボタン :grinning:

でも時代は変わり実は両方OKなボタンがあるのです!
こちらがPCもスマホも両方大丈夫なイケてるシェアボタンです!

PC/SP両方OKなボタン
<a href="https://timeline.line.me/social-plugin/share?url=[ページURL]">LINEでシェアするボタン</a>

URLはエンコードする必要があります

実際の感じ:writing_hand:

URLエンコードすると実際にはこのような感じになります。

実際の感じのコード(example.comの場合)
<a href="https://timeline.line.me/social-plugin/share?url=http%3A%2F%2Fexample.com%2F">LINEでシェアするボタン</a>

実際に試してみましょう :sparkles:

挙動はお手元の端末で体感したほうがわかりやすいので、実際にこのページをシェアしてみましょう!

:point_right:【LINEで送る】:point_left:

うまく表示されましたか?(されましたよね?)

PCでクリックすると↑のボタンはtarget="_blank"指定なので別タブでブラウザ版LINEのシェアページが表示されたと思います!(未ログインの場合はログイン画面)
スマホならブラウザからアプリに転移されると思います!

ご利用に関して

シェアボタンにはガイドラインがあります。

当記事の内容は『「LINEソーシャルプラグイン」利用ガイドライン』に従って用いられるものとし、当記事内容によっていかなる問題が生じた場合も一切の責任を負いません。

ご利用は各自でご判断ください。

それではよいホームページ作りを。 :information_desk_person:

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
55