Twitter Trackbacks for スクロールバーをデザインする ::-webkit-scrollbar に関しての覚え書き | Unformed Building [unformedbuilding.com] on Topsy.com
ちなみに、お持ち帰りコードはこんな感じのものが書かれています。
(見づらいので整形してます)
<div id="topsy_search_widget">
<script type="text/javascript">
var topsy_settings = {
title : 'Buzz on unformedbuilding.com',
query : 'site:unformedbuilding.com',
height : '600',
shell_bg_color : '#777',
display_query : '',
allow_lang : 'any',
show_bottom_ad : true
};
</script>
<script type="text/javascript" src="http://cdn.topsy.com/search-widget/2.0/widget-loader.js"></script>
</div>
で、お持ち帰りコードのすぐ近くにはカスタマイズ用リンクがあって「Social Modules » Customize a social widget」に移動できるんですが……アカウントを作らないといけないんですよね。しかも企業用っぽい。
でも、お持ち帰り用でも企業用でも読み込むスクリプトは同じなので、同じようにカスタマイズはできるんですね。
その設定一覧を簡単にではありますが説明してみます。
ウィジェット用スクリプトはhttp://cdn.topsy.com/search-widget/2.0/widget-loader.jsで、その内部でjQueryとhttp://cdn.topsy.com/social-modules/search/widget.jsを読み込んでいます。
更に、widget.jsでTopsyのAPIを叩いて検索結果を出しています。
ウィジェットで設定できる値はwidget.jsに書かれていて、デフォルトは以下のようになっています。
{
width : '300',
height : '450',
title : 'Topsy search',
query : 'news',
display_query : false,
data_type : 'tweets',
infonly : false,
shell_color : '#ffffff',
shell_bg_color : '#dd7700',
results_color : '#555555',
results_bg_color : '#ffffff',
link_color : '#336699',
sponsor : 'topsy.com',
show_sponsor : false,
show_bottom_ad : false,
show_nick : false,
auto_update : false,
nick : '@topsy',
apikey : '0',
result_timeout : 10000,
allow_lang : 'en'
};
これを順に説明してみます。
width
height
title
query
display_query
'news'
のように指定する。false
だと検索クエリが表示されるみたい。data_type
'tweets'
だとツイートを表示。短縮URLはそのまま表示される。'links'
だとリンクのみ表示。リンク先タイトルがアンカーテキストになって、リンクの後にリンク先のドメインが表示される。infonly
shell_color
shell_bg_color
shell_color
と同じ部分の背景色。results_color
results_bg_color
link_color
sponsor
show_sponsor
show_bottom_ad
false
にしておけばいいんじゃないかな。show_nick
auto_update
false
で自動更新ありになる。nick
@
はあってもなくてもリンクは機能する。でも表示したときに分かりやすいから@
付けておいたほうがいいかも。apikey
result_timeout
allow_lang
'any'
, 'en'
, 'ja'
しか確認できなかった。とりあえず、現在確認できたのはこれくらいです。
せっかくなので自分のブログのウィジェットを作ってみました。
指定は次のようにしました。
var topsy_settings = {
width : '620',
height : '400',
title : 'Twitterで反応のあった記事',
query : 'site:unformedbuilding.com/articles',
display_query : false,
data_type : 'links',
shell_color : '#101010',
shell_bg_color : '#eaeaea',
results_color : '#303030',
results_bg_color : '#fff',
link_color : '#08c',
show_nick : true,
nick : '@ub_pnr',
allow_lang : 'any'
}
このウィジェットを使う機会があるかどうかは分かりませんが、覚えておいてもいいかと思います。
また、もっと詳しく知りたい人はアカウントを取ってみたり、スクリプトのコードを読んだりするといいんじゃないでしょうか。