まずは公式ボタン。公式ページからソースコードを取得できます。
「カウント数の表示なし、おすすめのユーザーなし、ボタンが表示されるページのタイトルを含む、ボタンが表示されるページのURLを含む」という設定のコードはこんな感じ。
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-lang="ja">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
→ ツイートボタン画像を自分で用意したものに変更して、上の設定と同じテキスト（ページのURLとページタイトル）を自動入力するようなカスタマイズボタンのコードは以下のようになります。（→参照｜公式リファレンス）
<a href="https://twitter.com/share?url=●ページのURL●&text=●ページタイトル●&count=none&lang=ja"><img src="●画像のURL●" /></a>
ページURLやページタイトルをブログの記事ごとに自動的に書き換えるにはいろいろな方法があるけれど、JavaScriptを使った原始的な方法ならばこんな感じ。ボタンを表示したい場所に以下のコードを書きます。<script type="text/javascript">
(function(){
var url = encodeURIComponent( document.location ); //ページURL。一応エンコード
var title = encodeURIComponent( document.title ); //ページタイトル。同上。
document.write( '<a href="https://twitter.com/share?url=' + url + '&text=' + title + '&count=none&lang=ja"><img src="/imgs/tsubu.jpg" /></a>' );
})();
</script>
→ （PC版の投稿ページへ飛ぶボタン）
(function(){
var url = encodeURIComponent( document.location ); //ページURL。一応エンコード
var title = encodeURIComponent( document.title ); //ページタイトル。同上。
document.write( '<a href="https://twitter.com/share?url=' + url + '&text=' + title + '&count=none&lang=ja"><img src="/imgs/tsubu.jpg" /></a>' );
})();
</script>
あまりスマートな方法ではないので、もっと賢いやり方はGoogleさんに訊いてみてください。
リンク先( twitter.com/share )は、twitter.com/intent/tweet にリダイレクトされるので、最初から後者のURLを入れておいても動きます。
ここまでのカスタマイズだと「ツイートする」ボタンを押すと PC版のTwitter投稿画面に遷移します。例えばウチの iPhone 3GS からだと、このPC版投稿ページがちょっと重いし、URL短縮作業あたりでコケてしまって正しく投稿できないこともしばしば。
なので、少しは快適に動作するモバイル版ツイッター( mobile.twitter.com )の投稿画面に飛ばすツイートボタンを作ってみます。
<a href="https://mobile.twitter.com/home?status=●ページタイトル●%20●ページURL●"><img src="●画像のURL●" /></a>
→
（モバイル版の投稿ページへ飛ぶボタン）モバイル版のTwitterはPCからでも問題なく使用できるので、こちらを設置しておくと非力なスマートフォンユーザにも優しいボタンになりますね。あるいは JavaScriptでユーザーエージェントを参照すれば、PCからのアクセスかモバイル機器からのアクセスかを切り分けできるので、場合に応じてどちらのボタンを表示するかを制御しても良し。
さらにさらに、iPhoneからのアクセスで、しかもその iPhone にTwitterアプリがインストールされているならば、以下のようなタグを書いておくと、ボタンをタップしたときに自動的にTwitterアプリが起動します。
<a href="twitter://post?message=●ページタイトル●%20●ページURL●"><img src="●画像のURL●" /></a>
→
（Twitterアプリが立ち上がるボタン。アプリがインストールされているiPhone専用）このボタンはPCからのクリックだったり、iPhoneにTwitterアプリがインストールされていなかったりすると「開けません」と怒られるので、あまり実用性は無いかも。
ということで。
あ、下のツイートボタンは何も弄っていない公式ボタンです。
コメント