fwywd

Twitter のシェアリンクに指定したテキストを JavaScript でエンコードする方法

 2021/05/28
Twitter のシェアリンクに指定したテキストを JavaScript でエンコードする方法

はじめに

どーも、入田 / ぐるたか @guru_taka です！
先日 Vue.js & Nuxt.js から React & Next.js へ移行した理由 を Twitter の SNS ボタンでシェアすると、テキストが正しく表示されないと、Twitter でご指摘がありました。
▼ 現象
bad_tweet_sns_text
▼ 理想
good_tweet_sns_text

原因

原因は & を %26 にエンコードしなかったからです。Twitter のシェアリンクにおいて、text パラメータに & が挿入されていると、別パラメータと認識されてしまいます。
https://twitter.com/intent/tweet?text=${title}&url=${url}&hashtags=${hashtag1}, ${hashtag2}...
そのため、 & の直前である Vue.js で途切れてしまい、それ以降の文字はツイート画面に表示されませんでした。

結論

解決策は JavaScript の標準組み込みオブジェクトである encodeURIComponent 関数を使うだけです。引数に値を渡すと、UTF8 ベースでエンコードされた値が返ってきます。
https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}
& だけでなく、?, /, # など URI で意味をもつ特定の文字もエンコードされます。
基本的に SNS のシェアリンクに対し、各パラメータに値を渡す時は encodeURIComponent 関数でエンコードすると良さそうです！
※ URL と URI の違いについては、下図を参考にしてみてください。
uri_url_urn
 出典：URI とは？「URL」と「URI」の違いを解説！｜ ferret

最後に

今回は encodeURIComponent 関数を用いて、エンコードする方法を紹介しました。わざわざ自前でエンコードするための関数を用意しなくて良いのは嬉しいですね！
URI で意味をもつ特定の文字をエンコードせず、URI として機能をもたせる encodeURI 関数もあります。気になる方は下記事をチェックしてみてください！ 参考：encodeURI() - JavaScript | MDN
株式会社キカガク コンテンツマーケティング責任者
入田 / ぐるたか
twitter: @guru_taka

参考文献

前の記事

GitHub でデフォルトのブランチを main から develop へ変更した後に main ブランチを削除から守る方法

次の記事

Azure Active Directory B2C でユーザー認証を超簡単に実装しよう

運営会社

|

プライバシーポリシー

|

お問い合わせ

fwywd white logo

©︎ 2021 kikagaku