オリジナルツイートボタンを作ろう！（a要素のみでできるよ！
最近は多くのサイトでツイートボタンが設置されるようになりました。
これ↓ですね。
ネットで自分の書いた記事などを広めるためには、もはや必須のツールといっても過言ではないこのボタンですが、
Twitterのサイトに従うことで簡単に設置することができます。
こちらですね↓
https://twitter.com/about/resources/buttons#tweet
しかし、デザインが微妙だったり、色がサイトと合わない、欲しいサイズがない
と、微妙な点がチラホラとみえてきます。そして、scriptの記述も面倒…
オリジナルツイートボタンを作れば全て解決というわけです。
完成例はこんな感じになります。
クリックしてみてください↓
用意するもの
- アイコン用画像
- 共有するURL
- ツイートに記述しておきたい文章
- ツイートに含みたいユーザー名
まず、アイコン用画像についてですが、「アイコン twitter フリー素材」というようにググれば結構見つかります。
こちらのサイトでは、カッコいいのが揃って紹介されています。
オリジナルアイコンをツイートボタンにするコード
＊注意 <, > を使うとテキスト表示されないので 『 , 』で代用しています。
『a href="http://twitter.com/share ?url=共有するURL &text=ツイート内に含める文字 &via=ツイートに含みたいユーザー名" 』 『img src="アイコン用画像のURL" /』 『/a』
このa要素内に記述する、「共有するURL」、「ツイート内に含める文字」、「ツイートに含みたいユーザー名」は
htmlエンコードをおこなって、エンコード後の文字を入れてください。
htmlエンコードは以下のサイトで行うことができます。
エンコードの際、文字コードはUTF-8にセットしてください。
http://www.tagindex.com/tool/url.html
例：こんにちは（エンコード前）→%e3%81%93%e3%82%93%e3%81%ab%e3%81%a1%e3%81%af（エンコード後、こっちの文字列を使う）
これだけで完成です。結構簡単です。
追加でハッシュタグなどを入れる場合は、&hashtag=任意のハッシュをurlの後ろなどに追加してください。
ツイートに含めるurl等の順序を変えたい場合は、a要素の順序を変えればOKです。
但し、並び替えた後の一番最初の要素は頭のみを『&（アンド）』でなく『?』としてください。
元のツイートボタンについている別ウィンドウで開く機能などはないですが、要望があれば追加で解説してみようと思います。
window.openとかjavascriptがゴチャゴチャと関係してくるので
