ブログの更新情報をサイトに載せてみる

ネットで調べたらいくつかの方法が見つかったが、とりあえずGoogleのfeedburnerというのでテストしてみる。このサービスを使うにはgoogleのアカウントがいるので、ない人は作る必要があるが、まぁ作ればいいだけなので特に問題もないやろぉ。

まずhttp://www.feedburner.com/fb/a/homeからfeedburnerのトップページに入って、googleアカウントを入力してログインする。ブログのRSSURLを入力して準備完了。

後は集客支援ってところに、バズ・ブーストってのがあるので、表示したい項目などを調整して、サービスを有効にする。生成されたJavascriptをサイトに貼れば出来上がり♪

↓実際に貼り付けた感じ。あとはcssでスタイル付けもできるみたい、カスタマイズ方法も載ってる♪またその辺はのちほど(^^)

追記:
CSSでスタイル付けをしてみた。が、しかし、CSSに関係ないけど日付、というより時間がずれている(T_T) (2010年1月28日)

追記:
いつの間にやら時間?のずれが直っている?しかし、表示設定で日付を上部にしようとしてもうまく動いてくれない…。なので日付をfloatで浮かせてみた。(2011年4月9日)

追記:
直ったと思っていた時間のずれは直っていなかった。およそ-16時間のずれがある。これが時差によるものだとしたら、現在は夏時間だから-17時間に相当してサンフランシスコ付近ってことになる。ちなみにGoogle本社はシスコにほど近いところにあったりする。。。(関連不明)
 あと、複数のブログを載せたい場合、以下にあるようにclass名とid名を使い分けてスタイルを付けると結構有効にスタイル付けができる。ただし、id名はブログのタイトル等から自動生成されるために、数字から始まっているタイトルなどのid名は無効になる場合がある。(2011年4月16日)

「バズ ブーストの使用と外観のカスタマイズ」には次のように載っています。

<div class="feedBurnerFeedBlock" id="myfeeduri1234">
生成するバズ ブーストにはこのクラスが含まれるため、サイト上の複数のブロックに同様のスタイルを適用できます。また、各ブロックには、FeedBurner のフィード URI や ユーザー ID から構築された固有の ID が適用されるため、スタイル固有のコード ブロックを作成できます。

これをもとに以下のようにCSSを書いたのが上のサンプル
日付の箇所をfloatで浮かせて、リストマークを削除。

/*クラス名利用*/
.feedburnerFeedBlock{
	margin:1em;
	padding:1em;
	font-size:70%;
	border:ridge 2px #ffe0e0;
	width:400px;
	background-color:#ffe8ff;
}
.feedburnerFeedBlock p.feedTitle{
	margin:0;
	padding:0;
}
.feedburnerFeedBlock ul{
	margin:0;
	padding-left:1em;
}
.feedburnerFeedBlock li{
	margin:0;
	padding:0;
	list-style:none;
}
.feedburnerFeedBlock span.headline{
	margin:0;
	padding-left:1em;
}
.feedburnerFeedBlock p.date{
	float:left;
	margin:0;
	padding:0;
}

↑ページトップへ