フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その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もブラウザのみでインスト・開発・公開が

記事を読む

IMG_20130519_144632 by smc_90, on Flickr blog表記ルール

毎日の更新でグダグダになりがちな『ブログの表記ルール』を再考してみました♪

本日は、『ブログ表記ルール』を考えたいと思います。 IMG_20130519_144632 b

記事を読む

2013冬の陣 名古屋・松阪・静岡の旅 その1

送水口最強伝説!素敵ブログ観察記1 『送水口倶楽部様』編

素敵ブロク観察記のこと 送水口倶楽部『2013冬の陣 名古屋・松阪・静岡の旅 その1』

記事を読む

User Error by docbaty, on Flickr

現在、お客様からのリクエストを処理することができません。Google のエンジニアが問題解決に取り組んでおりますので、しばらくお待ちください。

User Error by docbaty, on Flickr Adse

記事を読む

Advertising and Rain by Jakob Montrasio, on Flickr ネットオウル『WPblog』の広告表示位置が変わったのでルール範囲内で位置を調整するよ♪

ネットオウル『WPblog』の広告表示位置が変わったのでルール範囲内で位置を調整するよ♪

Flickrの上ヤコブMontrasioによる広告や雨   ネットオウルか

記事を読む

ネットオウルでワードプレスをインストしてもログイン画面が表示されない時の対処法 default_page画像

ネットオウルでワードプレスをインストしてもログイン画面が表示されない時の対処法

 もくじ これまで無料サーバーのめちゃくちゃお手軽なインストールに頼りきりだったくつき

記事を読む

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

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

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

記事を読む

ああこれSTINGERだなとわかるブログの特徴 検索ボックス編 Magnified Eye_5364c by hoyasmeg, on Flickr

「オッス!オラSTINGER!」……のカスタマイズ、検索ボックス編 あとちょろっとbtn素材配布♪

本日は、『くつキッチュ/SCRAPス!』でもお世話になっておりますWordPressテーマ『

記事を読む

「忍者サンドボックス」の「忍者文庫」で、縦書き電子書籍を作ってみたよ♪ 忍者ツールズが機能満載過ぎてよくわからないので図にしてみた図

「忍者サンドボックス」の「忍者文庫」で、縦書き電子書籍を作ってみたよ♪

  忍者ツールズイメージ図 くつきちよこ   登場人物:くつきちよこ ※管理

記事を読む

校正・推敲を支援してくれるツール『tomarigi』のインストール、及び「音声読み上げプラグイン追加」までメモ

鳥・枝・葉っぱブラシ素材はクリスタ『CLIP STUDIO ASSETS』から ⇒  鳥

記事を読む

Message

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

Time limit is exhausted. Please reload CAPTCHA.

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

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

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