人気ブログランキング | 話題のタグを見る

Exciteブログにiframeを使ったJognoteのブログパーツを貼る

Exciteブログにiframeを使ったJognoteのブログパーツを貼る_b0068891_21165618.jpgJognoteはジョギングや水泳、自転車などをテーマにしたSNSサイト。

このJognoteではブログパーツも用意されていて、別のサイトに自分のトレーニングの履歴を小さなカレンダー形式で表示できる。

ところが、Jognoteのブログパーツはiframeタグで用意されているので、そのままではExciteのブログには貼付けることができない。


いろいろと調べてみると、Googleガジェットを使ってiframeのブログパーツをラップしてしまえばExciteで表示できそうなことが分った。




で、Googleガジェットを作成する為に参考にさせていただいたのは「WebOS Goodies」さんのサイト

以下はJognoteのブログパーツをExciteに貼付ける手順を書くけど、この方法ならおそらく、あらゆるブログパーツをExciteブログに貼付けることができる。

1)Jognoteのブログパーツスクリプトを取得
Jognoteにログインし、
[設定]→[プロフィール]→[あなたのブログにJogNoteブログパーツを]からブログパーツのスクリプトを取得。

こんな感じにテキストボックスにスクリプトが表示される。
< iframe src='http://www.jognote.com/bparts/calendar/bf38e8d43033793842b09773a7d690c0' width='180' height='310' marginheight='0' marginwidth='0' frameborder='0' border='0' scrolling='no'>< /iframe>
※ブログに記載する為に"<"の後ろにブランクを入れて"< "としています。

この中で、
http://www.jognote.com/bparts/calendar/bf38e8d43033793842b09773a7d690c0

の部分が僕のブログパーツ本体。

2)Googleガジェットを作成する
Googleガジェットはガジェット仕様のXMLを書いてインターネットに公開されているサーバに保存するだけで作成することができる。
Googleガジェットの仕様はこちら

今回はJognoteのブログパーツをGoogleガジェットでラップする。
1)のブログパーツの例ではこんな感じでXMLファイルを記述。

< ?xml version="1.0" encoding="UTF-8" ?>
< Module>
< ModulePrefs title="yojige's jognote" title_url="http://www.jognote.com/users/8431" />
< Content type="url" href="http://www.jognote.com/bparts/calendar/bf38e8d43033793842b09773a7d690c0" />
< /Module>
※ブログに記載する為に"<"の後ろにブランクを入れて"< "としています。

ModulePrefsのtitleのところは何でも構わないけど、取合えず自分のジョグノートのパーツであることを分るようなフレーズを指定する。
title_urlはtitleで指定したフレーズに設定するハイパーリンク。
ジョグノートの自身のurlを記述しておけばtitleをクリックしたときに自身のJognoteの画面を表示させることができる。
そしてJognoteのブログパーツ本体をContent typeのところのhrefに記述する。
今回は「yojige_jognote.xml」というファイル名で保存した。

3)GoogleガジェットからExciteブログパーツ用のコードを取得する
2)で作成したGoogleガジェットはインターネット上に公開する。
自分で公開用のWebスペースを持っている人は良いが、そうでない人はGoogleが提供するガジェット公開用のスペースを使うと良い。
詳細は「WebOS Goodies」さんの「いろいろな公開方法」の項を参照のこと。

僕はAppleのMobileMeを契約しているのでこの領域にガジェットを保存した。
このガジェットを指定して埋め込み用のコードを取得すれば、そのコードがそのままExciteブログパーツとして利用できる。
「WebOS Goodies」さんのページではこのコードを取得する為のフォームも用意されているのでこちらを利用する。

取得されたコードはこんな感じ。
< script src="http://www.gmodules.com/ig/ifr?url=http://homepage.mac.com/yojige/blog/yojige_jognote.xml&synd=open&w=180&h=300&title=yojige's+jognote&border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&output=js">< /script>
※ブログに記載する為に"<"の後ろに全角ブランクを入れて"< "としています。

パーツの幅や、高さ等はブログのスキンによると思うので要調整。
あとは、このコードをExciteブログのブログパーツとして登録すれば完了。
by yojige | 2010-12-12 21:46 | IT