フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その2『Google Feed API』

くつキッチュ!アイコン wordpress

もくじ

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その2『Google Feed API』

Laser engraved RSS icon by Book Worm Laser & Design, on Flickr

昨日からお送りしております『スクリプトやCSSなどの難しい知識なしで画像付きのフィード取得できるサービス3選!』

  1. 『忍者レコメンド』
  2. Google Feed API
  3. 複眼RSS

本日はその2『Google Feed API』です。

サービスを利用すれば、CSSのやスクリプトなどの難しい知識なしで、フィードが生成でき、設置も簡単なのでオススメ。

本当は自分でCSSまで細かく編集したいという方も、編集中のつなぎとして、短期でご利用頂いてもよろしいかと思います。

なにしろ、導入は予想外に簡単ですので…

Google Feed API

基本的にこちらのサイト様を参考にさせて頂きました。

【Google Feed APIを使用して、複数のサイトのRSSフィードを取得して更新日順でソート(並び替え)して、さらにそれを「サムネイル付きで」表示する方法】

こちらのサイトにあるコードはサンプルとのことでしたが、くつきの場合はこのままコピペさせていただき、指定通りに<head>~</head>に埋め込むことで、カテゴリのフィードを取得することが出来ました。

「Google Feed API」を使用するためのスクリプトを記述するのをお忘れなく。くつきはこれを忘れて表示されず、しばらく悩みました。

コードのカスタマイズ

先ほどのコードをお借りして、自サイトのカテゴリ別記事を表示させるには、まず下記のコード部分を表示させたいフィードURLに入れ替えします。

