TOP NETスクラップ (デジタル) > Seesaaブログに「Topsy」のtwitterボタンを設置する方法
2010年02月24日

Seesaaブログに「Topsy」のtwitterボタンを設置する方法

blogを巡っていて,こんなボタンを目にすることが増えました ⇒

このボタンは,エントリがtwitterでどのくらいつぶやかれているか。
またそのエントリを読んだ方が手軽にRT(ReTweet)できるようになっているボタンです。

netafull-topsy.png
[N]ネタフルでも導入されていますね

これは良い!
このblogくうねるあそぶにも,ぜひ取り入れたい!!

ということで,ワタシもネタフルに倣って「Topsy」のサービスを利用してみました。
具体的には,次のリンク先にあるTopsyのオフィシャル解説を参考に。

Topsy Labs » Topsy Retweet Button for Web Sites

ここに掲載されているコードを,Seesaaブログのデザイン編集画面で貼り付けてあげればOKのはず。
早速試してみるのですが・・・

Topsyの解説の中で,次のタイプのコードを貼り付けてみます。
エントリの右側にボタンが設置されるタイプ。

TOPSY-1.png
貼り付けコード

ちなみに「var topsy_nick = "TopsyRT";」のところは,自分のtwitter IDに変えましょう。
ワタシの場合であれば,「var topsy_nick = "makipapa";」となります。

Seesaaブログへの貼り付け方は,次のとおり。

TOPSY-2.png
Seesaaブログの編集画面

「デザイン」−「コンテンツ」で,「記事」のパーツを選択。
右上の「コンテンツHTML編集」をクリックします(図の赤矢印)。

貼り付け位置は色々調べてみましたが,タイトル部分の直下が良い様です。

TOPSY-3.png
タイトル部分の直下に貼り付け

タイトル部分は,コードが表示されている場所で「 "title" 」を検索すれば一発で出てきます。
ダブルクォーテーション「"」で囲まれた「title」です。

さぁこれで出来た!と変更を保存してblogを見た結果がコチラ。

TOPSY-4.png

・・・。
・・・ ・・・。

何か違う。ボタンの位置がエントリの枠にくっついてしまって,デザインかっこ悪い。
また表示されている数字も,良〜く見てみると開いているページのアドレスに反応してしまっています。

個別の記事を表示させている分には良いのですが,ブログのトップページで複数の記事を表示させている場合は,全てのボタンがトップページのアドレス「makipapa.seesaa.net」に反応してしまうので,同じ数字が表示されてしまうハメに(^^;

さらに,retweetボタンを押してみると・・・

TOPSY-5.png
あうあうあー見事に文字化け

別ウィンドウが開いてtwitterサイトが開きますが,つぶやき欄には文字化けしてしまったRTが(´Д`)

さぁ困りました。

ということで色々とググってみるわけです。
ググれよ,ググる者はたれも皆救われん。

はい,Hertlogicさんのblogで答えが見つかりました!

ブログ記事のTwitterでの「つぶやかれ数」を表示するブログパーツ(追記あり) :Heartlogic

ここで表示されているTopsy用コードは,先ほどの本家解説にあったコードと異なります。

TOPSY-6.png

読み解くに,「◆自分のTwitter ID◆」はそのまま自分のIDを。
またurl=で指定されている「<$MTEntryPermalink$>」は,どうもMT用のパラメータ。
なのでSeesaaブログに合ったパラメータを設定しなくてはいけませんね。
そこで参考にしたのが,次のサイト。

HTML関数リファレンス - ブログカスタマイズ

これによれば,記事ページURLのパラメータは;
「<% article.page_url %>」 となります。

ということでSeesaaブログの編集画面に,あらためて次のように貼り付けてみます。

TOPSY-7.png

変更を保存して,さぁ気を取り直してblogを見てみると・・・

TOPSY-8.png
無事成功!(^^)/

ボタンの貼り付け位置が,エントリの枠から左に少し離れて見やすくなりました。
(「padding: 4px」を「padding: 7px」に増やしています)

表示されている数字も,該当のエントリのURLに反応しています。
トップページの一覧表示でも,ちゃんとそれぞれの「つぶやかれ」数字に!
またretweetボタンを押してみると・・・

TOPSY-9.png
文字化けなーし!(^^)/

ということで,無事にSeesaaブログにTopsyのtwitterつぶやきボタン設置が完了したのでした。


■まとめると

Seesaaブログの記事パーツ編集画面で,次のコードを貼り付けます。
nick=で始まる「◆ID◆」は,自分のTwitter IDに置き換える必要があり。
そしてコードの貼り付け位置は,タイトル部分の直下ですね。



えーと,プログラマでもWeb屋さんでもないワタシにはココマデ。
もっと効率の良い方法があれば,教えてくださいm(__)m

最後にワタシのtwitter IDは次のとおりです。
ブログの更新情報も流しています。フォローはどうぞお気軽に〜!

マキパパ (makipapa) on Twitter



■スポンサード リンク


posted by マキパパ at 23:41 | Comment(0) | TrackBack(1) | NETスクラップ (デジタル) | このブログの読者になる | 更新情報をチェックする

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック

公式Twitter ButtonよりもTopsy Retweet Buttonの方が良さそう
Excerpt: 「Twitter、公式「Twitter Button」を発表 - ITmedia News」ってことで、Topsyから乗り換えようかなと思ったんだけど、やっぱりTopsyのままで行くことにした。 ..
Weblog: audiofan.net blog
Tracked: 2010-08-15 11:26
recent article


Related Posts with Thumbnails