|
Google AJAX Feed API。
昨日までこんな名称のものが存在することも知りませんでした。
名前の如く、Googleが提供しているサービスです。
なぜこれを使ったかといいますと、ブログのエントリーを別サイトに表示したいと思っていたからです。
例えば、このブログで「酒類販売免許」というカテゴリーがあります。ここに酒販関係の情報を書くのですが、これを自分の運営している酒類販売のページと連動させたいと考えていました。当該ページに、ブログの更新情報が自動的に掲載されたらなぁと。他にもテーマごとに関連記事を表示したいわけです。ところが、なかなかうまく（安定させて）表示させる仕組みが見つからずだらだらと数か月が経過してしまいました。
で、年末バタバタしているのが一段落して、久しぶりに（荒々しい）ネットサーフィンをしていたら、偶然Googleのサービスが目に留まったのです。
それがGoogle AJAX Feed APIです。
この通りに導入しようとしたらうまくいかず、いろいろ導入方法を模索しているうちに、何とかできました。
コードをここにメモしておきます。
－－ここから－－
【ヘッダ部分の記述】
<style type="text/css">
body *, table *,
body {
font-family: "Arial", sans-serif;
font-size: 13px;
}
#feedControl {
width : 400px;
margin: 20px;
}
</style>
<script src="http://www.google.com/jsapi?key=取得したキー" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[
// load the AJAX Feed API
google.load("feeds", "1");
function OnLoad() {
// create a feed control
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("ここにフィードRSSを記述", "タイトルを記述");
feedControl.draw(document.getElementById("feedControl"));
}
google.setOnLoadCallback(OnLoad);
//]]>
</script>
<script src="http://www.google.com/jsapi/?key=取得したキー"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontr.js"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
color: #9CADD0;
}
</style>
<script type="text/javascript">
function load() {
var feed ="ここにフィードRSSを記述";
new GFdynamicFeedControl(feed, "feedControl");
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>
【以下は本文内に】
<div id="body">
<div id="feedControl">Loading...</div>
</div>
－－ここまで－－
出来上がりは、こんな感じです（オレンジの点線囲い部分）。
●酒類販売免許サイトURL
（余談）AJAXといえば、ネットの世界に入るまではこちらしか知らないので、「アヤックス」と言っていましたよ。今回の使い道の場合は「エージャックス」なんですね。
|
この記事を印刷
