HOME > > TOPSYのパーツのRETWEETボタンを設置する [JavaScript]

2010.04.05

TOPSYのパーツのRETWEETボタンを設置する [JavaScript]

TOPSYとは、twitter対応の検索エンジンのことです。
http://topsy.com/

キーワードを入力して「Web」「Photos」「Tweets」「Trending」のいずれかを検索すると、検索結果と公式RTされた数が一覧で出てきます。
「site:ドメイン」で検索すればWEBサイトのtwitter上での口コミが分析ができそうです。

今回は案件でこのTOPSYを利用したRETWEETボタンをサイトに設置しました。
これです↓
RETWEETボタン

Topsy Retweet Button for Web Sites
導入方法は、以下のコードを埋め込むだけです。
自動的にページタイトルを拾って、URLも短縮表示してくれます。色や大きさもそこそこ選べます。

<script type="text/javascript">
     var topsy_nick = "ユーザーID";
     var topsy_style = "big";
     var topsy_theme = "hot-pink";
     var topsy_order = "count,retweet,badge";
     var topsy_url = "URLリンク";
</script>
<script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
公式で紹介されている方法。
この方法だとボタンの色は変わるけど、日本語のタイトルが文字化けしてしまう。

<script type="text/javascript" src="http://button.topsy.com/widget/retweet-big?nick=ユーザーID&url=URLリンク"></script>
直接引数を設定する方法。
この方法だと文字化けはしないけど、色が変えられない、のだと思う。

<script type="text/javascript" src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script>
<script type="text/javascript">
     var topsy_nick = "ユーザーID"; //twitterの「RT @」の後に入れたいユーザー名。何も指定しないと「RT @TopsyRT」となる
     var topsy_order = "retweet,count,badge";
     var topsy_url = "http://mo-log.net/2010/03/28_1608.html"; 
</script>
<div class="topsy_widget_data"><!--
    {
        "url": "http://mo-log.net/2010/03/28_1608.html",
        "style": "big",
        "theme": "hot-pink"
    }
--></div>
こちらの方法で、文字化けせずに色を変えられました。

▽参考
・Topsy Twitterブログパーツ。ツイート数を表示するツイートボタンを設置。：MEMORVA
・Blogger に Twitter の つぶやく ボタンを設置：すぐに忘れる脳みそのためのメモ
posted bymochi categry tags
pagetop