WordPressに、Google AJAX Feed APIで画像を出す。
普通のＨＴＭＬファイルに、下記の「Google AJAX Feed API」を使ってJavaScriptを仕込み、他のブログから画像を出すことはできるんですが・・・
・画像を出す場合は、Google AJAX Feed APIのJASONフォーマットのcontent内に画像があればいいんですが、そうでない場合はXMLフォーマットで取ってきて、画像タグを取得し表示させる必要があります。
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("RSS URL");
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
feed.setNumEntries(20);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("rssfeed");
var items = result.xmlDocument.getElementsByTagName("item");
htmlstr = "<ul>";
for (var i = 0; i < items.length; i++) {
// XMLフィールド取得
var titleElement = items[i].getElementsByTagName("title")[0];
var title = titleElement.firstChild.nodeValue;
if (title.indexOf("PR:") == 0) {
continue;
}
var linkElement = items[i].getElementsByTagName("link")[0];
var link = linkElement.firstChild.nodeValue;
var dateElement = items[i].getElementsByTagName("dc:date")[0];
var date = dateElement.firstChild.nodeValue;
var enclosureElement = items[i].getElementsByTagName("enclosure")[0];
var enclosure = enclosureElement.attributes.getNamedItem("url").value;
var descriptionElement = items[i].getElementsByTagName("description")[0];
var description = descriptionElement.firstChild.nodeValue;
//html組み立て
//見出し
htmlstr += "<li>";
htmlstr += "<div class='blog-date'>" + date + "</div>";
htmlstr += "<div class='blog-title'><a href='" + link + "'>" + title + "</a></div>";
htmlstr += "<div class='blog-clear'></div>";
htmlstr += "</li>";
//写真
if (enclosure) {
htmlstr += "<div class='blog-img'>";
htmlstr += "<img alt='img-" + i + "' src='" + enclosure + "'></img>";
htmlstr += "</div>";
}
//本文
htmlstr += "<div class='blog-content'><p>" + description + "</p></div>";
if (enclosure) {
htmlstr += "<div class='blog-clear'></div>";
}
}
htmlstr += "</ul>";
//追加
container.innerHTML = htmlstr;
}
});
}
google.setOnLoadCallback(initialize);
</script>
しかし！、上記で使ったのとほぼ同じJavaScriptを使っているのに、WordPress内で実行すると画像だけが出たり、出なかったりします・・・？ （出ない場合が多いですが）
一旦、普通のＨＴＭＬファイルで表示させてから、ＷｏｒｄＰｒｅｓｓを表示すると画像が出る場合が多いので、キャッシュがらみの問題か？と思ってはいるのですが・・・。
※一難去って、また一難。WordPress嫌いになりそう・・。
※誰か、解決案のある方、コメントをどうぞ。
————————————————————————————————–
自分で回答するのもなんですが、なんとなく原因がわかりました。
上記のfeed.loadの関数部分は別ファイルにしていたのですが、それをgoogle.setOnLoadCallback(initialize); より前に定義すると直りました・・・・。（ガーン・・・）
.
<script type="text/javascript" <script type="text/javascript"
src="<?php bloginfo('template_url');?>/css/default.js"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("RSS Feed");
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
feed.setNumEntries(5);
feed.load(dispfeedXML);
}
google.setOnLoadCallback(initialize);
</script>
Leave a Reply