フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その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

関連記事

写真公開時のセキュリティに関して Online safety for kids by IntelFreePress, on Flickr

意外と知られていないExif情報のこと/写真公開時のセキュリティに関して

  Online safety for kids by IntelFreePress, on

記事を読む

scream and shout by Mindaugas Danys, on Flickr 『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!時の対処法。

「記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!」場合の対処法。

記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』を適用

記事を読む

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

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

rss_watercolor_icon by mfinleydesigns, on Flic

記事を読む

「サイトへの AdSense 広告配信が停止されています」がSeesaaのタグ検索結果ページだった場合 Seesaa問題のタグ検索結果ページ

「サイトへの AdSense 広告配信が停止されています」が、Seesaaのタグ検索結果ページだった場合の対応メモ

問題のSeesaaのタグ検索結果ページのイメージ↑怖い……((((;゚Д゚))))カ

記事を読む

Title:Peeking Diet Bos on Flickr Some rights reserved

今さらだけど、大事な事!「写真をブログにアップする時の注意点」

  Title:Peeking Diet Bos on Flickr Some right

記事を読む

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

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

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

記事を読む

Numbers by SamahR, on Flickr Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方

2-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方『BOOKを記事で表示する』編

  追記:「WordPressの更新後、まれに『FlippingBook

記事を読む

人生でやりたい100のリスト アイキャッチ画像 Miami Beach sightseeing bus tour - Ocean Drive by interbeat, on Flick

記事を書いているだけで人生が楽しくなった!「人生でやりたい100のリスト」がめっちゃオススメ!!

昨日こちらのテーマ(子テーマヘッダー部分CSS)でお世話になっておりますQtaro さん

記事を読む

サトウトシオ『宇宙をデバッグする、簡単なお仕事です』LP完成しました♪ でんでんランディングページトップ illust by サトウトシオ @310104o design by くつきちよこ でんでんランディングページ by ろす @lost_and_found さん

サトウトシオ『宇宙をデバッグする、簡単なお仕事です』LP完成しました♪

サトウトシオ『宇宙をデバッグする、簡単なお仕事です』LPでんでんランディングページ by ろす

記事を読む

Spanish dictionary pages up into the air by Horia Varla Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方

1-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方 基本編

  追記:「WordPressの更新後、『FlippingBook Ga

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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

  • パソコン工房「CLIP STUDIO PAINT PRO推奨パソコン」エントリーモデル登場