めちゃくちゃ簡単で、しかも凄い機能が備わっているGoogle AJAX Feed APIのDynamic Feed Control Wizard。難しいプログラムは必要ありません。必要なのは複数表示させたいRSSフィード(ホームページ)の名前だけです。ちなみにこのDynamic Feed Control Wizardはスマートフォンでも表示されます。
下記のDynamic Feed Control Wizardが完成サンプル(携帯では表示されませんがご了承下さい)です。
複数RSS作成方法
Dynamic Feed Control Wizardに行き必要項目を入力するだけです。
- feedのStyle(スタイル)を選択。ちなみに上記サンプルのスタイルは、Vertical Stackedを選択して作成してあります。
- feedのTitle(タイトル)を入力
- Feeds Expression(RSSフィードのホームページのタイトル)を入力
- 入力したらPreviewをクリックしレイアウト確認。
入力し終えたらGenerate Codeをクリックすると下記のコードが表示されますので、そのコードを丸ごとコピーして後はホームページに貼り付けるだけです。
たったこれだけで簡単に凄い機能が備わっている複数RSSが作成できます。
但し中にはFeeds Expression(RSSフィードのホームページのタイトル)にタイトルを入れただけでは、RSSフィードのアドレスなどを探しきれない場合があります。その場合はとりあえずコードを取得して下記の図のように必要な箇所を書き直せば表示できます。又feedのTitle(タイトル)も変更できます。
RSSフィードのアドレスは作成されているブログでも違うと思います。ちなみにWordPressで作成されている場合のRSSフィードのアドレスはWordPress Feedsを参考にしてみてください。
下記はWordPressで作成されているRSSフィードのアドレスの例です。
ホームページアドレスがhttp://detarame.moo.jp/の場合
- http://detarame.moo.jp/feed/rss2/
- http://detarame.moo.jp/?feed=rss2
などをアドレスの後ろに付け加えると表示されます。ちなみにhttp://detarame.moo.jp/feed/では最新記事が上手く表示されませんでした。
Dynamic Feed Control Wizardのカスタマイズ用スタイルシート
Dynamic Feed Control Wizardのレイアウトはデフォルトでも充分使えますが、レイアウトを変更することも出来ます。
取得したコードの中にcss(スタイルシート)が含まれています。そのcss(スタイルシート)を一旦パソコンにダウンロードして、css(スタイルシート)を書き直し自分のサーバーにアップロードしなおして、css(スタイルシート)のアドレスを変更すればレイアウトが変更できます。
コードにも書いてありますが、デフォルトのcss(スタイルシート)のアドレスはhttp://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.cssです。このアドレスにアクセスすればcss(スタイルシート)がダウンロードできます。
Dynamic Feed Control Wizardのスタイルシートの詳細
css(スタイルシート)の中で使われている名称は下記の図の位置になります。
この図を参考に必要なcss(スタイルシートの箇所を変更すればカスタマイズも出来ます。
最終更新日: 2013年2月4日
ブログにRSSを表示させようと奮闘中です。
グーグルのアカウントにログインして
http://www.google.com/webelements/#!/custom-search
からDynamic Feed Control Wizardを探していますがわかりません。
教えて下さい。お願いします。
コメントありがとうございます。
下記がコードになります。
コードソースを教えていただきましたが、GoogleBloggerにコピー&ペイストした結果、作成されたHTMLファイルは承認できません: SCRIPTタグが破損しています: 表示がでます。またFC2ホームページでも正常に表示できません。
どのようにコピーしたらよろしいでしょうか?教えて下さい。
山梨旅案内人さんへ
紹介したコードが自動で整形されていてアンカータグが自動で入っているのが原因だったと思います。すみませんでした。
一応紹介したコードを訂正しましたのでもう一度上記に書いてあるコードをコピーして使ってみてください。又FC2のブログの方では確認しましたので大丈夫だと思います。
お教えいただいたコードの貼り付けによりFC2ホームページでは確認することができました。
しかしGoogleBloggerでは作成されたHTMLファイルは承認できませんタグが破損しています:BR とエラーがでます。
どのようにコピーしたらよろしいでしょうか?教えて下さい。
山梨旅案内人さんへ
GoogleBloggerだとjavascriptによってはjsファイルを用意しないと上手く呼び出せない事があるみたいです。bloggerでjavascriptを使う方法 に書いてありました。技術的なことは分かりませんが(^^;
そこで今回紹介してあるコードでjsファイルになってない所をjsファイルにします。FC2も利用されているみたいですので、FC2だとサーバーにjsファイルが置けるのでそれを利用します。(一応私もFC2サーバーにjsファイルをアップロードしてjsファイルを作ってみました。)
まずは下記のコードをコピーしてGoogleBloggerの投稿に貼り付けて確認してみてください。一応私もGoogleBloggerで確認したところ、動的ビュー以外のテンプレートだとうまく表示できます。
確認できたら
<!-- feedの設定用jsファイル --> <script src="http://downy1.web.fc2.com/js/feeds.js"></script>
の部分のjsファイルのアドレスとjsファイルを書き換えてください。
jsファイルはIEでhttp://downy1.web.fc2.com/js/feeds.jsのアドレスを入れるとダウンロードできるので必要な箇所を書き換えて使ってください。書き換えが終わったら山梨旅案内人さんのFC2サーバーにアップロードしてあとはjsファイルのアドレスを書き換えればOKです。
説明が長くなったので又分からない事があったらお気軽にコメントください。