webサイトにブログを表示させる

JavaScriptを使って簡単にRSSを表示

手順1
  1. Feed2JSのサイトに行く
    • オレンジ色のタブメニューからBuildを選択する

20120303173629

  1. URL Enter the web address of the RSS Feed
    • フォームに表示させたいRSSのURLを記入する。
  2. Show channel?
    • RSSのタイトルと説明の表示をラジオボタンで選択する
    • yes:タイトルと説明を表示
    • title:タイトルを表示
    • no:表示しない
  3. Number of items to display.
    • 表示件数の設定(0設定はRSSに記述の全てを表示)
  4. Show/hide item descriptions? How much?
    • 記事内容の字数設定
    • 0:表示しない
    • 1:全て表示
    • 2~:任意の文字数を設定
    • -1:表示しない(タイトルリンクなし)
  5. Show item author?
    • 作成者表示の設定
    • yes:タイトルと作成者を表示
    • no:表示しない
  6. Use HTML in item display?
    • HTMLの処理について
    • yes:HTML有効
    • no:テキストのみ
    • preserve paragraphs only:HTML無効。改行は
      に変換する
  7. Show item posting date?
    • 日付表示の設定
    • yes:表示する
    • no:表示しない
  8. Time Zone Offset
    • フォームに設定を入力
    • feed:RSSの時間設定をつかう
    • : +9 (日本時間)
  9. Target links in the new window?
    • リンクターゲットの設定
    • n:同じウインドウに表示
    • y:新しいウインドウに表示
    • xxxx:任意の文字列。その名のついたウインドウに表示(使った事無いからよくわからない指定だ)
    • popup:javascriptでpopup表示
  10. UTF-8 Character Encoding
  11. Podcast enclosures
    • RSS 2.0 feedの enclosure要素について、メディアファイルのリンク表示
    • y:表示する
    • n:表示しない
  12. Custom CSS Class (advanced users)
手順2
  • Preview Feedをクリックで確認ウインドウが開く。
    • 表示確認後、設定変更もできる。
  • Generate JavaScriptwをクリックでjavascriptのコードが生成される。
  • htmlファイルにコードを貼付ければ表示される
  • language="JavaScript" は非推奨なので削除する

20120303173837

中身
<script src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fblog.livedoor.jp%2Ftoandfro0225%2Findex.rdf&num=1&date=y&tz=+9&utf=y&css=apmbox"  charset="UTF-8" type="text/javascript"></script>
<noscript>
<a href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fblog.livedoor.jp%2Ftoandfro0225%2Findex.rdf&num=1&date=y&tz=+9&utf=y&css=apmbox&html=y">View RSS feed</a>
</noscript>
.rss-box-apmbox{
	margin-top:350px;
}
.rss-item{
	font-size:10px;
}
.rss-box-apmbox .rss-date:{
	font-size:9px;
	color:#afaaa6;
}

導入サイト:恵比寿の美容室
勉強サイト

メモ

twitterbotのメンテをしようと思ったらすっかり忘れてしまった。やり続けないと忘れてしまうので、この記事も忘れた時用の自分の脳みそです。
プログラミングが出来なくてもtwitterbotがつくれる
導入例