Google APIのサイト内検索機能を使い関連記事を表示

Google APIのサイト内検索機能を使い関連記事を表示

検索窓付き関連記事

検索窓付き関連記事は下記のような感じで表示されます。

検索窓付き関連記事

コードは下記のような感じになりますが、var searchの所はアメブロのテーマで使用されている要素になっているのでブログにあわせて変更してください。又webSearch.setSiteRestrictionの所は使用するブログのメインのアドレスに変更してください。

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
    google.load('search', '1');    
    function OnLoad() {
      var searchControl = new google.search.SearchControl();
      var webSearch = new google.search.WebSearch();
      // 検索用テキスト取得
      var search = $(".articleDetailArea .articleTheme a").text();
      webSearch.setSiteRestriction('ameblo.jp/detaramehp');
      searchControl.addSearcher(webSearch);
      searchControl.draw(document.getElementById("googlecontent"));
   // 検索用テキスト追加
      searchControl.execute(search);
      // 別窓を開かないようにする
      searchControl.setLinkTarget( google.search.Search.LINK_TARGET_SELF ); 
    }    
    google.setOnLoadCallback(OnLoad);    
</script>

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

又Google APIのサイト内検索機能はディフォルトだと幅が300pxに指定してあるため下記のcssを追加します。

.gsc-control {/*300pxで設定してあるためここで変更してある*/
  width: 100%!important;
}

次は検索窓なし関連記事を紹介します。

固定ページ: 1 2 3 4

最終更新日: 2013年3月13日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

Google APIのサイト内検索機能を使い関連記事を表示の関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*