追記:2018/04/13
いつのまにか公式にPC対応のカスタムアイコン用のシェアURLが提供されていました。
https://social-plugins.line.me/lineit/share?url={URL}
よって今後はこちらのURLを使ったほうがよさそうです。
以下内容は一応残しておきますが非推奨となります。
TL;DR
デザイナーさんから上がってきたデザインデータを見るとSNSのシェアボタンが公式のものではなく独自デザインの場合があるかと思います。そういったものに対応するためにみなさんは「シェアボタン カスタマイズ」や「シェアボタン デザイン 変更」などでググるなどします。そうすると以下のようなコードが見つかるのですがLINEだけは一癖があり………
よくあるLINEのシェアボタンコード
開発者のみなさんには何度も見慣れたコードかもしれません。
<a href="http://line.me/R/msg/text/?[ページURL]">LINEでシェアするボタン</a>
- スマホ
- うまくリンクされる
- PC
- 対応していない
- PC時のみ非表示にしたり……。
このように昔のコードなのでPC(ブラウザ版LINE)に対応していないのです…。
LINE it!(LINEで送る)ボタン
もちろん公式のボタンはPC対応で提供されていますね。しかし…
- LINE社公式のボタン
- https://media.line.me/ja/how_to_install#lineitbutton
- PCスマホOK
- JS設置必須
- カスタマイズ不可
我々が求めていることができない仕様です。
ようするにPCの場合は諦めて公式ボタンか設置しないかの選択肢しかありませんでした。
本題
PCスマホOKな新しいシェアボタン
でも時代は変わり実は両方OKなボタンがあるのです!
こちらがPCもスマホも両方大丈夫なイケてるシェアボタンです!
<a href="https://timeline.line.me/social-plugin/share?url=[ページURL]">LINEでシェアするボタン</a>
URLはエンコードする必要があります
実際の感じ
URLエンコードすると実際にはこのような感じになります。
<a href="https://timeline.line.me/social-plugin/share?url=http%3A%2F%2Fexample.com%2F">LINEでシェアするボタン</a>
実際に試してみましょう
挙動はお手元の端末で体感したほうがわかりやすいので、実際にこのページをシェアしてみましょう!
【LINEで送る】
うまく表示されましたか?(されましたよね?)
PCでクリックすると↑のボタンはtarget="_blank"
指定なので別タブでブラウザ版LINEのシェアページが表示されたと思います!(未ログインの場合はログイン画面)
スマホならブラウザからアプリに転移されると思います!
ご利用に関して
シェアボタンにはガイドラインがあります。
当記事の内容は『「LINEソーシャルプラグイン」利用ガイドライン』に従って用いられるものとし、当記事内容によっていかなる問題が生じた場合も一切の責任を負いません。
ご利用は各自でご判断ください。
それではよいホームページ作りを。