Edited at

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

More than 1 year has passed since last update.


追記:2018/04/13


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

https://social-plugins.line.me/ja/how_to_install#lineitbutton

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対応で提供されていますね。しかし…

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


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


本題


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

でも時代は変わり実は両方OKなボタンがあるのです!

こちらがPCもスマホも両方大丈夫なイケてるシェアボタンです!


PC/SP両方OKなボタン

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



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



実際の感じ

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


実際の感じのコード(example.comの場合)

<a href="https://timeline.line.me/social-plugin/share?url=http%3A%2F%2Fexample.com%2F">LINEでシェアするボタン</a>



実際に試してみましょう

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




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

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

スマホならブラウザからアプリに転移されると思います!


ご利用に関して

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

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

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

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