Twitterのツイートボタンを設置する機会がありましたので、自作のオリジナル画像にする方法を備忘も兼ねてまとめておきます。

独自の画像を使用したボタンの設置は過去にも経験がありましたが、あまり機会がなくすっかり忘れていました…。今後のためにもここにメモしておきますので、デザイン重視でのWebサイトを作成など、ボタンをカスタマイズする際のご参考になれば幸いです。

基本的な構造は以下ソースの通りです。

HTML

【ツイート文】や【共有するURL】、【ハッシュタグ】などは日本語が含まれる場合にはURLエンコードしておきます。URLエンコードはこちらのサイトなどで行なうことが可能です。
ハッシュタグには使えない文字があるので注意してください。

「rel=”nofollow”」は、検索エンジンがリンクを辿らないようにするための記述です。
必ずしも入れる必要はありませんが、検索エンジンがリンクを辿る必要もないので入れておいてもよいと思います。

以下、動作サンプルです。

なお、上のソースでは別ウィンドウのサイズを制御しており、タブブラウザでも小さいサイズのウィンドウが開きます。スマホではタブで開けばよいので、スマホに特化する場合は「onClick=”window.open〜”」の一文は不要で、代わりに「target=”_blank”」としておきます。