2008年04月19日

はてなブックマークのコメントをブログ上で表示してみた

はてなブックマークというソーシャルブックマークサービスを利用されている方は多く、当ブログでもブクマボタンの他、エントリにブクマが付くとそれが表示されるブログパーツを使っています。

参考:Seesaaがソーシャルブックマークに対応したらしい

はてブコメントは、それをクリックすれば見られるのですが、やっぱ不便かもとは思っていました。

このほど、「はてブのコメントをまんま、ブログ上で表示してしまう」スクリプトを作っちゃった人がいます。

こんな面白いものは、ありがたく使わなきゃソンソン!

ということで、masuidrive on railsさんの「ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js」を、Seesaaで貼ってみました!

ちょっとアクロバットなやり方です(^_^;


1)上記のリンクをクリックし、エントリの指示通りにスクリプトファイル(.js)をダウンロード。
2)ブログの管理画面(マイブログ)を開き、「記事投稿」→「ファイルマネージャ」でスクリプトファイルを適当な場所にアップ。アドレスを控えておく。
3)次に「デザイン」→「HTML」を開き、デフォルトHTMLのままの場合は「HTMLの追加」を押す。すでにHTMLをいじっている人は適用中のHTML名をクリック。
4)開いた編集画面で</head>タグを探し、その手前に、上記エントリにあったHTMLのうち、最後の1行を除いてコピペ。この際、さっきの「.js」ファイルのアドレスを反映するのをお忘れずに!
5)変更内容を保存し、結果を反映。
6)次に「デザイン」→「コンテンツ」を開く。で、左側にある「コンテンツ」バーの「+」をクリックして、中を開く。
2008-hbcom-gamen1.jpg

7)開いた窓にある「記事」の箱を、右側に表示されている「記事」の下にドラッグアンドドロップ。
8)左下にある「オプション」の箱の中の「ページアイコンの表示」のチェックを入れる。
2008-hbcom-gamen2.jpg
9)すると、右側に表示されたそれぞれの箱に4つのアイコンが出る。で、先ほど並べた「記事」の2つの箱のアイコンをクリックして操作し、下のようにする。
2008-hbcom-gamen3.jpg
10)で、下の箱(記事ページのみ表示になっている)の「記事」をクリックし、開いた編集画面の中から、右上の「コンテンツHTML編集」をクリック。開いた編集画面の中の「<script type="text/javascript" language="JavaScript" charset="utf-8" src="<% site_info.blog_url %>/js/bookmark.js"></script>」というくだりを探し出し、そのすぐ下に、元ネタのエントリに載っているHTMLタグの最後の1行「<div id="hatena_bookmark_anywhere"></div>」を書き加え、保存。
11)箱が一杯並んだ画面に戻って、下の「設定を反映する」をクリックし、すべてのページを再構築します。

以上で終了!

これにより、トップページやカテゴリ画面では従来通りですが、1記事のページに進むと、当該記事に付いたブックマークコメントが自動的に表示されます。

また、こちらのエントリには、配色の変更などの設定について出ているので、参考にされるといいと思います。



オイラは、トップページやカテゴリ画面では「Seesaaがソーシャルブックマークに対応したらしい」で紹介した、はてなのブログパーツを仕込み、記事ページではこれに代えて「hatana_bookmark_anywhere.js」を使いました。


その効果は、例えばウチのブログではてブコメントが付いている
http://komelong.seesaa.net/article/58474065.html
http://komelong.seesaa.net/article/25512556.html
http://komelong.seesaa.net/article/29094870.html
などをご覧ください。



ただ…


ウチのブログって、滅多にブクマが付かないんですよね(爆)


なので、上記エントリ以外はかなり寂しいことにil||li _| ̄|○ il||li


それはともかく、Seesaaの方、もしよかったら試してみては?

komelong_01-160.gif


posted by こめろんぐ at 20:04 | Comment(0) | TrackBack(0) | 日記なのか? | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。