はてなスターを設置してみました

観測気球

収集物の記録書庫 a data archive of collection -- collectible toys

[要旨] はてなスターを設置してみました。設置の仕方も解説してみましたので、よかったら参考にしてみてください。
[キーワード] はてなスター

« ソーシャルブックマーク管理ツール bookey 0.37版 ― digg に対応しました | トップページ | Twitter の Web ページで from Chirrup という表示が出るようになりました »

2007.07.11

はてなスターを設置してみました

今日(2007年7月11日)サービス開始の「はてなスター」を、このブログ「観測気球」にも設置してみました。

「はてなスター」を利用すると、「各自が読んだ記事が役に立ったと思ったり、面白いと思ったりしたときに、その記事に☆マークをつける(投票する)ことができる」機能をブログ(じゃなくても一定のフォーマットで書かれた Webページなら OK)に設置することができます。一種のブログパーツですね。

日々ブログを読んでいていいなと思っても、コメントを書いたりトラックバックを送るのは敷居が高く、気持ちが十分に書き手に伝わらずに終わってしまうことも多いでしょう。はてなスターは既存のブログにワンクリックでがつけられます。あなたのいいなと思った気持ちをに変えて、世界のブログに☆をつけよう!

はてなスターはじめてガイド - Hatena Star

で、設置の仕方なんですが、「はじめてガイド」を見てもよくわかりませんでした。結局、自力でいろいろ調べた結果、以下のような手順で設置可能なことがわかりました。

  1. はてなスターの自分のページに行きます (私[tsupo]の場合は http://s.hatena.ne.jp/tsupo/blogs)
  2. 自分のブログの URL を登録します。
  3. 表示された JavaScript コードを自分のブログの <head> ~ </head> の適当なところ(できるだけ後ろの方がいいかも)に貼り付けます。
  4. ブログの記事名を書いてあるところを、以下のように書き直します(すでにそうなっている場合は、この作業は不要です)。
    <h3><a href="その記事のパーマリンク">記事の題名</a></h3>
    
    例えば、ココログ(プロ)の場合は、以下のような感じになります。
    <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
    
  5. 1つの html 中に複数の記事がある場合(例えば、ブログのトップページやカテゴリアーカイブ、月別アーカイブなど)は、それなりに工夫してカスタマイズしてみてください。
  6. ブログ全体を再構築します(再構築が必要なブログの場合)。
  7. IE, Firefox, Safari 等のブラウザで自分のブログ記事を見てください。うまく表示できていれば、作業完了です。お疲れ様でした。

「はてなスター」の設置例
「はてなスター」設置作業完了直後の様子

「はてなスター」は「ウェブ拍手」のような使われ方をするんだと思いますが、(設定次第で)コメントを投稿することもできるようなので、「はてなブックマーク」するまでもないけど、コメントしてみたい、という人に使ってもらえそう。ある意味ニッチなサービスですね。

さらに高度なカスタマイズ

実は

<h3><a href="その記事のパーマリンク">記事の題名</a></h3>

という形式じゃなくても、以下のような形式なら、「はてなスター」を設置可能です。

<タグ><a href="その記事のパーマリンク">記事の題名</a></タグ>

あるいは

<タグ class="クラス名"><a href="その記事のパーマリンク">記事の題名</a></タグ>

という形式で記事の題名と記事のURLの対応関係が記述されていれば、以下の JavaScript を挿入することで、対応できます。

  <script type="text/javascript">
    Hatena.Star.EntryLoader.headerTagAndClassName = ['タグ','クラス名'];
  </script>

「クラス名」を指定したくない場合は

  <script type="text/javascript">
    Hatena.Star.EntryLoader.headerTagAndClassName = ['タグ',null];
  </script>

になります。なお、「クラス名だけ指定して、タグを指定しない」、つまり [null,'クラス名']; というのはできないようです(試しにやってみました)。残念。

まだまだ取り組みは始まったばかりですが、これから継続してさらに新しい仕組みを考案したり、改善していきたいと考えています。ぜひ皆さんにもお付き合い頂ければと思います。

はてなスター日記 - ブログをいっそう楽しくする「はてなスター」をリリースしました

今後、どういう成長の仕方をしていくのか、楽しみにしています。他のサービスとの連動とか、面白くて発展性のあるサービスになるといいですね。

投稿者: tsupo 2007.07.11 午後 09:17 | 固定リンク | このエントリーをはてなブックマークに追加 | このエントリを del.icio.us に登録 このエントリの del.icio.us での登録状況 | このエントリを Buzzurl に追加このエントリの Buzzurl での登録状況 | このエントリをlivedoorクリップに登録 このエントリのlivedoorクリップでの登録状況 このエントリをlivedoorクリップに登録している人の数 | 酢鶏巡回中

楽天市場


ウェブログ・ココログ関連」カテゴリ内の最近の記事

品揃え豊富で安い!NTT-X Store


アマゾンわくわく探検隊

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/6737/15726558

この記事へのトラックバック一覧です: はてなスターを設置してみました:

» FC2 blogに"はてなスター"を設置 from 走って漕いで
「株式会社はてな」からはてなスターというサービスがリリースされましたので、私のブログにも設置してみました。始めて見たblogにコメント書いたりするのは敷居が高くても、クリック1回で星をつけてNice!とい... 続きを読む

受信: 2007.07.12 午前 12:02

» [を] はてなスターがリリース from たつをのChangeLog
今日リリースされたはてなの新サービス「はてなスター」。- はてなスター ... 続きを読む

受信: 2007.07.12 午前 12:44

» はてなスター表示されたみたい from あたしンちのおとうさんの独り言
ヘルプの通りに設置したつもりでしたが表示されなかった「はてなスター」ですが、観測気球の「はてなスターを設置してみました」を読んで、エントリーのタイトル部分のhtml表記をh2からh3に変更し...... 続きを読む

受信: 2007.07.12 午前 12:49

» はてなが2つの新サービス、「はてなスター」と「はてなメッセージ」を公開 from Idler Blog
「はてなスター」と「はてなメッセージ」、はてなが2つの新サービスを公開 [CNET Japan] はてなが、2つの新サービス「はてなスター」と「はてなメッセージ」を公開したとのことです。また近日中には「はてなワール... 続きを読む

受信: 2007.07.12 午前 09:29

» はてなスターを設置 from 独立起業家ネットビジネスブログ:実践起業!成功への道。blogで人脈は作れるか?
はてなスター はてなが新しいサービスを始めました。 ブログなどにスターをつけられ... 続きを読む

受信: 2007.07.12 午前 11:21

» はてなスターをMTに付けてみた from Webfactory : Weblog
さっそくはてなスターを付けてみようと思い、はじめてガイドを読んでみたけどどうもう... 続きを読む

受信: 2007.07.12 午後 02:03

» 웹 세상의 가벼운 커뮤니티 “Hatena Star” from 하테나
미국의 Hatena Inc.가 처음으로 선보인 글로벌 서비스가 “Hatena Star”이다. 기존의 블로그 서비스에서는 다른 블로그와 대화를 나누려면 댓글을 달거나 자신의 블로그에 관련 글을 적고 트랙백을 보내는 방법이 있었지만, 그런 방법에 부담을 느끼는 이용자를 위해 가볍게 별표를 한번 눌러 주는 센스를 보임으로써 타인의 블로그 글에 찬동함을 표시하는 것이 Hatena Star의 개념이다. Hatena 다이어리에는 기존에 키워드 자동 링크 시스... 続きを読む

受信: 2007.07.12 午後 09:10

» はてなスターをつけてみた 【はてな】【技術】 from きびたんの、初めての海外旅行が世界一周一人旅ブログ! / バリ島@インドネシア → シンガポール → マレーシア(いまここ) in アジア
昨日リリースされたはてなの新サービス、はてなスター をこのブログにつけてみました。記事のタイトルの横にがついてるでしょ?これをクリックすると、僕の記事に☆がつけられる!なので、コメントはしないけど、いい記事だ!って時は、ここクリックして☆をつけてくださ...... 続きを読む

受信: 2007.07.12 午後 11:36

» FC2ブログにはてなスターを付けてみる from worris'
はてなスター日記 - はてなスターを外部ブログに貼り付けるための方法を経由して、旧型ブログ : FC2ブログで、はてなスター導入してみたに行ってみると、h3タグを使ったテンプレートならこれでうまくいくんだけど、僕が使... 続きを読む

受信: 2007.07.13 午前 12:43

» Wordpressにはてなスターの色を変えて設置 from Retujyou どうにもならない劣情の種子を植え付けられたばかりに
はてなの新サービス、はてなスターを設置しました。それとスターの色をこのBlogデザインと調和がとれるように黄色から緑色に変えてみました。 はてなスターはどんなサービスかと言う... 続きを読む

受信: 2007.07.13 午前 01:45

» はてなスターの何がダメなのか from talk to oneself 2
とにかく設置する気力がすっかり萎えてしまったので、しばらく様子見です。爆発的に流行ったらあわてて設置するかも。あと、ドキュメントがきちんと整理されたら。 続きを読む

受信: 2007.07.14 午前 12:12

» FC2ブログで「はてなスター」を付けてみる from 自由人PENGの再チャレンジ日記
「はてな」が新サービス「はてなスター」を開始しました。 「はてなスター」とは、ブログを読んだ人がその記事を気に入った場合、その記事に星マークを付けられるサービスです。 FC2ブログの「拍手」と一緒だね。... 続きを読む

受信: 2007.07.14 午前 06:54

» はてなスターのカスタマイズ設置 from Fenrir's BLog
はてなスターというWeb拍手(気に入ったらボタンぽちっとな)のような機能が面白そうなので、このサイトでも設置してみました。今回はその設置に関する技術的なお話です。 このはてなスターですが、JavaScriptをテンプレートに貼り付けることによって実現されています。設置はMovableTypeなどの普通のブログなら解説サイトにあるように とすればよいようですが、デフォルトではhtmlのh3タグ内に記事のタイトル、ならびにその中のaタグに記事への固定リンク(permalink)があることが前提となってい... 続きを読む

受信: 2007.07.14 午後 09:20

» はてなスターを使いはじめました from JRF の私見:雑記
はてなスターを使いはじめました。 まずはてなスターを付けるポリシーですが、自分がその記事を読んで少しでも関心があり文を理解したと思ったら星一つ付けるようにしています。コメント等が気になって、もう一度そこを訪れて読み直したり、コメント等に進展があったりすれば、もう一つ星を付けるといった感じです。 他の方に比べると星を乱発しているのかな? このサイトでもはてなスターを試験的に導入しています。他のサイ... 続きを読む

受信: 2007.07.15 午前 02:25

» はてなスターまとめ from 萌え理論Blog
はて☆すた はてな界隈で大不評の「はてなスター」ですが、カオスあるところにまとめあり。ブログのネタにしたい人は必見のまとめに仕上がりました。あの人もこの人もはてスタについて書いている! 「他はどうでもいいから、とにかく消したい!」という人は下記がまとまって... 続きを読む

受信: 2007.07.15 午後 07:53

» ヤプログにはてなスター設置してみました from 風味絶佳な日々―読書日記―
今更ですが はてなスターとは - はてなダイアリー こちらの記事を参考にさせていただきました。 観測気球:はてなスターを設置してみました 1.はてなスターで自分のブログを登録 2.登録時表示された JavaScript コードを自分のブログの head ~ /hea...... 続きを読む

受信: 2007.12.24 午前 07:50

» はてなスターをwordpressに追加する方法 from あるまとめサイト管理人の思ったこと
はてなスターをwordpressに追加する方法について試行錯誤した。 はてなスターを設置してみました が非常に参考になりました。 http://d.hatena.ne.jp/hatenastar/20070707 から辿ったブログの通りにす... 続きを読む

受信: 2008.10.25 午後 09:56

コメント


とても参考になりました!。
リリース日にこれほど詳細なまとめ、スゴイですね!!。
ありがとうございます。

投稿者: けんたろう (2007.07.12 午前 12:08)


こんにちは。はてなスタッフの山田と申します。はてなスターをご利用いただきありがとうございます。
はてなスターをブログに設置する際の参考リンクとして、この記事をはてなスター日記で紹介させていただきました。もし問題がありましたらお知らせいただけますでしょうか。
http://d.hatena.ne.jp/hatenastar/20070707/1184455480

投稿者: kiyohero (2007.07.15 午後 01:38)


特に問題はありません。わざわざ、ご連絡いただきありがとうございます。

投稿者: tsupo (2007.07.16 午後 11:53)


参考になりました。
おかげさまでブログ以外の普通のページにはてなスターを設置できました。

投稿者: K.Hiwasa (2008.06.03 午後 06:14)

コメントを書く




※イタズラ防止のため、メールアドレスを入力しないと投稿できません。

次からのコメント入力の手間を省くために、名前やメールアドレスをcookieに記憶しますか?


URL を入力すると、その URL にリンクがはられます。
なお、メールアドレスは公開されません。ご安心ください。


ワード

ニッセン

fujisan.co.jp

楽天市場