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

以前紹介したGoogle AJAX Search APIのAJAX News Barですがオプションの種類が増えたので再度一から説明してみます。
まずは外部ファイルを読み込みます。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 : {
        cycleTime : GSnewsBar.CYCLE_TIME_LONG,
        cycleMode : GSnewsBar.CYCLE_MODE_RANDOM,
        executeList : [ "SEO", "Google", "Yahoo" ]
        },
      linkTarget : GSearch.LINK_TARGET_BLANK,
      horizontal : false
     };

    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 : "ここにタイトルを記述します"
cycleTime : GSnewsBar.CYCLE_TIME_LONG
  // 記事が入れ替わる早さで、SHORT、MEDIUM、LONGの順で遅くなります
cycleMode : GSnewsBar.CYCLE_MODE_RANDOM
  // 初に表示されるニュースがランダムになります
cycleMode : GSnewsBar.CYCLE_MODE_LINEAR
  //順番どおりに表示されます
executeList : ["キーワード1", "キーワード2", "キーワード3" ]
  // キーワードを入力します。数は自由に増減できます
linkTarget : GSearch.LINK_TARGET_BLANK
  // これでリンク先を別枠で表示します
horizontal : false
  // 表示モードを指定します。trueにすると横長のものになります。
 サンプルを実際表示すると次のようになります。
Loading...
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









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

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加