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ネタとしてメモでした。