★ Google Feed API（ＲＳＳの表示）①
● Google Feed APIを使って、外部ＲＳＳを読み込み表示します。
◆ 参考にした内容
Google Feed API Developer's Guide
https://developers.google.com/feed/v1/devguide?hl=ja
dynamic_feed_control_-_vertical
http://code.google.com/apis/ajax/playground/#dynamic_feed_control_-_vertical
dynamic_feed_control_-_vertical reference(リファレンス)
http://www.google.com/uds/solutions/dynamicfeed/reference.html
◆ 注意点
・ 広告が表示されます。
・ １ページに１つのみ表示が可能。
(２つ以上設置する場合は、工夫が必要）
◆ ＲＳＳについて
① ＲＳＳは、ブログサイト、サイトによって形式が異なります。
ブログサイトのＲＳＳ形式を参照してください。
② アメブロの場合のＲＳＳ形式は下記になります。
（アメーバIDは変えてください）
http://rssblog.ameba.jp/アメーバID/rss.html
◆ 表示例
◆ 設置方法
① フリープラグインへ下記を追記する。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1");
function OnLoad() {
var feeds = [
{title: 'リアナのカスタマイズ日記',url: 'http://rssblog.ameba.jp/new-blue-777/rss.html'}
];
var options = {
stacked : true,
horizontal : false,
numResults : 16, // 表示記事数(明細(list))
displayTime : 5000, // 表示時間
fadeOutTime : 500, // フェードアウト時間
inkTarget : google.feeds.LINK_TARGET_BLANK,// target="_blank"
// タイトル
title : "最近の記事"
};
new GFdynamicFeedControl(feeds, 'feedArea', options);
}
google.setOnLoadCallback(OnLoad);
</script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1");
function OnLoad() {
var feeds = [
{title: 'リアナのカスタマイズ日記',url: 'http://rssblog.ameba.jp/new-blue-777/rss.html'}
];
var options = {
stacked : true,
horizontal : false,
numResults : 16, // 表示記事数(明細(list))
displayTime : 5000, // 表示時間
fadeOutTime : 500, // フェードアウト時間
inkTarget : google.feeds.LINK_TARGET_BLANK,// target="_blank"
// タイトル
title : "最近の記事"
};
new GFdynamicFeedControl(feeds, 'feedArea', options);
}
google.setOnLoadCallback(OnLoad);
</script>
◆ 説明
・ 複数のブログを表示したい場合は下記のようにします。
黄色い部分を表示したいブログ分、追記して行ってください。
var feeds = [
{title: 'リアナのカスタマイズ日記',url:'http://rssblog.ameba.jp/new-blue-777/rss.html'},
{title: 'ランのカスタマイズ日記',url:'http://rssblog.ameba.jp/new-bulue9/rss.html'}
];
■ 形式
var feeds = [
{title: 'サブタイトル名',url:'ＲＳＳのＵＲＬ'}
];
・ numResults : 16, // 表示記事数(明細(list))
表示する記事数（明細部分）を指定します。
・ displayTime : 5000, // 表示時間
fadeOutTime : 500, // フェードアウト時間
ヘッダー部分のフェードする部分の時間を指定します。
5000 は 5秒の意味。
・ inkTarget : google.feeds.LINK_TARGET_BLANK,// target="_blank"
記事（明細部分）をクリックすると新しいウインドウで開きます。
新しいウインドウで開きたくない場合は、この行を削除する
・ title : "最近の記事"
先頭のタイトルを指定します。
・ new GFdynamicFeedControl(feeds, 'feedArea', options);
feedArea は表示する場所のセレクタ名
② 表示したい場所に下記をいれます。(Loading... は画像にしてもOK）
<div id="feedArea">Loading...</div>
■ もし、ページ内の記事の１件目に表示したい場合は下記をフリー
プラグインの最初に入れてください
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(function(){
$(".articleText:eq(0)").after('<div id="feedArea">Loading...</div>')
});
</script>
<script type="text/javascript">
$(function(){
$(".articleText:eq(0)").after('<div id="feedArea">Loading...</div>')
});
</script>
③ 下記をＣＳＳへ追記する
/* ------------------------------------------------------------------ */
/* Google Feed API */
/* ------------------------------------------------------------------ */
#feedArea{/* 全体 */
border:2px dotted #0000ff;/* 枠 */
padding:10px;/* 内側余白 */
background-color:#ffffff;/* 背景色 */
margin-top:20px;/* 外側余白 */
border-radius: 5px;/* CSS3角丸 */
}
.gfg-title{/* ヘッダータイトル(最近の記事) */
background-color:#aa44aa;/* 背景色 */
color:#ffffff;/* 文字色 */
padding:10px;/* 内側余白 */
font-size:16px;/* 文字の大きさ */
margin-bottom:10px;/* 外側余白 */
border-radius: 6px;/* CSS3角丸 */
text-align:center;/* 中央寄せ */
}
.gf-result .gf-title {/* ヘッダー記事タイトル */
background-color:#ffffcc;/* 背景色 */
padding:3px;/* 内側余白 */
}
.gf-title a{/* ヘッダー記事タイトル(リンク) */
color:#0000ff;/* 文字色 */
font-size:14px;/* 文字の大きさ */
}
.gf-relativePublishedDate{/* ヘッダー記事投稿日 */
color:#00ff00 !important;/* 文字色 */
font-size:14px;/* 文字の大きさ */
}
.gf-snippet{/* ヘッダー記事本文 */
color:#9999ff;/* 文字色 */
font-size:14px;/* 文字の大きさ */
}
.gfg-entry {/* ヘッダー（記事タイトル＋投稿日＋本文） */
width : 100%;/* 幅 */
height : 99px;/* 高さ */
position : relative;
overflow : hidden;
text-align : left;/* 左寄せ */
margin-top : 3px;/* 外側余白 */
}
.gfg-subtitle{/* サブタイトル */
background-color:#eeddee !important;/* 背景色 */
font-size:23px;/* 文字の大きさ */
padding:2px;/* 内側余白 */
margin-bottom:5px;/* 外側余白 */
margin-top:5px;/* 外側余白 */
}
.gfg-subtitle a{/* サブタイトル(リンク部分) */
color:#aa0000 !important;/* 文字色 */
}
.gfg-listentry {/* 各記事タイトル */
overflow : hidden;
padding-left : 15px;/* 内側余白 */
padding-right : 5px;/* 内側余白 */
margin-left : 5px;/* 外側余白 */
margin-right : 5px;/* 外側余白 */
}
.gfg-list a{/* 各記事タイトル(リンク) */
border-bottom:1px dotted #0000ff;/* 枠 */
display:block;
color:#666666;/* 文字色 */
}
.gfg-listentry-highlight {/* 各記事表示矢印 */
background-image : url('http://stat001.ameba.jp/user_images/20120906/12/new-blue-777/c1/cc/g/o0012001212174456407.gif');
background-repeat: no-repeat;/* 繰り返ししない */
background-position : center left;/* 画像位置 */
}
/* ------------------------------------------------------------------ */
/* Google Feed API */
/* ------------------------------------------------------------------ */
#feedArea{/* 全体 */
border:2px dotted #0000ff;/* 枠 */
padding:10px;/* 内側余白 */
background-color:#ffffff;/* 背景色 */
margin-top:20px;/* 外側余白 */
border-radius: 5px;/* CSS3角丸 */
}
.gfg-title{/* ヘッダータイトル(最近の記事) */
background-color:#aa44aa;/* 背景色 */
color:#ffffff;/* 文字色 */
padding:10px;/* 内側余白 */
font-size:16px;/* 文字の大きさ */
margin-bottom:10px;/* 外側余白 */
border-radius: 6px;/* CSS3角丸 */
text-align:center;/* 中央寄せ */
}
.gf-result .gf-title {/* ヘッダー記事タイトル */
background-color:#ffffcc;/* 背景色 */
padding:3px;/* 内側余白 */
}
.gf-title a{/* ヘッダー記事タイトル(リンク) */
color:#0000ff;/* 文字色 */
font-size:14px;/* 文字の大きさ */
}
.gf-relativePublishedDate{/* ヘッダー記事投稿日 */
color:#00ff00 !important;/* 文字色 */
font-size:14px;/* 文字の大きさ */
}
.gf-snippet{/* ヘッダー記事本文 */
color:#9999ff;/* 文字色 */
font-size:14px;/* 文字の大きさ */
}
.gfg-entry {/* ヘッダー（記事タイトル＋投稿日＋本文） */
width : 100%;/* 幅 */
height : 99px;/* 高さ */
position : relative;
overflow : hidden;
text-align : left;/* 左寄せ */
margin-top : 3px;/* 外側余白 */
}
.gfg-subtitle{/* サブタイトル */
background-color:#eeddee !important;/* 背景色 */
font-size:23px;/* 文字の大きさ */
padding:2px;/* 内側余白 */
margin-bottom:5px;/* 外側余白 */
margin-top:5px;/* 外側余白 */
}
.gfg-subtitle a{/* サブタイトル(リンク部分) */
color:#aa0000 !important;/* 文字色 */
}
.gfg-listentry {/* 各記事タイトル */
overflow : hidden;
padding-left : 15px;/* 内側余白 */
padding-right : 5px;/* 内側余白 */
margin-left : 5px;/* 外側余白 */
margin-right : 5px;/* 外側余白 */
}
.gfg-list a{/* 各記事タイトル(リンク) */
border-bottom:1px dotted #0000ff;/* 枠 */
display:block;
color:#666666;/* 文字色 */
}
.gfg-listentry-highlight {/* 各記事表示矢印 */
background-image : url('http://stat001.ameba.jp/user_images/20120906/12/new-blue-777/c1/cc/g/o0012001212174456407.gif');
background-repeat: no-repeat;/* 繰り返ししない */
background-position : center left;/* 画像位置 */
}
/* ------------------------------------------------------------------ */
■ 矢印画像例
http://stat001.ameba.jp/user_images/20120906/12/new-blue-777/c1/cc/g/o0012001212174456407.gif
◆ すべてのオプションパラメータを含めた例
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function OnLoad() {
var options = {
stacked : true, // Stacked Vertical Mode
horizontal : false, // Horizontal Mode
numResults : 16, // 記事数
displayTime : 5000, // 表示時間
fadeOutTime : 500, // フェードアウト時間
inkTarget : google.feeds.LINK_TARGET_BLANK, // target="_blank"
scrollOnFadeOut : true, // ヘッダー部分をフェードする(初期 true)
pauseOnHover : true, // 記事リストにカーソルを乗せたらヘッダーを変える(初期 true)
title : "最近の記事" // タイトル(Static Titles)
};
new GFdynamicFeedControl(feeds, 'feedArea', options);
}
</script>
<script type="text/javascript">
google.load("feeds", "1");
var feeds = [
{title: 'リアナのカスタマイズ日記',url:'http://rssblog.ameba.jp/new-blue-777/rss.html'},
{title: 'ランのカスタマイズ日記',url:'http://rssblog.ameba.jp/new-bulue9/rss.html'}
];
google.setOnLoadCallback(OnLoad);
</script>