もはや”見ない日は無い”というレベルでブログやWebサイトに浸透しているツイートボタンですが、どうせならオリジナルのボタンを作りたい！という人も多いんじゃないでしょうか？
というわけで、今回は自前のボタンを使ってオリジナルのツイートボタンを作る方法を紹介します。
目次
aタグで囲めるものなら何でもOKですが、画像を使うのが一番ポピュラーですかね。
|
1 |
<img src="画像リンク" alt="画像が表示されなかった場合の代替テキスト" /> |
今回はこの画像にリンク設定をして、色々とパラメータを加えていきます。
とりあえず完成品がこちら。
|
1 2 3 |
<a href="http://twitter.com/share?url=【URL】&text=【ツイートテキスト】&via=【アカウント名】&hashtags=【ハッシュタグ】" target="_blank"> <img src="画像リンク" alt="画像が表示されなかった場合の代替テキスト" /> </a> |
このように、リンクタグのhrefをちょろっといじるだけでツイートボタンの出来上がりです。簡単！
指定できるパラメータは以下の4つです。
| パラメータ | 解説 |
|---|---|
| text | ツイートテキスト |
| url | ツイートするURL |
| via | アカウント名（@は書かなくてOK） |
| hashtags | ハッシュタグ（#は書かなくてOK） |
この各種パラメータをhttp://twitter.com/share?の後に記述すると、クリックした際にツイートボタンと同じような動作をします。
複数のパラメータを指定する場合は「&」で繋げましょう。
ちなみにハッシュタグは「,」で区切れば複数指定することも可能です。
各パラメータは省略可能ですが、シェアボタンとして使うならURLとツイートテキストはほぼ必須となります。viaとhashtagsはお好みでどうぞ。
スペースや改行等の特殊文字を使う場合、URLエンコードが必要になります。
| スペース | %20 |
|---|---|
| 改行 | %0a |
| % | %25 |
| & | %26 |
他の特殊文字が使いたい人はここらへんのツールを使えばOK。
WordPressなら記事のURLやタイトルを簡単に取得できますが、PHPなんて分からん！という人用に書いておきます。
記事のURLを指定しています。
記事のタイトルを指定しています。
リンクタグにこのスクリプトを埋め込めばOKです。
|
1 2 3 |
<a href="http://twitter.com/share?url=【URL】&text=【ツイートテキスト】&via=【アカウント名】&hashtags=【ハッシュタグ】" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" target="_blank"> <img src="画像リンク" alt="画像が表示されなかった場合の代替テキスト" /> </a> |
本家のツイートボタンに近い動きになるので、特に理由がなければ記述しておいたほうがいいですね。
以上、オリジナル画像を使ったツイートボタンの作り方でした。
