2011年5月13日金曜日

Bloggerにはてブボタン、EvernoteのClipボタン、Facebookのイイネ!ボタンとTwitter用Tweetボタンを付ける

前回の「Bloggerにはてブボタン、EvernoteのClipボタン、Facebookのイイネ!ボタンを付ける」にさらにTweetボタンを付けました。

Bloggerにデフォルトでついているボタンはいまいち使いづらいので
別に実装してみたいと思います。
(デフォルトのボタン自体はこの投稿の一番下にひっそりと並んでいます。)

前回の記事をもとに、はてブボタン、Clipボタン、イイネ!ボタンを実装してください。

そして、イイネ!ボタンの直後に↓のようなコードを貼付けます。

<a class='twitter-share-button' data-count='horizontal' data-lang='ja' data-via='hypo_tech ' expr:data-text='&quot;[&quot; + data:blog.title + &quot;] &quot; + data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

data-viaの中身はご自分のアカウント名に変えてください。

ここでポイントが二つあります。

まず、投稿内容にブログ名を含めて

[ハイポのメモ] Bloggerに…

と表示させたいので、data-text の部分を

expr:data-text='&quot;[&quot; + data:blog.title + &quot;] &quot; + data:post.title'

とします。
「'(シングルクオーテーション)」で始めて、普通の文字列は「&quot;」で挟み、
それに「data:blog.title」や「data:post.title」を「+」でつなげるところがポイントです。

もし記事名だけでいい場合は

expr:data-text='data:post.title'

でOKです。

それから、Twitterに自動入力された文字列の最後に半角スペースを一つ入れるため、

data-via='hypo_tech'



data-via='hypo_tech '

とします。
一番最後に半角スペースを一つ入れました。

これでOK!
あとはひたすらTweetされるようないい記事を書いてください。