さきほど、はてなスターの機能を実現するHatenaStar.js (http://s.hatena.ne.jp/js/HatenaStar.js)を更新しました。 今回の更新により、任意のノードに対して明示的にエントリー抽出、☆の表示ができるようになりました。 Hatena.Star.EntryLoader.loadNewEntries(node); このような形でnodeを引数として処理を行うことができます。
はてなスターは、はてなダイアリー、はてなグループでは自動的に表示されますが、それ以外のブログサービスでも、利用していただくことが可能です。ここでは、その方法と、はてなスターの仕組みについて解説します。 はてなスターでは、JavaScriptを利用しています。はてなスターの提供するJavaScriptファイルをご自分のブログのページ内で読み込むことで、ページの読み込み完了とともにそのJavaScriptが実行されます。JavaScriptでは、そのページに存在する記事とPermalink(記事ごとの固有のURL)を検出し、その記事につけられたスターの数をはてなスターのサーバに問い合わせます。そして、その結果と、星を追加する「Addボタン」ボタンをページ内に埋め込みます。 「Addボタン」が押された際にも、はてなスターのサーバに問い合わせが行われ、スターの情報が保存されます。 スターの数の表示
はてなスターを外部のブログサイトなどへ搭載する際に、サイトごとに☆を表示する場所などをカスタマイズする方法を変更します。 今回の変更により、CSSセレクタを使ったシンプルな設定で、☆を表示する場所、エントリーのURL、タイトルなどの場所を指定することができるようになります。 新しい設定方法は、以下のような書式となります。 <script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script> <script type="text/javascript> Hatena.Star.SiteConfig = { entryNodes: { 'div.entry': { uri: 'h3 a.permalink', title: 'h3.title', container: 'h3.title' }
さきほど、ドメインごとに☆の注目エントリーが表示されるドメインページの中で、twitter.comのページではtwitterのプロフィールアイコンが表示されるように変更を行いました。 http://twitter.com.s.hatena.ne.jp/ twitter.comのドメインページでは、これまでもTwitterにはてなスターを設置するGreasemonkeyなどから☆がつけられたエントリーが表示されていましたが、トークンによる認証などはできないため、ユーザー名やプロフィール画像は表示されませんでした。 これに対し、Big Skyさんがtwitterのアイコンを表示させるGreasemonkeyを開発されましたが、今回、これと同等の処理をはてなスター側で行うことにより、誰が閲覧しても画像アイコンやユーザー名が表示されるようにしてみました。 どうぞご利用ください。
はてなスターでは、標準ではオレンジ色の星の画像が表示されるようになっていますが、この星の画像は、自分の好きなものに変更することができます。画像を、あなたのブログやサイトにもっとよくあうものに変更すれば、はてなスターをより楽しく使うことができるでしょう。 画像を変更するには、まずは使いたい画像を用意して、それをどこかにアップロードしておく必要があります。ブログサービスであれば、画像をアップロードする仕組が用意されている場合も多いので、それを利用のもよいでしょう。はてなのフォトシェアリングサービス「フォトライフ」を使うこともできます。 画像を用意したら、はてなスターを貼り付けたページのヘッダにて、以下のようなCSSを記述します。 .hatena-star-star-image { background-image: url(http://exapmle.com/star.gif); }指定して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く