▲PAGE TOP

RSSフィードを読み込み、ホームページに表示する方法



RSSフィードをGoogle Feed APIで読み込んで、ホームページ表示する方法です。

  • レイアウト>ガジェットの追加>HTML/JavaScript 
  • 以下のサンプルHTMLの変更箇所を修正する
  • HTML/JavaScriptのコンテンツにペーストし保存


サンプルHTML
以下の赤文字部分を変更する

///////////////////////////////////////////////////////////////////

<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>



//////////////////////////////////////////////////////////////



▼▼▼▼▼▼▼  2013/3/26以前のfeedをホームページに表示する方法   ▼▼▼▼▼▼▼▼

以下の方法は、Google Feedburnerを使用します。


おちゃのこネットにWhat's New などfeedで読み込んだ情報を掲載する方法です。


方法は以下のとおり
  • FeedBurner - Google にアクセスし、webmaster@****.comのgoogleアカウントでログインする
  • ”新しいフィードを登録!”にて ブログの更新情報ラベルのfeedのURL http://blog.***.com/feeds/posts/default/-/Latest%20News ) を入力して、”次へ”をクリックする ***にはブログのURLを入力する を入力して、”次へ”をクリックする
  • 適当に情報を入力して、登録を完了させる
  • feedBurnerのMYフィード に戻り、登録したフィードをクリックする
  • 集客支援 > バズ・ブースト をクリックする
  • バズ・ブーストのフィード設定を以下のとおりに設定して、”有効にする”をクリックする
    • 最新何記事まで表示: 5件 あとでHTMLにて設定可能です  
    • リンク先表示方法   同じウィンドウで開く を選ぶ
    •  フィード名を表示 チェックをしない
    •  faviconの表示  チェックをしない
    •  記事の所有者を表示します チェックをしない
    •  記事内容を表示 チェックしない
    •  記事発行日を表示  チェックをしない  
    •  ポッドキャストのリンクを表示  チェックをしない
    •  フィードへのリンクを表示  チェックをしない
  • クリック後、フォーム内のコードをコピーする
  • 次におちゃのこネットの設定をします

    【注意】 リストのアイコン のURLを入力してください。 非表示の場合は url(... )の部分を none に変更する
    読み込むフィードは、ブログ(店長日記ほか)など更新頻度が高いフィードを指定します。
////////////////// whatsnew css  Sample HTML ////////////////


<style>

#creditfooter {
display: none;
}

#whatsnew .feedburnerFeedBlock li {
  list-style-image: url(http://www.*****.com/icon-allow-latestnews.jpg);
  list-style-position: outside;
  text-indent: 0px;
  margin-bottom: 5px;
}

#whatsnew .feedburnerFeedBlock ul {
margin: 0px 10px 0px 0px;
padding: 5px;
}

</style>

<table width=540 cellpadding=0 cellspacing=0>
<tr><td><img src="http://www.*****.com/whatsnew.png" /></td></tr>
<tr bgcolor=#487235><td height=2></td></tr></table><div class="feedburnerFeedBlock" id="whatsnew">
<script src="http://feeds.feedburner.com/******?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/ ****** "></a><br/>Powered by FeedBurner</p> </noscript>
</div>
<p></p>

//////////////////////////////////////////////////////////////

whatsnewはcssの.idです。.idを指定することによりこのfeedにのみ、このCSSが適用されます
******と+++++には 画像が保存してあるサーバURLが入ります
その他の太字は適当に変更してください。







COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)