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

関連記事

創作支援屋靴キッチュスクラップス!くつきちよこアイコン木の実モザイクVer  Illust by 佐藤利音 ベジェ化 by くつきちよこ

ランボー 怒りの新規ファイルのアップロードが出来ないWordPressトラブル※未解決 と、電子書籍出版お手伝い裏舞台

Panic stations ! by Craig Sunter - Thanx 2 Milli

記事を読む

創作ブログに最適な「LINEトーク吹き出しCSS」で、表示が崩れるときの忘備録 カスタマイズサンプルアイキャッチ画像

創作ブログにピッタリな「LINEトーク風フキダシCSS」の表示が崩れるときの忘備録

あけましておめでとうございます。   会話形式の多いブログにピッタ

記事を読む

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

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

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

記事を読む

マルチサイト化とかサーバーどうするかとかの雑談会 Money - Savings by 401(K) 2013, on Flickr

流行りに逆らってサーバーを選択した話

  サーバー選びのリアルな話 順調だったwpXクラウドのマルチサイト化(サブディレクトリ型)に影

記事を読む

業務連絡のお詫びと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

記事を読む

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

動くファビコン、今ならアリ?

最近とんと見かけなくなった気がする動くファビコン… 今ならすごく目立つ気もしますが…実

記事を読む

Muscles by Thomas Fisher Rare Book Library, on Flickr

『ArtPose』がPCで使えなくて絶望したーっあなたへ贈る無料3Dモデルソフト3選+オマケ

当サイト被験者SSが珍しく『ArtPose』という、いま巷で大人気のポーズアプリを絶賛していまし

記事を読む

Wpマルチサイト化サブディレクトリ型はめちゃ簡単!の初心者のハマリポイントは2箇所だけ! bento box by josey4628, on Flickr

Wpマルチサイト化(サブディレクトリ型)はめちゃ簡単!初心者のハマリポイントは2箇所だけ!

bento box by josey4628, on Flickr Wpマルチサイト化(

記事を読む

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

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

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

記事を読む

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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

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