var FA = new Array( //配列です。ここに、取得したいRSSフィードを加えるだけです
“http://www.******.biz/blog/feed/”, //******のブログのフィードURL
“http://****.jp/feed”, //****さんのブログのフィードURL(なぜか「/」を入れると取得できない)

今回はこちらを他サイトの画像付きRSSとしてでなく自サイトのカテゴリ別記事の表示に使用しますので、例えば《くつキッチュ/スクラップス!》の場合は

  • 《くつキッチュ/スクラップス!》のフィードを表示させたい場合は⇒http://92kitsch.com/feed/
  • 《くつキッチュ/スクラップス!》アートカテゴリのフィードを表示させたい場合は⇒http://92kitsch.com/category/neta/art/feed/

を、下記のようにペーストし

var FA = new Array( //配列です。ここに、取得したいRSSフィードを加えるだけです
http://92kitsch.com/feed/“, //《くつキッチュ/スクラップス!》のブログのフィードURL
http://92kitsch.com/category/neta/art/feed/“, //《くつキッチュ/スクラップス!》アートカテゴリのフィードURL

と、こんな感じです。

※自ブログのカテゴリ別URLの確認方法は⇒コチラ♪

画像付きフィードの出力先指定

header内にコードを埋め込んだら、出力先を指定してあげましょう。

WordPressの場合はウィジェットがお手軽ですよね。

スクリプトやCSSなどの難しい知識なしで画像付きのフィード取得できるサービス3選!Google Feed APIを使った画像付きフィード取得の出力先はウィジェットがお手軽

これで、任意のウィジェットに画像付きフィードが表示されます。

取得画像の詳細を指定する方法

Google Feed APIを利用したサイトの画像付きフィードは、先ほどの解説サイト様のおかげで手順で簡単にできました。

次に、取得画像の詳細指定です。

昨日の『忍者レコメンド』では、画像に関して順番や拡張子の種類選別などの詳細を設定することが出来ませんでしたが、Google Feed APIでは可能です。

直接順番を指定する方法

表示させる画像の指定で一番簡単なのは順番だと思います。

eimg += imgCheck[0]; //配列の1番目に格納されたデータを取得(つまり、1枚目の画像を取得)

この部分で、何番目の画像を表示させるかを指定してあげれば良いと思います

※0⇒1番めの画像という意味です。2番目の場合は[1]を指定。3番目の場合は[2]を指定。

「表示させたい画像は常にN番目」ということでしたら、この方法が一番手っ取り早いかと思います。

拡張子で画像の優先順位を選択する方法

「表示させたい画像は常にN番目」でない場合。

例えばくつきの場合は、その日の記事が何関連なのか記事のTOPにカテゴリ別のアイコンでお知らせしてます。

例えば、『ブログ関連』の『小ネタ』の場合⇒くつキッチュ!アイコン-blog くつキッチュ!SCRAPス アイコン neta(ネタ全般)カテゴリへ

『海外ネタ』の『小ネタ』『面白ネタ』の場合⇒くつキッチュ!SCRAPス アイコン www(海外ネタ) カテゴリへ くつキッチュ!SCRAPス アイコン neta(ネタ全般)カテゴリへ くつキッチュ!SCRAPス アイコン カテゴリlol2(面白ネタ)へ

という感じでアイコンがひとつとは限らないので、常にN番目の画像という指定は出来ないんですよね;;

できればブログのアイキャッチ画像と同じものを取得させたいのですが…

というわけで、画像の種類を絞って対応してみました。

var imgCheck = entry.content.match(/(http:){1}[\S_-]+((\.png)|(\.jpg)|(\.JPG)|(\.gif))/); //データを取得する拡張子を指定

から

アイコンの形式(PNG)を削除。※もしくは(\.png)を(\.jpg)の後方に替え。

var imgCheck = entry.content.match(/(http:){1}[\S_-]+((\.jpg)|(\.JPG)|(\.gif))/); //データを取得する拡張子を指定

こうしておけば、PNG形式のアイコンをスルーして、JPG形式のアイキャッチ画像のみを拾ってくれます。

スクリプトやCSSなどの難しい知識なしで画像付きのフィード取得できるサービス3選!Google Feed APIで取得する画像の拡張子をカスタマイズしてみた

まとめ

昨日今日と2つのフィードサービスを利用してましたが…

  1. 『忍者レコメンド』 ◯お手軽 ×画像の詳細設定が出来ない
  2. Google Feed API  ×導入がちょいと面倒  ◯画像の詳細設定が出来る  △CSSでカスタマイズできる

メリット・デメリットはこんなところでしょうか。

使用目的や、状況によって使い分けて頂ければと思います。

というわけで、ツールを使ってお手軽にカテゴリ別記事を画像付きで表示する方法その2『Google Feed API』でした。

明日は当サイトでも利用させて頂いております複眼RSSを使ってのカテゴリ別フィード取得方法のご紹介となります♪

でっは~(*´∀`*)ノシ

ブログランキング・にほんブログ村へ
にほんブログ村

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr

関連記事

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

クラウド最強エディタ「Cloud9」が、WordPressもブラウザのみでインスト・開発・公開が

記事を読む

とつぜんですがここでクイズです。「発酵」に関する画像にチェックを入れてください。

面倒な画像認証を楽しいぷちクイズにできるGoogleAPI『reCAPTCHA』設定方法♪

※ダミー認証画像です(笑)くつきちよこ 登場人物:くつきちよこ ※管理人   佐藤 ※ゲス

記事を読む

Q&A by opensource.com, on Flickr そんなに良くある感じじゃない質問(検索ワード)への回答 第二弾

そんなに良くある感じじゃない質問(検索ワード)への回答 第二弾

検索キーワードで(個人的にツボに入ったという意味での)ヒットしたもの、及び当サイトでは該当す

記事を読む

インターネットサーバーエラーである日突然サイトが落ちたので閉鎖しようとしたけど、ダメ元である事をしたら偶然直った話。※マネは慎重に! 素材サイトの構成

インターネットサーバーエラーである日突然サイトが落ちたので閉鎖しようとしたけど、ダメ元である事をしたら偶然直った話。※マネは慎重に!

図:くつきちよこ   登場人物:くつきちよこ ※管理人   佐藤 ※ゲ

記事を読む

ワードプレスの不具合騒動、利用中のレンサバ統合されるってよ、など。 恐怖のエラー画面

「ワードプレスの不具合騒動(未解決)」と、「利用中のレンサバ統合されるってよ」など。

  サトウトシオのサイトがバグりました; ホラーなエラー!に驚いたる赤ちゃんのアイコ

記事を読む

Hardcover book gutter and pages by Horia Varlan, on Flickr ページををめくるめくwpプラグインFlippingBook Galleryとか合成GIFとかの雑談

ページををめくるめく効果が簡単に作れるwpプラグイン『FlippingBook Gallery』とか合成GIFとか諸々

※サーバーが落ちてるのかここしばらくつながらない状態のようです。様子見のため、URLやサンプルページ

記事を読む

Photo by Flickr CJ'sフォトストリーム

Stingerの『Page Top↑』を可愛くカスタマイズしてみた♪

    Stingerで『Page Top↑』を可愛くカスタマイズしてみた♪ WordPressブ

記事を読む

【お知らせ】姉妹サイト『イチパン!』を半年後をめどに閉店させていただきます。 アイキャッチ画像 illust by くつきちよこ

【お知らせ】姉妹サイト『イチパン!』を半年後をめどに閉店させていただきます(*´▽`*)ノシ~

イラスト:くつきちよこ   登場人物:くつきちよこ ※管理人   佐

記事を読む

Urban V's Rural on Flickr

修羅場に効く!本気作業のBGM集! 【文作業、絵作業別オススメ】

Photo by Greg Smith Title:Urban V's Rural on

記事を読む

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* アイキャッチ画像 Favicons by Loozrboy, on Flickr

「サイトの名刺?」ファビコン設置方法 -ファビコンテスト前哨戦-

本日はサイトの名刺『ファビコン』に関しての記事です。 Favicons by Loozrb

記事を読む

  • 創作クラスタ応援し隊のくつきちよこ(崛起智世子)です。 このブログは、「ネット著 作権」、「セルフプロモーション」、「ワードプレス運用」、「電子書籍サービス」、 「自己出版(セルフパブリッシング)」、「創作」等に関する情報をお届けしておりま す。 ※Wiki『創作ステージ@まちペディア』(ちょっと押してますが)作成中です♪
  • follow us in feedly
  • くつキッチュ/スクラップス! on Tumblr

  • 「表現の自由を守る党」自作応援バナー くつきちよこ

  • マウスコンピューター/G-Tune