Twitterのツイートのhashtagsパラメーターは表示位置を調整不可

hashtagsパラメーターとは

その名の通りTwitterのツイート時にハッシュタグを追加するためのパラメーター。

Webサイトでツイートボタンを置いてツイート内容を指定する際は公式サイトなどではtext, hashtags, urlのパラメーターを使用して以下のようにすればツイートボタンのリンクを作れると書かれてある。

<a href="https://twitter.com/share?text=sample&hashtags=foo&url=https://iwb.jp/" onclick="window.open(this.href); return false;">Tweet</a>

hashtagsだと位置がURLの後になる

前述のやり方だとハッシュタグがURLの後に追加されてしまう。

一般的にはハッシュタグはURLのあとではなくテキストのあとに付けたい場合が多いのでhashtagsパラメーターを使用すると都合が悪い場合が多い。

ならばtextパラメーターにハッシュタグを含めればよいのではと考える人がいるかもしれないが、textパラメーターに#を入れてもhref属性内なのでこれだと正しく機能しない。

<a href="https://twitter.com/share?text=sample #foo&url=https://iwb.jp/" onclick="window.open(this.href); return false;">Tweet</a>

正しく機能させるには#を%23、半角スペースを%20にする。

<a href="https://twitter.com/share?text=sample%20%23foo&url=https://iwb.jp/" onclick="window.open(this.href); return false;">Tweet</a>

ちなみに改行(\n)は%0Aを使用する。

<a href="https://twitter.com/share?text=sample%20%23foo%0A&url=https://iwb.jp/" onclick="window.open(this.href); return false;">Tweet</a>

urlパラメーターだと直前に半角スペースが入ってしまうため、改行を含めるならshareではなくintent/tweetのURLを使用してurlもtextパラメーター内に含めたほうが不自然な半角スペースが入らずに済む。

<a href="https://twitter.com/intent/tweet?text=sample%20%23foo%0A%0Ahttps%3A%2F%2Fiwb.jp" onclick="window.open(this.href); return false;">Tweet</a>

shareとintent/tweetの違い

共有用ツイートURLはshareとなっているものとintent/tweetとなっているものの2種類が存在する。

https://twitter.com/share?text=foo

https://twitter.com/intent/tweet?text=foo

クリックするとわかるが、shareをクリックするとintent/tweetにリダイレクトされる。

shareはurlパラメーターがなくてもwindows.openで開いた場合はクリック元のurlが自動的にツイートに含まれるという大きな違いがある。

<a href="https://twitter.com/intent/tweet?text=intent%20%23foo%0Ahttps%3A%2F%2Fiwb.jp" onclick="window.open(this.href); return false;">Tweet</a>
<hr>
<a href="https://twitter.com/share?text=share%20%23foo%0A" onclick="window.open(this.href); return false;">Tweet</a>

shareのほうがURLが短くなり、わかりやすいが半角スペースがURLの前に自動的に追加されてしまうため、改行が含まれるツイートだと都合が悪い。

また、shareだと元のURLがhttps://iwb.jp/?s=fooのようにパラメーター付きだとしても、URLはhttps://iwb.jp/ とパラメーターを削除した状態で表示される。

encodeURIComponentでエンコード

前述のように%20, %23, %0Aを使用すると何が書かれているかわかりづらいので、encodeURIComponentを使用したほうが内容がわかりやすくなる。

<a href="https://twitter.com/intent/tweet?text=" onclick="window.open(this.href + encodeURIComponent('Hello World!\n#bar\n\nhttps://iwb.jp/')); return false;">Tweet</a>

window.openはreturn false;必須

window.openを使用しているのにreturn false;を記述しないとクリックしたページもツイートのページに遷移してしまうのでreturn false;が必須。

別ウィンドウではなく別タブで開く場合はreturn false;は必要なく、代わりにaタグにtarget="_blank"を追加する。

この場合はonclick属性もtextパラメーターの値をhrefのほうに記載すれば不要となる。

<a href="https://twitter.com/share?url=https://iwb.jp/&text=Hello%20World!%0A%23baz%0A%0A" target="_blank">Tweet</a>

リサイズした別ウィンドウで開く

リサイズした別ウィンドウでツイートのページを開きたい場合はwindow.openの第2引数にウィンドウ名を指定して、第3引数にwidthとheightを指定する。

<a href="https://twitter.com/intent/tweet?text=" onclick="window.open(this.href + encodeURIComponent('Hello World!\n#sample\n\nhttps://iwb.jp/'), 'iwbjp', 'width=650, height=470'); return false;">Tweet</a>

Twitterシェアリンク生成ツール　

色々書いたがTwitterシェアリンク生成ツールというのを作成したので、初心者でもこれを使用すれば簡単にTwitterシェアリンクを生成できる。

使い方は以下のようなテキストを貼り付けるとHTMLコードが表示されるので、それをコピーしてWebサイトに貼り付けるだけです。

Twitterシェアリンク生成ツール 
#Twitter #iwbjp 
https://iwb.jp/twitter-tweet-hashtags-parameters-button-link/

Twitterシェアリンク生成ツール