【GSE】同じGoogleカスタム検索を1ページに複数表示する方法

【GSE】同じGoogleカスタム検索を1ページに複数表示する方法

Googleカスタム検索のちょっと変わった使い方について仕事で必要な案件があって調べるのに相当苦労したのでメモしておきます。

 

この記事の対象者

  • 同じGoogleカスタム検索を1ページの中に複数設置したい方
  • Googleカスタム検索の呼び出しコードをコピペしたら”Loading”の文字だけが表示されて困ってる

 

前提条件

この記事は下記を前提としています。

  • “同じ”Googleカスタム検索の表示を対象
  • Googleカスタム検索(v1)を複数設置

Googleカスタム検索(v2)を複数設置する方法は調べてみたところ無さそうです。(あったら教えて下さい)
ちなみに、v1とv2を併用する方法等については下記記事を参考にしてもらえたらと思います。

【参考リンク】

【実は簡単】Googleカスタム検索を1ページ内に同時に2つ設置する方法

 

結構簡単に出来る

Googleカスタム検索を呼び出しているjavascriptのidを変えてやるだけで同じGoogleカスタム検索であれば同じページ内で複数回呼び出すことが可能となります。

 

変更前

<div id='cse' style='width: 100%;'>Loading</div>
<script src='https://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
    google.load('search', '1', {
        language: 'ja',
        style: google.loader.themes.V1_DEFAULT
    });
    google.setOnLoadCallback(function () {
        var customSearchOptions = {};
        var orderByOptions = {};
        orderByOptions['keys'] = [{
            label: 'Relevance',
            key: ''
        }, {
            label: 'Date',
            key: 'date'
        }];
        customSearchOptions['enableOrderBy'] = true;
        customSearchOptions['orderByOptions'] = orderByOptions;
        customSearchOptions['overlayResults'] = true;
        var customSearchControl = new google.search.CustomSearchControl('******************:***********', customSearchOptions);
        customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var options = new google.search.DrawOptions();
        options.setAutoComplete(true);
        customSearchControl.draw('cse', options);
    }, true);
</script>

 

変更点1

<div id='cse2' style='width: 100%;'>Loading</div>

一行目のdivのIDを”cse”から”cse2″に変更しただけです。

 

変更点2

customSearchControl.draw('cse2', options);

同じように25行目の”cse”を”cse2″に変更しただけです。
これだけで複数設置が可能となります。
もっと増やしたい方は、3,4,5・・・とここの数字をどんどん増やせば何個でも設置できます。(めちゃくちゃページ表示が重そうだけど)

 

らいか
Googleの規約的にはやってはいけないと書いてはいませんが、”やっていい”とは書いていない点には注意してください
【GSE】同じGoogleカスタム検索を1ページに複数表示する方法

ABOUTこの記事をかいた人

工業高等専門学校を卒業後、NTTグループのSI企業に就職。数々の炎上案件を鎮火するために日本各地を5年間転々とする。2015年に一般ユーザ向けのWebシステム開発案件のチームリーダとして業務に従事し、改めて"Webのものづくりの楽しさ"に気付きWeb制作会社に転職。Web制作やアクセス解析を使ったオウンドメディアの運用改善などを行っていく中で、もっとユーザー目線でWebをただ制作するだけではなく企画や運用まで幅広い領域で仕事がしたいと感じるようになり、Webディレクターのキャリアを目指す。日本中のビジネスホテルに詳しく、犬や猫よりも鳥派。