今更ですが、Google Feed APIを利用してRSSを取得・表示する方法と、そのタイトルをCSSで省略表示させる方法を学びましたのでメモメモ。

みんなだいすきGoogle Feed API

サイト制作の際、トップページなどに外部ブログのRSSを表示させたいときってありますよね。
私は過去にバンドの公式サイトを制作していた時、メンバーのブログRSSを表示させてくれとよく頼まれたものです。
（その時は無料RSSサービスを使っていました・・・）

そんなときに役立つのがGoogle先生による『Google Feed API』。
表示件数や表示させたい内容、それを囲むタグなどわりと自由にカスタマイズできるので多くのWEB屋さんに愛されているようです。
何かいい方法はないか呟いたところ、多くの方からこちらを薦めていただきましたヾ(*´∀｀*)ﾉ

ちなみに、以前はAPIキーを取得する必要があったようですが現在は必要ありません。お手軽でうれしいですね～ :)

RSS取得のサンプルコード（日付つき）

今回わたしが利用した日付つき表示のサンプルコードです。
RSSは日付がないとしっくり来ない派です。いつ更新されたかって大事だと思うです。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

//Google Feed Api
google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("表示させるRSSフィードのURL");
feed.setNumEntries(表示させたい件数);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var dd = new Date(entry.publishedDate); // now
var yearNum = dd.getYear();
if (yearNum < 2000) yearNum += 1900;
var m = dd.getMonth() + 1;
if (m < 10) {m = "0" + m;}
var d = dd.getDate();
if (d < 10) {d = "0" + d;}
var date = yearNum + "." + m + "." + d + " ";
container.innerHTML += "<li><span>" + date +" </span>" +"　<a href='" + entry.link + "' target='_blank'>" + entry.title + "</a></li>";
}
}
});
}
google.setOnLoadCallback(initialize);

</script>

<ul id="feed"></ul>

これでキレイにリスト表示されます♪こーゆうのって、失敗して調べたり試行錯誤した結果ちゃんと表示できた時の快感がたまらないですねｗ

参考：Google AJAX Feed API 日付の２桁（ケタ）表示｜ホーリーのブログ「ホリブロ」

指定した長さからはみ出した文字列を省略表示するCSS

こちらも目にしたことはあっても方法を知らなかったことの1つで、
RSSで取得したタイトルって長さがバラバラで1行で終わったり2行になってしまったり、
スタイルを指定するのが大変です。

そこでtext-overflowというCSSを利用すると、はみ出た分を「…」という省略記号に差し替える事ができるので
widthを指定してあげればスタイルがキレイに整うのです♪

対応ブラウザはIE6～,Firefox7.0～,Opera,Chrome,Safariと幅広いようですね。FFだけ注意が必要かな。
（※それと、複数行には対応していないようです）利用する際は改めて各自でご確認願います。

サンプルコード

#feed li{
	overflow:hidden;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis; /* Safari */
	-o-text-overflow: ellipsis; /* Opera */
	white-space: nowrap;
}

ピンクの部分、すべて必須です。
text-overflowだけで良いのかと思ったら動かなくて戸惑いましたｗ

参考：Firefoxでもtext-overflowを実現するテクニック | CSS-EBLOG

ゴール。

一応、デモを作ってみました。スマホの人みにくくて申し訳ないですが、Google Feed APIとtext-overflowを組み合わせるとこのようになります :)

どちらも一度じゃ覚えにくいので、やり方を忘れたらこの記事を見に来てくださいね！(●’◡’●)ﾉ♥
（きっとわたしが一番みにくるｗ）
以上、霙でした！