■jsファイルを設置
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
このコードをhead要素
</head>直前に追加。
■ボタンを作る（設定）
http://twitter.com/about/resources/tweetbutton で
「ツイート内テキスト」に【
data:post.title】
「URL」には【
data:post.url】
を入れる。
※この2つはblogger用テンプレートタグなので他のブログ等では使えません
その後出てきたコードの中の
data-text=とdata-url=の前にそれぞれ【expr:】を追加
↓
expr:data-text='
data:post.title'
expr:data-url='
data:post.url'
で、完成
<a href="http://twitter.com/share"
class="twitter-share-button"
expr:data-url="data:post.url"
expr:data-text="data:post.title"
data-count="none">Tweet</a> |
挿入は記事内でもいいけど毎回の追加は面倒だし、
タイトルの右側（記事の右端）に設置したいので
<div style='text-align:right;margin-bottom:1em;'>
と
</div>
で挟み
<h3 class='post-title entry-title'>の中
【
</h3>】の直前にいれてみました。
■他のボタン■
＜tweet＞（英語）
<a href="http://twitter.com/share"
class="twitter-share-button"
expr:data-text="data:post.title"
expr:data-url="data:post.url"
data-count="none">Tweet</a> |
＜ツイートする＞（日本語）
⇒「 data-lang="ja"」を追加
<a href="http://twitter.com/share"
class="twitter-share-button"
expr:data-url="data:post.url"
expr:data-text="data:post.title"
data-count="none"
data-lang="ja">Tweet</a> |
＜tweet＞（垂直方向にカウント数表示）
⇒「data-count="vertical"」に変更
<a href="http://twitter.com/share"
class="twitter-share-button"
expr:data-text="data:post.title"
expr:data-url="data:post.url"
data-count="vertical">Tweet</a>
|
＜tweet＞（水平方向にカウント数表示）
⇒「data-count="horizontal"」に変更
<a href="http://twitter.com/share"
class="twitter-share-button"
expr:data-text="data:post.title"
expr:data-url="data:post.url"
data-count="horizontal">Tweet</a>
|
tweetした人にフォローを勧める場合は
「data-via="○○○"」をclass=に追加
○○○に自分のtwitterアカウントを入れる（＠は不要）
＜ツイートする＞（日本語）(フォロー希望Ver.)
<a href="http://twitter.com/share"
class="twitter-share-button"
expr:data-text="data:post.title"
expr:data-url="data:post.url"
data-count="none"
data-via="ts_sr"
data-lang="ja">Tweet</a>
|
↑のフォロー希望はツイート後に表示されます。
実は「topsy」の設置を試みたのですが
[retweet]で文字化けすることがあったので…
topsyのツイート数（topsyへのリンク）と
公式ボタンを組み合わせた形にしてしまいました。
だから「強制」なんつって。
ただ組み合わせただけですの。
■TOPSYの設定
基本の形は
<script type='text/javascript'>
var topsy_nick = "アカウントID";
var topsy_theme = "blue";
var topsy_style = "big";
var topsy_order = "tweet,count,badge";
var topsy_tweet_text = "tweets";
var topsy_retweet_text = "tweet";
</script>
<script src='http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator'
type='text/javascript'/> |
「var topsy_style = "big";」を
シンプルに小さくしたかったので「"small"」に変更
「var topsy_order = "tweet,count,badge";」を、
公式ツイートを使用するので「tweet」を排除。
で↓↓に変更
<script type='text/javascript'>
var topsy_nick = "ts_sr";
var topsy_theme = "blue";
var topsy_style = "small";
var topsy_order = "count,badge";
var topsy_tweet_text = "tweets";
var topsy_retweet_text = "tweet";
</script>
<script src='http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator'
type='text/javascript'/> |
これを</head>直前に追加。
その後、表示したい箇所に
<div class='topsy_widget_data' style='float:right;'><!--
{
"url": "<data:post.url/>",
"title": "<data:post.title/>"
}
--></div>
|
を、公式ボタンと並べる為に同様の
<h3 class='post-title entry-title'>の中【</h3>】の直前に追加
で今日のところはおしまい。
強制っていうか、いろいろ組み合わせてみただけですね。
twitter公式のボタンを
通常の方法でコードつくって→貼りつけ
で充分機能するのですが
表示しているページのURLが
「ブログorHPのURL/記事URL」じゃない場合
トップページ表示の時や
一覧（アーカイブ/ラベル）表示の時などは
表示されているURLがそのまま投稿されるので要注意です。
※トップ表示の時にツイートしてもらうと
新しく書いた記事はツイートされてないのに数があがっちゃうetc...
それを回避したかったんです。
ちなみにツイートされるまでは数字は表示されません（苦笑）
