★ Google Feed API（Google Search）③ フィード検索
● Google Feed APIの「フィード検索」を利用する。
● 機能・条件
① キーワードなどを入れてウエブ上からの検索（ウエブ検索が可能）。
② 自分のブログ名とキーワードなどを入れた検索が可能。（ブログ検索が可能）
③ 検索結果の表示件数は最大１０件まで可能。
表示件数は１～１０件まで指定可能。
④ 検索ができなかった場合（０件も含む）は下記を表示します。
Search results 0 entry
● 設置例は、私のブログの左サイドバーの下部を参照。
（設置画像（例））
● 使用画像（例）
検索ボタン
クリアーボタン
● やり方。
① フリープラグインへ追加する
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var Blog_str="リアナのカスタマイズ日記";
google.load("feeds", "1");
G_search_radio();
G_search_input();
focus_chg("#G_seach","Google Seach","#000000");
</script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var Blog_str="リアナのカスタマイズ日記";
google.load("feeds", "1");
G_search_radio();
G_search_input();
focus_chg("#G_seach","Google Seach","#000000");
</script>
◆ 説明
・下記はフリープラグインの最初に１つあればＯＫです。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
・下記はフリープラグインに既に書かれている場合は不要です。
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
・var Blog_str="リアナのカスタマイズ日記";
自分のブログ名を指定します。
思ったような検索結果にならない場合は、調整してください。
・G_search_radio();
下記部分の設置を行う。
・G_search_input();
下記部分の設置を行う（結果部分を含みます）
・focus_chg("#G_seach","Google Seach","#000000");
下記記事を参照してください
入力部分にメッセージを表示して入力をサポートする。
http://ameblo.jp/new-blue-777/entry-11344247090.html
② 下記を記事又は、メッセージボード又は、フリースペース又は、
フリープラグインへ追加する。（設置したい場所に入れる）
<div id="google_search_Area">
<div id="feedArea3w_radio"></div>
<div id="feedArea3w"></div>
</div>
<div id="feedArea3w_radio"></div>
<div id="feedArea3w"></div>
</div>
◆ 記事、メッセージボードに入れる場合は、ＨＴＭＬモードで入れてください。
投稿ボタンの左上にある ＨＴＭＬタグを表示のタブをクリックすると
ＨＴＭＬモードになります。
◆ <div id="feedArea3w_radio"></div> は下記部分です。
◆ <div id="feedArea3w"></div> は下記部分です。（結果部分を含みます）
③ 下記をＣＳＳへ追加する。
/* ------------------------------------------------------ */
/* Google Search */
/* ------------------------------------------------------ */
#feedArea3_wrap{/* 検索結果全体 */
border:3px dotted #ffbbff;/* 枠 */
margin-top:20px;/* 上余白 */
border-radius: 6px;/* CSS3角丸 */
width:92%;/* 幅 （ここは、場合によっては px を入れて調整してください)*/
}
#feedArea3{/* 検索結果中身 */
padding:5px;/* 内側余白 */
margin-top:10px;/* 上余白 */
max-height:200px;/* 最大の高さ(調整してください) */
min-height:0px;/* 最小の高さ */
overflow:auto;/* 最大の高さを超えたらスクロールする */
width:92%;/* 幅 */
overflow-x:hidden;
}
#feedArea3 .feedarea_dtl{/* 検索結果明細 */
border-bottom:1px dotted #ffaaff;/* 枠 */
}
#feedArea3 .feed_title{/* 検索結果 タイトル名 */
background-color:#000000;/* 背景色 */
display:block;
padding:5px;/* 内側余白 */
font-size:12px;/* 文字の大きさ */
border-radius: 6px;/* CSS3角丸 */
}
#feedArea3 .feed_contentSnippet{/* 検索結果 本文 */
background-color:#ccccff;/* 背景色 */
display:block;
padding:2px;/* 内側余白 */
padding-left:5px;/* 内側余白(左) */
font-size:10px;/* 文字の大きさ */
color:#000000;/* 文字色 */
position:relative;
top:0px;
width:89%;/* 幅 */
left:18px;/* 左へ */
border-radius: 6px;/* CSS3角丸 */
}
#G_seach_wrap{/* 検索部分全体 */
position:relative;
}
#G_seach{/* 検索入力部分 */
border-radius: 6px;/* CSS3角丸 */
border:1px solid #ffccff;/* 枠 */
float:left;
padding-left:5px;
width:200px;/* 幅(調整してください) */
margin-left:10px;
}
#G_searchBtn{/* 検索ボタン */
background-image: url("http://stat001.ameba.jp/user_images/20110824/06/new-blue-777/d3/5b/g/o0014001411437837345.gif");
background-repeat: no-repeat;/* 繰り返ししない */
background-position:center center;/* 背景画像の位置 */
display:block;
text-indent:-9999px;/* 文字を表示させない */
width:20px;/* 幅 */
position:absolute;
top:2px;
left:195px;
}
#G_searchBtn:hover{
cursor:pointer;
}
#G_searchClear{/* クリアーボタン */
background-image: url("http://stat001.ameba.jp/user_images/20120915/07/new-blue-777/81/32/g/o0050002012188289567.gif");
background-repeat: no-repeat;/* 繰り返ししない */
background-position:center center;/* 背景画像の位置 */
display:block;
text-indent:-9999px;/* 文字を表示させない */
width:50px;/* 幅 */
height:20px;/* 高さ */
position:absolute;
top:2px;
left:230px;
}
#G_searchClear:hover{/* クリアーボタンにカーソルを乗せたとき */
cursor:pointer;/* ポインターカーソル */
}
#feedArea3_radio{/* ラジオボタンの調整 */
text-align:left;
padding-left:5px;
font-size:12px;/* 文字の大きさ */
}
#feedArea3_radio select{/* 表示件数のセレクトボックス調整 */
margin-left:25px;
}
#feedArea3_radio input{/* ラジオボタンの調整(水平位置) */
vertical-align:-3px;
}
.feedarea_noentry{/* Search results 0 entryの調整 */
color:#ff0000;/* 文字の色 */
}
/* ------------------------------------------------------ */
/* Google Search */
/* ------------------------------------------------------ */
#feedArea3_wrap{/* 検索結果全体 */
border:3px dotted #ffbbff;/* 枠 */
margin-top:20px;/* 上余白 */
border-radius: 6px;/* CSS3角丸 */
width:92%;/* 幅 （ここは、場合によっては px を入れて調整してください)*/
}
#feedArea3{/* 検索結果中身 */
padding:5px;/* 内側余白 */
margin-top:10px;/* 上余白 */
max-height:200px;/* 最大の高さ(調整してください) */
min-height:0px;/* 最小の高さ */
overflow:auto;/* 最大の高さを超えたらスクロールする */
width:92%;/* 幅 */
overflow-x:hidden;
}
#feedArea3 .feedarea_dtl{/* 検索結果明細 */
border-bottom:1px dotted #ffaaff;/* 枠 */
}
#feedArea3 .feed_title{/* 検索結果 タイトル名 */
background-color:#000000;/* 背景色 */
display:block;
padding:5px;/* 内側余白 */
font-size:12px;/* 文字の大きさ */
border-radius: 6px;/* CSS3角丸 */
}
#feedArea3 .feed_contentSnippet{/* 検索結果 本文 */
background-color:#ccccff;/* 背景色 */
display:block;
padding:2px;/* 内側余白 */
padding-left:5px;/* 内側余白(左) */
font-size:10px;/* 文字の大きさ */
color:#000000;/* 文字色 */
position:relative;
top:0px;
width:89%;/* 幅 */
left:18px;/* 左へ */
border-radius: 6px;/* CSS3角丸 */
}
#G_seach_wrap{/* 検索部分全体 */
position:relative;
}
#G_seach{/* 検索入力部分 */
border-radius: 6px;/* CSS3角丸 */
border:1px solid #ffccff;/* 枠 */
float:left;
padding-left:5px;
width:200px;/* 幅(調整してください) */
margin-left:10px;
}
#G_searchBtn{/* 検索ボタン */
background-image: url("http://stat001.ameba.jp/user_images/20110824/06/new-blue-777/d3/5b/g/o0014001411437837345.gif");
background-repeat: no-repeat;/* 繰り返ししない */
background-position:center center;/* 背景画像の位置 */
display:block;
text-indent:-9999px;/* 文字を表示させない */
width:20px;/* 幅 */
position:absolute;
top:2px;
left:195px;
}
#G_searchBtn:hover{
cursor:pointer;
}
#G_searchClear{/* クリアーボタン */
background-image: url("http://stat001.ameba.jp/user_images/20120915/07/new-blue-777/81/32/g/o0050002012188289567.gif");
background-repeat: no-repeat;/* 繰り返ししない */
background-position:center center;/* 背景画像の位置 */
display:block;
text-indent:-9999px;/* 文字を表示させない */
width:50px;/* 幅 */
height:20px;/* 高さ */
position:absolute;
top:2px;
left:230px;
}
#G_searchClear:hover{/* クリアーボタンにカーソルを乗せたとき */
cursor:pointer;/* ポインターカーソル */
}
#feedArea3_radio{/* ラジオボタンの調整 */
text-align:left;
padding-left:5px;
font-size:12px;/* 文字の大きさ */
}
#feedArea3_radio select{/* 表示件数のセレクトボックス調整 */
margin-left:25px;
}
#feedArea3_radio input{/* ラジオボタンの調整(水平位置) */
vertical-align:-3px;
}
.feedarea_noentry{/* Search results 0 entryの調整 */
color:#ff0000;/* 文字の色 */
}
/* ------------------------------------------------------ */
● 検索を絶対配置したい場合（固定）は下記ＣＳＳを追記します（例）
#google_search_Area{
position:fixed;
bottom:10px;
left:10px;
z-index:100;
background-color:#333333;
width:300px;
}
● この記事のスクリプトの内容
function G_search_Load() {// Google Search 実行
var Query_str= document.getElementById("G_seach").value;
if(document.getElementById("G_search_sel2").checked==true){
Query_str=Blog_str+' '+document.getElementById("G_seach").value;;
}
var sel_count=10;
var sel_count_obj=document.getElementById("G_search_count");
for (var i=0;i<sel_count_obj.options.length;i++) {
if(sel_count_obj.options[i].selected==true){
sel_count=sel_count_obj.options[i].value;
}
}
var feedControl = new google.feeds.FeedControl();
feedControl.setLinkTarget(google.feeds.LINK_TARGET_BLANK);// target="_blank"
var container = document.getElementById("feedArea3_Area");
container.innerHTML ='<div id="feedArea3"></div>';
google.feeds.findFeeds(Query_str, function (result){
var container = document.getElementById("feedArea3");
var html_data = '';container.innerHTML = "";
if(result.entries.length==0 || result.error){
container.innerHTML = '<div class="feedarea_noentry">Search results 0 entry</div>';
}
if (!result.error && result.entries.length > 0) {
for (var i = 0; i < result.entries.length; i++) {
var url=result.entries[i].url;
var title=result.entries[i].title;
var link=result.entries[i].link;
var contentSnippet=result.entries[i].contentSnippet;
html_data = '<div class="feedarea_dtl">'+
'<br><span class="feed_title"><a href="'+link+'">'+title+'</a></span><br>'+
'<span class="feed_contentSnippet">'+contentSnippet+'</span><br>'+
// '<span class="feed_url">'+url+'</span>'+
'</div>';
if(sel_count==i){break;}
container.innerHTML += html_data;
}
if($('#feedArea3_wrap').length==0){$("#feedArea3").wrap('<div id="feedArea3_wrap"></div>');}
}
});
}
function G_search_Clear(){// Google Search 結果のクリアー
var container = document.getElementById("feedArea3_Area");
container.innerHTML ='<div id="feedArea3"></div>';
}
function G_search_input(){// Google Search 入力部分のセット
$('#feedArea3w').append('<div id="G_seach_wrap"><input type="text" size="30" maxlength="255" value="" id="G_seach"> <span id="G_searchBtn" onclick="G_search_Load();">検索</span> <span id="G_searchClear" onclick="G_search_Clear();">Clear</span></div><br><div id="feedArea3_Area"><div id="feedArea3"></div></div>');
}
function G_search_radio(){// Google Search ラジオボタン部分のセット
$('#feedArea3w_radio').append('<div id="feedArea3_radio"><input type="radio" name="G_search_sel" value="Web_seach" id="G_search_sel1" checked><label for="G_search_sel1">ウエブサーチ</label> <input type="radio" name="G_search_sel" value="Blog_seach" id="G_search_sel2"><label for="G_search_sel2">ブログサーチ</label> <select name="G_search_count" id="G_search_count"><option value="1"> 1件</option><option value="2"> 2件</option><option value="3"> 3件</option><option value="4"> 4件</option><option value="5"> 5 件</option><option value="6"> 6件</option><option value="7"> 7件</option><option value="8"> 8件</option><option value="9"> 9件</option><option value="10" selected>10件</option></select></div>');
}