スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Google AJAX Search API - News Bar をカスタマイズ

 かなり前に「Google AJAX Search APIでGoogle Newsを表示」ということで紹介しました。同じようなものでビデオ検索ブログ検索ブック検索もありどれも簡単に設置できます。で、今回は一歩進んでニュース検索をカスタマイズしてみます。
 まずは外部ファイルを読み込みます。API keyはいつものようにSign-up for an AJAX Search API Keyで取得してください。
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=取得したAPI key"type="text/javascript"></script>
<link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet"type="text/css"/>
<script src="http://www.google.com/uds/solutions/newsbar/gsnewsbar.js"type="text/javascript"></script>
<link href="http://www.google.com/uds/solutions/newsbar/gsnewsbar.css"rel="stylesheet" type="text/css"/>
そしてJavaScriptを記述します。
  <script type="text/javascript">
    function LoadNewsBar() {
      var root = document.getElementById("newsBar");

      options = {
          largeResultSet : true,
          resultStyle : GSnewsBar.RESULT_STYLE_COMPRESSED,
          title : "ニュース",
          autoExecuteList : {
            executeList : [ "SEO", "Google", "Yahoo" ]
            }
          };

      var newsBar = new GSnewsBar(root, options);
    }
    GSearch.setOnLoadCallback(LoadNewsBar);
  </script>
 で、body内の表示したいところに下記のソースを挿入します。
<div id="newsBar">Loading...</div>
 表示する枠の大きさや文字の色はCSSで調整できます。
<style type="text/css">
    #newsBar {
      margin : 1em;
      width : 400px;
    }
</style>
 カスタマイズのポイントは赤字で表示しているoptionsの中身となります。赤字のところがポイントですのでご自由にカスタマイズしてみてください。
largeResultSet : false //検索結果を4件表示
largeResultSet : true //検索結果を8件表示
resultStyle : GSnewsBar.RESULT_STYLE_EXPANDED
 //記事の内容を表示する
resultStyle : GSnewsBar.RESULT_STYLE_COMPRESSED
 //記事の内容を表示しない
title : "ここにタイトルを記述します"
autoExecuteList : {
cycleMode : GSnewsBar.CYCLE_MODE_RANDOM,
    // これを記述すると最初に表示されるニュースがランダムになります
executeList : ["キーワード1", "キーワード2", "キーワード3" ]
    // キーワードを入力します。数は自由に増減できます。
}
 サンプルを実際表示すると次のようになります。
Loading...
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。