診断士の経営視点とSEのシステム技術の両面からIT・システム開発・Web技術+アウトドア情報を提供しています

トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報








スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[--------] スポンサー広告 | |

ブログの記事をサイトに貼り付ける 

ブログのRSSを取得して他のサイトに貼り付ける

MovableTypeやWordPresをCMSとして使い、サイト全体をブログで構築していれば、新着記事をトップページに引用することができる。イベント情報をアップすれば、トップにも記事が反映されるので、利用者にも親切・SEO的にもOK・サイト管理も簡単になる という三方一両得的なメリットが享受できる。

無料ブログやブログを日記としてしか使っていない場合は、このメリットは生かせない。ただJavaScriptやAjaxをHTMLに埋め込めば、ブログのRSSを取得して、別のサイトに表示することはできる。スクリプトで表示しているだけなのでSEO面ではメリットにはならないが、いちいちブログの記事の抜粋をHTMLに追記してアップする苦労からは解放される。

PHPを使えばHTMLに直接書き込むことができるのでSEO的にも有利となるが、サーバの制約がありPHPが使えないこともある。というわけでJavaScriptを使う方法が一般的だ。Ajaxも使えるが、別ドメインのデータが取得できないという制限があるので同一サーバにサイトとブログを持つ人に限られていた。

GoogleAPIでRSSを取得する

GoogleがGoogleAJAXFeedAPIを提供してくれている。これは別サーバのデータを取得できないというAJAXの制限をGoogleがプロキシサーバ(代理サーバ)を立てて取得してくれる という仕組み?だ。とにかく利用してみよう。

GoogleAPIでRSSを取得してみた

まづGoogleAPIを利用するためにAPIキーを取得する必要があるが、GoogleMapAPIと同じキーなので取得済みだった。(未取得ならGoogleのガイダンスに従って取得しておこう)Google AJAX Feed APIを利用するページが開かれた。利用許諾を承認して、APIを使うサイトのURLを入力して Generate API Key ボタンをクリックする。Your API Key と スクリプトが表示されるので、スクリプトをHTMLに貼り付ければとりあえずの作業は終了だ。

スクリプトは以下の通り

<script type="text/javascript" 
src="http://www.google.com/jsapi?key=XXX"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
      var feed = new 
        google.feeds.Feed("http://www.digg.com/rss/index.xml");
      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 div = document.createElement("div");
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);
 
    </script>

GoogleAPIスクリプトをカスタマイズして概要を表示させる

貼り付けたHTMLには、ブログ記事のタイトルが表示されている。既定ではタイトルしか表示しないようだが、ここは概要や日付けも表示させたいところだ。貼り付け先のスタイルにあわせてHTMLタグも入れたい。

以下の行をコメント化する

            var div = document.createElement("div");
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);

代わりに下の行を追加

            var entry = result.feed.entries[i];
            var eTitle = entry.title;
            var eContent = entry.content;
            var eDescription = entry.contentSnippet;
            var eDate = entry.publishedDate;
            container.innerHTML += "<h4>"+eTitle+"</h4>";
            container.innerHTML += "<p>" + eDate+"<br />";
            container.innerHTML += eDescription+"</p>";

RSSの表示画像はこんな感じ

GoogleAJAXFeedAPIこのページは貼り付けたRSSを表示しているだけ。新着情報やブログ新着記事など、本格的に利用する場合は、トップページ等の貼り付けるページに feed というdivを作り、h4 p へのスタイルを指定することになる。

GoogleAPIは検索エンジンのペナルティもなしで安心だ

せっかくブログを書いていても肝心のネットショップのトップページに記事が反映されないのはモッタイない ということで、これまでいろいろなサービスを取り上げたことがあるが、いずれも作者やサービス提供サイトへのリンクが避けられなかった。このGoogeAPIならリンクの表示もなく、飛び先もGoogleなので検索エンジンのペナルティを気にすることなく、安心して使える。お勧めです。

この記事は http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter22/001/index.html を参考にさせていただきました。AJAXだけでなく JavaScriptの情報も参考にさせていただいています。 openspc@po.shiojiri.ne.jp さんに感謝! 塩尻、お近くです。

スポンサーサイト

IE 7自動更新と2つのモード 

IE7の自動更新が始まった

2月13日からWindowsXPユーザでIE7に乗り換えていないユーザに対して、マイクロソフトが自動更新の通知を始めた。

INTERNET Watchの記事によると、『 マイクロソフトでは、セキュリティ面などを強化したIE7への移行を進めたい 』 が 『 日本ではIE7で利用できなくなるWebアプリケーションなどに配慮する形で、これまで自動更新によるアップデートを見送ってきた 』 とのこと。しかし、『 IE7への対応が完了した 』 ということで昨日から自動更新に踏み切ったようだ。

皆さん、IE7への対応は完了していますか?

そもそも、IE7への対応ってなんでしょう?

IE7の自動更新とは

 ⇒ IE 7自動更新と2つのモード の続きを読む
[2008-02-14] ウェブ講座&SEO | TB(0) | CM(1)






トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。