LoginSignup
12
6

More than 3 years have passed since last update.

SNSのシェアURLで悩まない

Last updated at Posted at 2019-12-17

SNSのシェアURLは少し面倒臭い

SNSのシェアURLって少し面倒臭くないですか。
自分はいちいちググったり、公式のドキュメントとかみに行ったりしています。
エンコードしないといけないのも面倒臭い。
(しかもTwitter、Facebook、LINEでそれぞれ違うし)

ジェネレーター作った

悩む時間が勿体無いと思って、こんなものを作りました。

  • シェアしたいURL
  • シェアしたいテキスト

を入れて「変換する」を押下したらシェア用のURLを作ってくれるやつです。

pugで開発しているならこれでいい

実はpugはJSが書けるので、encodeURIComponent()が使えるんですよね。
なので、下記でいけます。

var share_url = https://hogehoge.co.jp //-シェアしたいURL
var share_text = ほげほげ //-シェアしたいテキスト

ひとまずシェアしたいURLとテキストを変数に入れておく。

Facebookならこう

a(href=`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(share_url)}`)

Twitterならこう

a(href=`https://twitter.com/share?url=${encodeURIComponent(share_url)}&text=${encodeURIComponent(share_text)}`)

LINEならこう

a(href=`https://line.me/R/msg/text/?${encodeURIComponent(share_text)}%20${encodeURIComponent(share_url)}`)

LINEはシェアURLが2種類ある

LINEのシェアURLって2パターンあります。
(もっとあるのかもしれませんが、僕の知る限り少なくとも2パターンあるんです)

https://line.me/R/msg/text/?(シェアするテキスト)%20(シェアするURL)

パターンAがこういうやつで

line://msg/text/?(シェアするテキスト)%20(シェアするURL)

パターンBこういうやつです。
挙動の違いは実際にリンクを叩いてみてください。

これの違いは、公式のドキュメントにも詳しく書いていあります。

どちらもLINEのアプリケーションを開こうとする挙動になるんですが、
line://から始まるパターンBは端末にLINEが
インストールされている前提の、スマホファーストな書き方なので、
汎用性が高いのはhttps://line.me/R/から始まるパターンAな気がします。

12
6
0

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
12
6