診断士の経営視点と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 さんに感謝! 塩尻、お近くです。



さっそく

挑戦してみたい♪気分です(笑)
前から気になってました!

でも私にはハードルが高そうな...(><)
まずは、、試してみたいと思います^^
[ 編集 ] [2008/02/21 10:03]

補足 APIキー不要

APIキーを取得しなくても利用可能になりました

最初の書き出しのみ変更します

<script src="http://www.google.com/jsapi?key=notsupplied-wizard" type="text/javascript"></script>
[ 編集 ] [2010/05/17 17:03]

コメントの投稿













管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://wiz2.blog16.fc2.com/tb.php/265-7f973d25








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