about

sogo  
fukidasi

  social

Count per Day

  • 1439現在の記事:
  • 437今日の閲覧数:
  • 4現在オンライン中の人数:

リツィートしてくれた方のプロフィールアイコンをjQueryで表示させるwho-tweet-button



かなり以前から公開されていたjQuery Pluginのようですが、今頃になってwho-tweet-buttonの存在に気づきましたので備忘録として記事にしてみました。

今ではほとんどの方がブログ記事内にリツィート数を表示するボタンを設置しているかと思いますが、who-tweet-buttonとは簡潔に言いますと、一般的なリツィート数表示ボタンの機能にプラスしてリツィートしてくれた方のプロフィールアイコンも同時に表示させてしまうというものです。


どのような動き方をするのかは、各ページ記事下に設置してありますので、ご覧いただければわかると思いますが、リツィートしていただければ瞬時に自分のアイコンが表示されるようです。

※who-tweet-button自体は問題ないのですが、Twitter側のよくあるトラブルによって、たまに表示されない現象が起きますので現在は各ページから外してありますが、見本を記事下に置きました。


who-tweet-buttonの設置方法

(既にjQueryを導入済という前提で説明させて頂きます)


1. who-tweet-button – Project Hosting on Google Codeサイトの左サイドから、
 
jquery.who-tweet-button-1.0.min.js
 
who-tweet-button-1.0.css

から上記2つのファイルをダウンロードしサーバー上の適切な階層にアップしておきます。


2. header.phpに以下の記述をします。
<link rel="stylesheet" href="ファイルまでのフルパス/who-tweet-button-1.0.css" type="text/css" media="screen" />

<script type="text/javascript" src="ファイルまでのフルパス/who-tweet-button-1.0.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$('#id名').whoTweet({
		nick:'●●●', //自分のTwitterID
		url:'●●●', //各記事毎に取得する場合はこの項目は外して下さい
		n:20, //アイコン画像数 max50
		tweet_tip:1, //tweetを表示
		animate:'height' //表示時の動き方('opacity', 'height', 'width')
	});
});
</script>


3.ボタンを設置ししたい場所にHTML
<div id="id名">loading..</div>

(*id名は上記スクリプトに合わせて下さい)

4.CSSによる編集

基本的には不要ですが、先にアップしたwho-tweet-button-1.0.cssを弄ることによって、アイコンのサイズ等を変更する事も可能ですので、お好みでどうぞ。

これで設置完了です。

loading..

リツィートしてくれた方にとっても、自分のアイコンが表示されるって気持ち良いもんです。

過去記事:シンプルでかっこよくTwitterツイートを表示させる


Pocket

Trackback URL


この記事を共有していただければ嬉しく思います。コメントもお待ちしておりますのでお気軽にどうぞ!
※ドメインを移行しましたら共有数が0にリセットされてしまいましたので、ご協力お願い致します。