自分のブログの記事リスト等にはてなブックマーク件数を表示する

 最近よく、はてブ数が表示されているブログを見るので、どうやるのかなぁと調べてみたら、思いっきり載っていました。

 

 

はてなブックマーク - ヘルプ - 自分のブログに「○○users」を表示

このページでは、このブックマーク数を画像で取得するAPIを利用して、各ブログサービスで被ブックマーク数を表示させる方法を紹介しています

ということで、将来のために実現方法を記述しておきたいと思いますｗ

Blogger での実現方法

• 「テンプレート」タブから「現在の内容を編集」欄の <!-- Begin #main --> と <!-- End .post --> に囲まれた以下の部分を次のように編集します。

... </BlogItemCommentsEnabled></MainOrArchivePage> <$BlogItemControl$> </p> ...

• 上記を下記のように編集

... </BlogItemCommentsEnabled></MainOrArchivePage> <$BlogItemControl$> <a href="http://b.hatena.ne.jp/entry/<$BlogItemPermalinkUrl$>"> <img src="http://b.hatena.ne.jp/entry/image/<$BlogItemPermalinkUrl$>"> </a> </p> ...

 

• ※実際には改行をいれずに一行で記述してください。

ということで、参考までに「ブックマーク数を画像で取得するAPI」についても記述しておきます。（ほとんど引用ですけど・・・）

ブックマーク数を画像で取得するAPI

http://b.hatena.ne.jp/entry/image/エントリーのURL

という URL を指定すると、そのエントリーのブックマーク数を画像で取得することが可能です。

例えば http://d.hatena.ne.jp/ のブックマーク数を対象とした場合、

<img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/">

と記述することで と画像でブックマーク数を表示することができます。これにより、任意のウェブページにブックマーク数を表示させることが可能です。

画像の大きさは以下の三サイズを用意されています。

大

http://b.hatena.ne.jp/entry/image/large/エントリーのURL

中 (デフォルト)

http://b.hatena.ne.jp/entry/image/normal/エントリーのURL

小

http://b.hatena.ne.jp/entry/image/small/エントリーのURL

これがわかっていれば、気軽に記事や記事リンクのリスト等にブックマーク数を追加できますね！

[続きを読む]

Blogger には「続きを読む」な機能がないの？

Bloggerで、記事を書き始めて、なんかページが長い事に気づいたまえ、LiveDoor等で記事を書いていたときはもっとすっきりしていたような・・・

なんか、そんな気がして、ちょっと考えてみた

そうか！！

Bloggerには、「続きを読む」がないのか！という事で、 クリボウの Blogger 入門さんの: Blogger にも「続きを読む」機能 という記事を参考にこのブログでも「続きを読む」を実践してみた。

原理は、スタイルシートによって、表示される内容の見栄えを変化させる事で「続きを読む」機能を実現するという事らしい。

ということで、まずは、ブログのレイアウト設定を変更させるところからだ

管理画面からテンプレート → HTML の編集 とページを開き、「ウィジットのテンプレートを展開」のチェックボックスにチェックを入れる。

で、下記のように

テンプレートの内容を書き換えてみた クリボウの Blogger 入門さんに書いてある内容と一部、異なったけど、まあここだろという事で、下記のように書き換えた

<b:widget id='Header1' locked='true' title='RoughStyle (Header)' type='Header'>
<b:includable id='main'>
<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
.fullpost {display:block;}
.readmore {display:none;}
<b:else/>
.fullpost {display:none;}
.readmore {display:block;}
</b:if>
</style>

<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
・・・ 省略 ・・・
</b:includable>
</b:widget>

まずは、この部分を探さなくてはいけないんだけど、案外下のほうにあるのでスクロールしまくって探そう。
で、該当部分を見つけたら（赤部分は、人によって異なる）、青い部分を追記して、テンプレートの保存をする。

まあ、簡単なので誰でもできると思う。
後は、投稿するときに省略する部分(続きを読むの続きの部分)を以下のようにfullpost属性のDivタグで囲めばいいのだ。

記事前半
<div class="fullpost">
続きの部分
</div>
<div class="readmore">
<a href="この投稿自体の URL">[続きを読む]</a>
</div>

ただ一点面倒なのは、URL部分が投稿前にはわからないので(予測はできる)毎回、該当記事のURLを調べて投稿後に書き換えないといけない事。なんとかならんのかねぇ

[続きを読む]