SNSに投稿する文字列をURIエンコードしたときのメモ

2016年9月14日 水曜日
201609uri
オリジナルのボタンで各種SNSに投稿する際、付与する日本語テキストを含む情報をURIエンコードしたときに少しハマったときのメモです。


結果からいうとencodeURIComponentをかける範囲によって挙動不審な動きをしてしまったという。

失敗例

まずは共通のhtmlとしてボタンを設置します。
今回はFacebook、Twitterと最近増えてるLINEのボタンを。

<div id="sns-area">
<a class="Facebook" href="#" target="_blank">シェア</i></a>
<a class="Twitter" href="#" target="_blank">ツイートする</a>
<a class="Line" href="#" target="_blank">LINEで送る</a>
</div>

そしてすぐ後などにjavascriptを記述します。

<script>
var text = encodeURIComponent("SNSに投稿する文字列をURIエンコードしたときのメモ)");
var pageurl = "http://lettuce-eater.com/blog/?p=364";
var Facebook_url = encodeURIComponent("http://www.facebook.com/sharer.php?u=" + pageurl + "&t=" + text);
var Twitter_url = encodeURIComponent("http://twitter.com/share?text=" + text + "&url=" + pageurl);
var Line_url = encodeURIComponent("http://line.me/R/msg/text/?" + text + " " + pageurl);
$('.Facebook').attr('href', Facebook_url);
$('.Twitter').attr('href', Twitter_url);
$('.Line').attr('href', Line_url);
</script>

→失敗例のDEMO

テキストとページのURLを用意し、各共有用のURLにくっつけたものを encodeURIComponent でURIエンコードして準備完了。
jQueryでaタグのhref属性に入れたら完了、のはずでした。

開発者ツールとかで書き換えられたhref属性を見てみても正しくエンコードされたURLが記述されているのに、クリックするとこのページのURLが頭に差し込まれてわけのわからないアドレスになりNot Foundに。

成功例

先ほどのjavascript部分を修正します。

<script>
var text = encodeURIComponent("SNSに投稿する文字列をURIエンコードしたときのメモ");
var pageurl = "http://lettuce-eater.com/blog/?p=364";
$('.Facebook').attr('href',("http://www.facebook.com/sharer.php?u=" + pageurl + "&t=" + text));
$('.Twitter').attr('href', ("http://twitter.com/share?text=" + text + "&url=" + pageurl));
$('.Line').attr('href', ("http://line.me/R/msg/text/?" + text + " " + pageurl));
</script>

→成功例のDEMO

変更点としては入込み前の完成文言にencodeURIComponentをかけるのではなく、日本語の部分にのみ先にencodeURIComponentをかけたところです。

詳しい人はすんなりわかりそうですがハマってしまった自分としてはBLOGネタとしてメモでした。

(Visited 134 times, 1 visits today)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

トラックバック

 トラックバックURL
http://lettuce-eater.com/blog/archives/364/trackback