2011 Mar 30

自分用にメモメモ(・w・)

外部RSSを自分のサイトに簡単に貼り付ける方法!

仕事の方でもSEO的に、社員ブログは「ブログ無料サービス」のサイトをオススメしています。アメーバとかヤプログとかですね(・ω・)

オリジナルのブログを作っても...
既存でサービスをしているブログサイトに比べて、圧倒的に第三者に見られる可能性が低い=アクセス・リンク数を稼げないからです。

となると、

会社ページとかにブログの最新情報を載せたいんだけど、場所もプログラムを違うからどうしたら?
って考えが出てきたので、グーグル先生に相談した結果をご紹介します(・ω・)

※2011.0425追記
Google AJAX APIを利用するJavascriptがうまく動作しなかったので、別の所から引用して、猫の方ですこしだけカスタマイズしてみました

ーー

グーグルコードの中に、「Google AJAX API」というサービスを利用します

◎Sign-up for an API Key - Google Loader - Google Code
http://code.google.com/intl/ja/apis/loader/signup.html

上記サイトにて、まず設置するサイトのアドレスを入力。
※グーグルアカウント必須です

2011_0330_01.jpg

赤囲みの場所に「Google API key」が取得できるので、これをメモ。

それから、メモ張とかに下記の本文内容をコピペして、
表示したいブログ等のRSSアドレス入力を記入。

google.load("feeds", "1");

function initialize() {
var feedurl = "対象のRSSアドレス";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(4);
feed.load(dispfeed);

function dispfeed(result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";

htmlstr += '<dl class="blog">';
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];

htmlstr += "<dt>"
var strdate = createDateString(entry.publishedDate);
htmlstr += strdate ;
htmlstr += "</dt>"

htmlstr += "<dd>"
htmlstr += '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a>';

htmlstr += "</dd>"
}
htmlstr += "</dl>";

container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
}
}

function createDateString(publishedDate){
var pdate = new Date(publishedDate);

var pday = pdate.getDate();
var pmonth = pdate.getMonth() + 1;
var pyear = pdate.getFullYear();
var phour = pdate.getHours();
var pminute = pdate.getMinutes();
var psecond = pdate.getSeconds();
var strdate = pyear + "年" + pmonth + "月" + pday + "日" ;

return strdate;
}

google.setOnLoadCallback(initialize);

このファイルを仮に「google_rsscode.js」として保存します。
灰色部分はコードの説明情報なので、省略しても大丈夫です。

ーーーー

var strdate = pyear + "年" + pmonth + "月" + pday + "日" ;

上記の日付表示の部分を下記サイトを参考に変更してみました。

日付部分が『2011年4月25日』といった形で表示されます。

◎日付の表示形式の変更 - フィードの取得 - Google AJAX Feed API入門
http://www.ajaxtower.jp/googleajaxfeed/feed/index5.html

ーーーー

で、この「google_rsscode.js」をサーバへアップロードして。
RSSを表示させたいページのヘッダー情報に下記のjavascript呼び出し文を加える。

<script type="text/javascript" src="http://www.google.com/jsapi?key=※取得したGoogle AJAX Feed APIキー"></script>
<script type="text/JavaScript" src="/js/google_rsscode.js"></script>

それと表示したい箇所に下記のソースコードを貼りつければ完成!

<div id="feed"></div>

定義型リスト形式で表示されるので、スタイルシートでデコレーションしましょー(・ω・)


◎参考サイト様

・Google AJAX Feed APIの設置とカスタマイズ: スポンサー広告:コーディング:WEB屋log
http://sonicweb.blog69.fc2.com/blog-entry-8.html

・外部RSSをサイト内に簡単に表示させる方法|楽してプロっぽいデザイン|Forty-N-FiveBlog
http://forty-n-five.boy.jp/blog/2010/03/rss_1.php

TrackBack

このエントリーのトラックバックURL; http://mtw.cocotte.jp/cgi-bin/mt4/mt-tb.cgi/626
このエントリーのリンクURL: http://mtw.cocotte.jp/blog/diary/html/2011/03/30-1930.php

Comment

■コメント

クロスメディアは必ず勧めてるけど、
小さい会社とかになるとさすがに誰がブログかくのよ!になるから、なかなかね…(´・ω・`)

結希猫 Author Profile Page | 2011年4月 4日 19:09

アクセス数は大事。

でも認知されていないブログを見つけるのは大変。ライバルも多いし。

なのでクロスメディアやSNS、Twitter、Facebookなどでも仕掛けることも必要なのだ。

リチャード | 2011年4月 2日 00:45

おひさー(・ω・)ノ

ふむふむ。
SEOというか、ブログ自体のアクセス数を稼ぐキッカケとしては良さそうに見えるんですけどね

結希猫 Author Profile Page | 2011年4月 1日 17:52

おひさ〜

無料ブログはSEOに有利というのはすでにムリポ。

自ドメイン内が良いとのこと。

りちゃーど | 2011年3月31日 20:11

■コメントを投稿

  コメントをプレビュー

ご利用のブラウザ、設定ではコメントのリアルタイムプレビューはご利用になれません。


画像の中に見える文字を入力してください。

Amazon オススメ人気RANKING BEST8

Amazon ねんどろいど人気RANKING BEST8

Site Search

Tag Cloud


2002.6.6 count start