twitterシェア画面で勝手にリンクが消える

Question

###目的
下記コメント欄のシェアボタンで、「#」以降も含めてシェアできるようにしたいです。

<h1 class="entry-title">たいとるだよ</h1>

<div id="comment1">
  <div class="comment">
    <p>こんにちは！</p>
  </div>
  <div class="sns_wrap">
    <ul>
      <li class="sns_tw">
        <a href="#">ツイート</a>
      </li>
    </ul>
  </div>
</div>

<div id="comment2">
  <div class="comment">
    <p>さようなら！</p>
  </div>
  <div class="sns_wrap">
    <ul>
      <li class="sns_tw">
        <a href="#">ツイート</a>
      </li>
    </ul>
  </div>
</div>

###試したこと
次のコードでリンクは生成できたのすが、なぜかシェア画面にいくと「#comment1」や「#comment2」の部分が消えてしまいます。

▼実際のサンプル
https://jsfiddle.net/4Ldamzj8/

ご覧のように「たいとるだよ http://example.com/test/たいとるだよ/」までしか表示されません。

これは…どうしてなのでしょうか？？

直し方が分かる方がいらっしゃいましたらご教示頂けますと幸いです。

$(function(){
	
	var title = $('.entry-title').text();
	var siteURL = 'http://example.com/test/';
	
	//twitter
	$('.sns_tw a').click(function(){
		var id = $(this).parent().parent().parent().parent().attr('id');
		var link_tw = 'https://twitter.com/intent/tweet?text=' + title + '&url=' + siteURL + title + '/#' + id;
		$(this).attr("href", link_tw);
	});
	
});

Answer 1

https://jsfiddle.net/4Ldamzj8/1/

URLのパラメータを構築する際は、encodeURIComponentによるエンコードの処理を入れるようにしましょう。

URLにおいて#はフラグメント識別子、いわゆるページ内リンクを示す役割が与えられていますので、URLにそのまま#を使用することで、urlパラメータの一部として解釈されていないものと思われます。

#以外にも、パラメータとして使用する際にエンコードが必要な文字がありますので、パラメータにする文字列は原則としてまるっとエンコードしておくほうが安全です。

【参考】
encodeURIComponent() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

Comments

[退会済みユーザー]

そうでしたか。ご丁寧にありがとうございます。とてもわかりやすかったです。さらに安全策まで書いてくださって感謝です。そうですよね、タイトルもそうしないと。

[退会済みユーザー]

あの、、大変恐縮なのですけれど…(>_<)

target_brank　をこれに追加するためにはどうしたらいいでしょうか？

[sii_side]

$.attr({
a: 'a',
b: 'b'
})

このように複数の属性を1回のメソッド呼び出しで実行することもできますし、

$.attr('a', 'a').attr('b', 'b')

このようにメソッドチェーンで複数回呼び出すこともできます。

[退会済みユーザー]

どうもありがとうございます。無事できました。お返事遅くなってしまいすみません。