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

関連記事

I believe I can fly - I believe I can touch the sky... by Harold Kuiper, on Flickr TOC+を使えば記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

TOC+を使えば同一記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

  秘密の抜け穴 I believe I can fly - I believe I can

記事を読む

マウスコンピュータのHDが壊れました illust by 3104o ©佐藤利音

ヱ□カテゴリにアドセンスを表示させない『Display Widgets』『Widget Logic』は創作家サイトに必須のWPプラグイン!

26歳社畜之図 佐藤利音 on Twitter  ハイ、広告表示されてないですね?

記事を読む

俺の妹が?モバイルサイトを爆速にしてくれるAMP(アンプ)を、WPプラグインで導入したら、エラーが出たので対処してみた件 「PageSpeed Insights」にて、AMP導入後の爆速さ!!!

俺の妹が?モバイルサイトを爆速にしてくれるAMP(アンプ)を、WPプラグインで導入したら、本当に爆速になった件

AMPページサンプル 登場人物:くつきちよこ ※管理人   佐藤 ※ゲスト 本日は、サイ

記事を読む

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

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

rss_watercolor_icon by mfinleydesigns, on Flic

記事を読む

くつキッチュ!SCRAPス WPにデフォルトでインストされてるプラグイン『HelloDolly』って一体何者?

WordPress謎のプラグインHelloDollyを有効化してみた結果www

  Photo by Stéfan  いかにもなタイトルですが、釣りじゃありません。 結論から申し

記事を読む

業務連絡のお詫びとWP怪奇現象の話 Chrome怪現象?「sample.com ページは機能していません ichipan.phpapps.jp でリダイレクトが繰り返し行われました。 次をお試しください: ページを再読み込みする Cookie を消去する ERR_TOO_MANY_REDIRECTS」 

【業務連絡】素材サイト告知に関するお詫びと、WP怪奇現象の話

    『イチパン!』 ログイン画面 登場人物:くつきちよこ ※管理人

記事を読む

Urban V's Rural on Flickr

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

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

記事を読む

Initial thoughts on Bilski by opensourceway, on Flickr

amazonJsで「amazonへのレスポンスがパース出来ません」エラーが出たときの対処法

Initial thoughts on Bilski by opensourceway,

記事を読む

Google Mapsが表示されなくなったら困るので、APIの設定をしてみましたよ(*´・▽・`*) アイキャッチ画像 design by くつき 素材 by ClipStudio セルシスさん

Google Mapsが表示されなくなったら困るので、APIの設定をしてみましたよ(*´・▽・`*)

  赤い使徒?design by くつき ⇒  3Dオブジェクト 地球 by セルシス

記事を読む

ワードプレスの記事内にSoundCloudの音楽を埋め込むには?【WPプラグイン】

  追記:2015-02-23 現在はURLコピペのみで簡単に埋め込み出来ます。

記事を読む

スポンサードリンク

スポンサードリンク

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

スポンサードリンク

スポンサードリンク

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

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

  • くつキッチュ!SCRAPス アイコン 創作支援 カテゴリへ《創作支援》

    くつキッチュ!アイコン カテゴリwordpress全般へ 《WP関係》

    くつキッチュ!アイコン-copyright-著作権カテゴリへ  《著作権関係》

    くつキッチュ!アイコン小ネタ/物語用小ネタ カテゴリへ  《小ネタ/物語用小ネタ etc...》
    ※オンマウスでタイトルが表示されます。




『創作支援屋くつキッチュスクラップス!』は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。