Roroa.

こんにちはkazukiです。
今回はtwitterのシェアボタンについてです。
このサイトでもtwitterのシェアボタンを設置していたのですが、なんだか違和感があったのでちょっと直した時のメモを残しておきたいと思います。

最初に設定していたカスタマイズコード（違和感ありの方）

まずは私が最初に設置していたtwitterシェアボタンのカスタマイズコードになります。

<a href="https://twitter.com/share?url=シェアしたいリンク（URL）&text=任意のテキストなど&hashtags=ハッシュタグ" rel="nofollow" target="_blank"></a>

こんな感じで設置していました。

ですが、これだとなんだか変な感じなっていたのです。。。

こんな感じです。
違和感の理由としましては、

• タイトルの横にURLが来ている
• 改行がされていない
• 投稿してもURLが表示されたまま

ということでした。他の方のツイートとかは綺麗になっているのになんで！？って思っていました。
URLは投稿しても表示されたままなうえ、改行されてないのでテキストがとても長い印象になってしまってました。。。

改良したカスタマイズコード（違和感なしの方）

それでは色々やってみて私的に違和感がなくなったカスタマイズコードを紹介します。

<a href="https://twitter.com/share?url=シェアしたいリンク（URL）&text=任意のテキストなど%0a%23ハッシュタグ（1個目）%20%23ハッシュタグ（2個目）" rel="nofollow" target="_blank"></a>

これです！実際にシェアしようとしてみると。

このようになり、テキストで改行され、その下にハッシュタグがくるので見やすくなったかなと思います。そして最後にURLという形になり、投稿すればURLは表示されないのでスッキリします。

改良したこと

改良したことは、hashtags=ハッシュタグをなくして、text=の中にハッシュタグと改行を入れるです。

hashtags=ハッシュタグを使うとどうしてもurl=シェアしたいリンク（URL）の次にきてしまいました。（私のやり方が何か悪かったのかもしれません）
そのため、URLがテキストのような扱いになってしまい、投稿してもURLが表示されてしまっていました。

また、テキストとハッシュタグで改行も加えたかったのでtext=の中にテキストとハッシュタグを入れ、そこで改行を加える方法で解消しました。

今回使っているカスタマイズコードのオプション

aタグhttps://twitter.com/share?の後に加えられるオプションです。オプションを複数いれたい場合は「&」を付けます。

url=
シェアしたいリンク（URL）

text=
任意のテキストなど

hashtags=
ハッシュタグ。「,」カンマで区切ると複数登録できます。
例：hashtags=1つ目のハッシュタグ,2つ目のハッシュタグ

text=で使っているURLエンコード

%23
#（ハッシュ）

%20
半角の空白

%0a
改行