ブログに「Twitterつぶやきボタン」と「Tweetカウント」を設置する方法　すくぅうみうぎ

★第1回は5/1(Tue)～5/31(Thu)で回答募集中！★
スク水で面白い回答お待ちしております！

ブログに「Twitterつぶやきボタン」と「Tweetカウント」を設置する方法　  |

ブログに「Twitterつぶやきボタン」と「Tweetカウント」を設置する方法

最近、色々なサイトを見ていると、
「この記事をTwitterでつぶやく」機能を設置しているサイトが増えてきています。

どうやってこういう「つぶやくボタン」を付けるんだろうと調べたついでに、
私のサイトにも付けてみましたので、その方法をご紹介します。

＜紹介する3つの方法＞
[1] 「Twitter URL」と「TweetBuzz」を組み合わせる方法
[2] Twitter公式の「ツイートボタン」を使う
[3] 「topsy」のツイートボタン

◆ [1] 「Twitter URL」と「TweetBuzz」を組み合わせる方法 ◆

こんな感じ ⇒

【一般的なHTMLタグ】

『Twitter URLによるTweetボタン』
<a href="http://twitter.com/home?status=[記事タイトル]%20[記事URL]" target="_blank"><img title="この記事についてTwitterでつぶやく" src="[アイコン画像のURL]"></a>

『TweetBuzzによるTweetカウント』
<a href="http://tweetbuzz.jp/redirect?url=[記事URL]"><img src="http://tools.tweetbuzz.jp/imgcount?url=[記事URL]"/></a>

上記をブログやサイトに貼ればOKです。

[記事タイトル] : 日本語の場合はエンコードしておく必要があります。
[記事URL] : つぶやいたときのリンク先となるURLです。
[アイコン画像のURL] : Tweetボタンの画像です、お好きなアイコンを使いましょう。

【FC2ブログ向けHTMLタグ】

『Twitter URLによるTweetボタン』
<a href="http://twitter.com/home?status=<%topentry_enc_utftitle>%20<%topentry_link>" target="_blank"><img title="この記事についてTwitterでつぶやく" src="[アイコン画像のURL]"></a>

『TweetBuzzによるTweetカウント』
<a href="http://tweetbuzz.jp/redirect?url=<%topentry_link>"><img src="http://tools.tweetbuzz.jp/imgcount?url=<%topentry_link>"/></a>

FC2ブログの場合、上記のように書けば、記事タイトルと記事URLを
表示している記事に合わせて表示してくれます。

[記事タイトル] : <%topentry_enc_utftitle> (ちゃんとエンコードされてます。)
[記事URL] : <%topentry_link>

FC2ブログ以外のブログでも、記事タイトルや記事URLの記述方法があると思うので、
ブログに応じてその部分を置きかえれば、設置できると思います。

＜参考サイト＞
◆ FC2ブログに「twitterでつぶやく」ボタンを設置する方法
◆ TweetBuzz - Tweetカウンター

◆ [2] Twitter公式の「ツイートボタン」を使う ◆

こんな感じ ⇒

【使用方法】

(1) Twitterにログインした状態で、下記のサイトに行く。
　　⇒ http://twitter.com/goodies/tweetbutton

(2) 自分の好みに応じて、設定をする。

(3) HTMLコードをコピーして、自分のサイトに貼り付ける。

自分の好みの画像をボタンにすることもできるようです。

FC2の場合、上記のTwitter公式の設定ページでURLとタイトルに、
<%topentry_link>と<%topentry_title>を入力すればOK。

言語選択を"日本語"としておけば、<%topentry_enc_utftitle>にせずに、
<%topentry_title>で大丈夫。

【FC2ブログ向けHTMLタグ】

<a href="http://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>" data-text="<%topentry_title>" data-count="horizontal" data-via="あなたのTwitterID" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

＜参考サイト＞
◆ Twitter公式のツイートボタンがついに登場、誰でも簡単に設置可能

◆ [3] 「topsy」のツイートボタン ◆

↓こんな感じ

topsyのツイートボタンを使います。

【FC2ブログ向けHTMLタグ】

＜ページの頭のどこかに貼っておくHTML＞
<script type="text/javascript" src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script>

＜ボタンを配置する場所に貼るHTML＞
<div class="topsy_widget_data"></div>