はてなブックマークと連携してブログを盛り上げよう

自分のブログの「人気エントリー(はてなブックマークでのブックマーク数が多い記事)」を表示するブログパーツや、記事ごとのエントリーページを表示するアイコンなどを、簡単にブログに組み込むことができます。

はてなブックマークで人気の記事を紹介するブログパーツが設置できる

人気エントリーを表示するブログパーツを設定する

自分のブログの人気エントリー(はてなブックマークで多くのユーザーにブックマークされた記事)を表示するブログパーツ(はてなブックマークでは「ウィジェット」と呼んでいます)を作成してみましょう。

取得したウィジェットは、JavaScriptを利用したブログパーツに対応したブログサービス(FC2ブログ、livedoor Blog、ココログなど多くのサービス)では、各サービスの使い方に従って簡単に貼り付けることができます。

はてなブックマークウィジェット
http://b.hatena.ne.jp/entrylist/widget

1.ウィジェットの設定ページを表示する

1 ブラウザのアドレスバーに「http://b.hatena.ne.jp/entrylist/widget」と入力,2 [Enter]キーを押す,3 [URL]にブログのURLを入力,4 [プレビュー]をクリック,[はてなブックマークウィジェット]が表示された

2.ウィジェットのコードを設定する

1 下にスクロール,ウィジェットの表示幅を変更できる,新着エントリー(最近5人以上のユーザーにブックマークされた記事)、人気エントリー(通算でブックマーク数の多い記事)のどちらを表示するか選択できる,[タイトル]を書き換えて[プレビュー]をクリックするとブログパーツのタイトルが書き換わる,[プレビュー]にブログパーツのサンプルが表示された

2 ここをクリック,3 [Ctrl]+[C]キーを押す,クリップボードにコードがコピーされた    ,コピーしたコードを利用して、利用しているブログサービスの説明に従い、ウィジェット(ブログパーツ)の設定をする,コードが選択された

はてなダイアリーにウィジェットを表示させよう

「はてなダイアリー」は、はてなブックマークと同じ株式会社はてなが提供するブログサービスです。どちらも同じはてなIDで利用できるので、はてなブックマークと一緒にはてなダイアリーでブログを始めてみるのもいいでしょう。

「はてなダイアリー」にも、はてなブックマークのウィジェットを貼り付けることができます。以下に操作手順を紹介します。

1.[日記管理ツール]を表示する

はてなダイアリーの自分のページを表示しておく  ,[管理]をクリック

2.[かんたんデザイン設定]を表示する

[デザイン]をクリック  ,[日記管理ツール]が表示された

3.ウィジェットを設定する

1[サイドバー]をクリック    ,2 下にスクロール,[かんたんデザイン設定]が表示された

3[次へ]を2回クリック

4[ブログパーツ]にチェックを付ける  ,5「ウィジェットのコードを設定する」の手順2でコピーしたコードを貼り付け      ,6[決定]をクリック  ,7[この内容に変更する]をクリック        ,ポップアップが表示された

4.ウィジェットを確認する

1[日記の確認]をクリック    ,設定が完了した  ,[デザイン変更を保存しました。]が表示された

2[人気エントリー]が表示されていることを確認  ,はてなダイアリーの自分のページが表示された  ,ウィジェットの幅が広すぎる場合などは「ウィジェットのコードを設定する」の手順1で設定し直す

[ヒント]はてなブックマークウィジェットの幅は調節できる

はてなブックマークウィジェットをブログに貼り付けたとき、ウィジェットの幅が広すぎ、または狭すぎて、デザインに問題が生じてしまう場合があります。そのような場合は、コードをコピーする前に幅を調節しましょう。「ウィジェットのコードを設定する」の手順1で、[幅]の[デフォルト]をクリックし、[150px]、[200px]、[250px]のいずれかをクリックします。

[ヒント]自分のブログにブックマークアイコンを表示する

ブログの読者に記事をその場でブックマークに追加してもらうための[↑B]アイコンや、何人がブックマークしているかを確認してもらうための[○○users]アイコンを付けることができます。はてなダイアリーでは[管理]−[設定]−[記事の設定]をクリックし、[「このエントリーを含むブックマーク」アイコンを表示する]、[「このエントリーのブックマーク数」を表示する]のそれぞれにチェックを付けることで、表示されるようになります。その他の主要ブログサービスでの設定方法は、以下のはてなのページで解説されています。

▼自分のブログに「↑B」アイコンを表示する
http://b.hatena.ne.jp/help/button

▼自分のブログに「○○users」を表示する
http://b.hatena.ne.jp/help/count