Livedoor Blogにはてなブックマーク人気エントリーやコメントを追加する
最近、 livedoorクリップ や @niftyクリップ、 イザ！ブックマーク、 Googleブックマーク などなど、様々なブックマークサービスが利用されていますが、その中で自サイトを検索していて気になったのがはてなブックマーク です。
何が良いかって言うと、こんな風にコメントがもらえることです。
これをLivedoor Blog上に実装してみましょう。
ちなみに、あまりカテゴリアーカイブや月別アーカイブに実装しても意味が無いので、カスタマイズ/管理のデザインのカスタマイズからトップページ や個別ページのカスタマイズにとどめるのが妥当だと思います。
まず、使用する。 hatena-bookmark-anywhere.js を
</head>
の直前に入れます。
うちの場合は、
| <title><$BlogTitle ESCAPE$> - Windows 2000 Blog</title> <script type="text/javascript" src="/blackwingcat/hatena-bookmark-anywhere.js"></script> </head> <body> <a name="top"></a> <$BlogHeader$> |
こんな感じになっています
うちではちょっとカスタマイズした hatena-bookmark-anywhere.js を使っていますが、オリジナルは masuidrive on rails さんのところのを使っています。
人によって、はてブコメントを入れる場所を変えていますが、私の場合は、
<div id="hatena_bookmark_anywhere"></div>
トップページの
<!-- Loop End -->
<$IndexNavigator$>
</div>
の直前
と、個別ページの
<IfArticleAllowPing>
<div class="trackbackurltop">
</div>
の直前に挿入しています。
ちなみに、ページ名はLivedoorではマクロで<$ArticlePermalink$>と定義されているので、
hatena_bookmark_anywhere_url='<$ArticlePermalink$>';
のようにすることも可能です（デフォルトで取ってくることが出来ますが）
ついでなのでAddClipの設定も説明しましょう。
こちらは自動でJavaScriptを生成してくれるので、後は挿入場所を考えるだけです。
私の場合はトラックバックとツールボックスの間にこのように入れています。
| <a href="#trackback">TrackBack(<$ArticlePingCount$>)</a></IfArticleAllowPing> <!-- AddClips Code START --> │ <script type="text/javascript"> <!-- AddClipsUrl = '<$ArticlePermalink$>'; AddClipsTitle = '<$ArticleTitle ESCAPE$>'; AddClipsId = '172449D6AB8E1'; AddClipsBcolor='#000000'; AddClipsNcolor='#333333'; AddClipsTcolor='#ffffff'; AddClipsType='1'; AddClipsVerticalAlign='middle'; AddClipsDefault='bookmark'; // --> </script> <script type="text/javascript" src="/blackwingcat/addclips.js" charset="euc-jp"></script> <!-- AddClips Code END --> │<$ArticleToolBox$><IfArticleCategory1>│ |
どこに入れるかは 「|」で区切られているので分かりやすいと思います。
後、はてなブックマーク人気エントリーですが、これはプラグインにフリースエリアとして実装します。
| <script language="javascript" type="text/javascript" src="http://b.hatena.ne.jp/js/widget.js" charset="utf-8"></script> <script language="javascript" type="text/javascript"> Hatena.BookmarkWidget.url = "http://blog.livedoor.jp/blackwingcat/"; //自サイトのURLを入れます Hatena.BookmarkWidget.title = "はてぶ人気エントリー"; //タイトル Hatena.BookmarkWidget.sort = "count"; //並べ替える方法 他に hot(注目) eid (登録新着順) があります。 Hatena.BookmarkWidget.width = 160; //横幅 Hatena.BookmarkWidget.num = 5; //表示件数 //Hatena.BookmarkWidget.threshold = 0; //これは私の作ったカスタマイズ版独自。 Hatena.BookmarkWidget.theme = hatenadiary; //notheme と otherが他に選べる。 Hatena.BookmarkWidget.load(); //必須 </script> |
のように実装します。
ただ、http://b.hatena.ne.jp/entrylist/json にバグがあるような…。
なぜか、10個以上エントリあるのに特定のエントリが入るとそこで表示が切れちゃうんですよね。
Translate
Comments