Google Feed API（ＲＳＳの表示）②

★　Google Feed API（ＲＳＳの表示）②

●　Google Feed APIを使って、外部ＲＳＳを読み込み表示します。

　　複数のＲＳＳを指定した場合は、タブをクリックすることで、
　　表示を切り替えすることができます。

◆　参考にした内容

Google Feed API Developer's Guide
https://developers.google.com/feed/v1/devguide?hl=ja

Feed Control
http://code.google.com/apis/ajax/playground/#feed_control

JavaScript Reference - Google Feed API
https://developers.google.com/feed/v1/reference?hl=ja

◆　注意点

・　広告が表示されます。

・　１ページに１つのみ表示が可能。
(２つ以上設置する場合は、工夫が必要）

◆　ＲＳＳについて

　①　ＲＳＳは、ブログサイト、サイトによって形式が異なります。
　　　ブログサイトのＲＳＳ形式を参照してください。

　②　アメブロの場合のＲＳＳ形式は下記になります。
　　　（アメーバIDは変えてください）

http://rssblog.ameba.jp/アメーバID/rss.html

◆　表示例

タブをクリックした場合

◆　実例

◆　設置方法

①　フリープラグインへ下記を追記する。

◆　説明

・　複数のブログを表示したい場合は下記のようにします。
　　黄色い部分を表示したいブログ分、追記して行ってください。

feedControl.addFeed("http://rssblog.ameba.jp/new-blue-777/rss.html", "リアナのカスタマイズ日記");
feedControl.addFeed("http://rssblog.ameba.jp/new-bulue9/rss.html", "ランのカスタマイズ日記");
feedControl.addFeed("http://rssblog.ameba.jp/アメーバID/rss.html", "●●のカスタマイズ日記");

　■　形式（タイトルはブログ名・サイト名など）

feedControl.addFeed("ＲＳＳのＵＲＬ", "タイトル");

・　 feedControl.setNumEntries(5);// 表示記事数

　表示する記事数（明細部分）を指定します。

・ feedControl.setLinkTarget(google.feeds.LINK_TARGET_BLANK);// target="_blank"

　　記事（明細部分）をクリックすると新しいウインドウで開きます。

・　document.getElementById("feedArea2"), {

　　feedArea2　は表示する場所のセレクタ名

・　drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED });

　　DRAW_MODE_TABBED　・・・　タブクリック形式で表示
　　DRAW_MODE_LINEAR　・・・　リスト形式で表示

②　表示したい場所に下記をいれます。(Loading... は画像にしてもOK）

<div id="feedArea2">Loading...</div>

　■　もし、ページ内の記事の１件目に表示したい場合は下記をフリー
　　　プラグインの最初に入れてください

③　下記をＣＳＳへ追記する。

/* ------------------------------------------------------------------ */
/* Google Feed API ② 　　　　　　　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------------------ */
#feedArea2{/* 全体 */
border:2px dotted #0000ff;/* 枠 */
background-color:#ffffff;/* 背景色 */
margin-top:20px;/* 外側余白 */
border-radius: 5px;/* CSS3角丸 */
}
#feedArea2 .gfc-tabhInactive{/* 非表示中タブ */
background-color:#999999 !important;/* 背景色 */
font-size:12px !important;/* 文字の大きさ */
color:#ffffff !important;/* 文字色 */
filter: alpha(opacity=40) !important;/* 透過度 */
opacity:0.4 !important;/* 透過度 */
border-radius: 5px;/* CSS3角丸 */
}
#feedArea2 .gfc-tabhActive{/* 表示中タブ */
background-color:#cccccc;/* 背景色 */
font-size:18px;/* 文字の大きさ */
color:#ff0000 !important;/* 文字色 */
font-weight:bold;/* 文字の太さ */
border-radius: 5px;/* CSS3角丸 */
border:1px solid #888888 !important;/* 枠 */
border-bottom:none !important;/* 枠 */
}
#feedArea2 .gfc-resultsbox-visible{/* 明細記事部分（全体） */
border:1px solid #888888;/* 枠 */
border-radius: 6px;/* CSS3角丸 */
padding:10px;/* 内側余白 */
background-color:#ffedff;/* 背景色 */
}
#feedArea2 .gfc-resultsHeader {/* 項目ヘッダー */
border-bottom:1px dotted #00ffcc !important;/* 枠 */
}
#feedArea2 .gf-result{/* 各明細記事部分 */
border-bottom:1px dotted #00ffcc;/* 枠 */
}
#feedArea2 .gf-title a{/* 明細記事タイトル */
color:#0000ff;/* 文字色 */
font-size:14px;/* 文字の大きさ */
}
#feedArea2 .gf-author{/* 明細記事投稿者 */
color:#00ffff !important;/* 文字色 */
font-size:14px;/* 文字の大きさ */
}
#feedArea2 .gf-spacer{/* 明細記事 - */
color:#ff0000 !important;/* 文字色 */
font-size:14px;/* 文字の大きさ */
}
#feedArea2 .gf-relativePublishedDate{/* 明細記事投稿日 */
color:#00ff00 !important;/* 文字色 */
font-size:14px;/* 文字の大きさ */
}
#feedArea2 .gf-snippet{/* 明細記事本文 */
color:#9999ff;/* 文字色 */
font-size:14px;/* 文字の大きさ */
}
/* ------------------------------------------------------------------ */

④　非表示にしたい場合は下記をＣＳＳへ追記する。
　　不要な行は消してください。

#feedArea2 .gf-author{/* 明細記事投稿者 */
display:none;/* 非表示 */
}
#feedArea2 .gf-spacer{/* 明細記事 - */
display:none;/* 非表示 */
}
#feedArea2 .gf-relativePublishedDate{/* 明細記事投稿日 */
display:none;/* 非表示 */
}
#feedArea2 .gf-relativePublishedDate{/* 明細記事投稿日 */
display:none !important;/* 非表示 */
}
#feedArea2 .gf-snippet{/* 明細記事本文 */
display:none;/* 非表示 */
}

リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）

アメブロ　新ＣＳＳ　ＣＳＳ編集用デザイン　無料
カスタマイズ　アメブロカスタマイズ　初心者
ＣＳＳ　スタイルシート　デザイン
javascript jQuery

Google Feed API（ＲＳＳの表示）②