Webサイト制作におけるRSSの設置方法

HTML Javascript

Webサイト制作において、自分や知人のブログなどの更新情報を自分のサイト内に表示して、簡単にチェックできると便利である。

今回はgoogleのAPIを利用してブログなどのRSSを取得して自分のサイト内に設置する方法を簡単にまとめておく。

その前に、まずRSSとAPIとは何かを確認しておく。


では設置手順。

1．HTMLのhead内に下記の2行を記述する。

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

2．HTMLのbody内に下記のようなidを指定する。

<div id="feed">Webサイトデザイン制作の新着Tips</div>

以下、注意点。

  • タグはdiv以外でも可。
  • divタグに書いた文字列はSEO対策にはなるが表示はされない。
  • divタグに書いた文字列は空でも構わないが、「id="feed"」の指定を含むタグの記述がないとRSSが表示されない。


3.設置したい自分のブログなどのRSSを取得する。
　参照：http://web-terminal.blogspot.jp/2013/07/19feedrssatom.html

4.下記のようなJavascriptファイル（feed.js）を作成してHTMLで読み込む。

// JavaScript Document
google.load("feeds", "1");

function initialize() {
  var control = new google.feeds.FeedControl();
  var feedurl1 = "取得した表示させたいRSSのURL";

  control.addFeed(feedurl1, "RSS設置部に表示させたいタイトル");
  control.draw(document.getElementById("feed"));
}
google.setOnLoadCallback(initialize);

5.これだけで設置は完了。ここから先はCSSなどで見栄えを整えていく。

他、設置に関するCSS関連補足情報。

  • CSSの指定は、ブラウザでHTMLファイルを開いた（表示した）状態で要素検証や開発モードにして、指定したい場所の記述（子孫セレクタ）を調べながら行う。
  • 「white-space: nowrap;」⇒表示上複数行になるものを折り返して表示させず、1行に表示できるところまでだけを表示する。RSS設置で表示されるブログなどのタイトル部に有効。
  • 「text-overflow: ellipsis;」⇒表示しきれない（範囲からオーバーフローする）場合に表示可能範囲の最後を「…」表示にする。RSS設置で表示されるブログなどのタイトル部に有効。

以下、上記２つをCSSで指定した場合のコードと表示結果。

・どちらも指定しない場合

div#feed .gfc-result div.gf-title {
　width: 400px;
　height: 30px;
}

この場合の表示結果。
←クリックで拡大表示

・「white-space: nowrap;」のみ指定した場合

div#feed .gfc-result div.gf-title {
　width: 400px;
　height: 30px;
　white-space: nowrap;
}

この場合の表示結果。
←クリックで拡大表示

・「text-overflow: ellipsis;」のみ指定した場合

div#feed .gfc-result div.gf-title {
　width: 400px;
　height: 30px;
　text-overflow: ellipsis;
}

この場合の表示結果。
←クリックで拡大表示
「text-overflow: ellipsis;」だけでは意味がないように見える。

・両方を指定した場合

div#feed .gfc-result div.gf-title {
　width: 400px;
　height: 30px;
　white-space: nowrap;
  text-overflow: ellipsis;
}

この場合の表示結果。
←クリックで拡大表示

上記結果から、使うなら両方を一緒に指定するのが良いと思われる。