ロゴ
menu
HOME > Google API > Googleトレンドを外部サイトに埋め込み、かつ任意のキーワードに変更する

Googleトレンドを外部サイトに埋め込み、かつ任意のキーワードに変更する

「Googleトレンドをサイトに表示したい」というご要望が有り、通常であれば埋め込みコードが提供されているので、それを貼り付けるだけなのですが、今回は任意のキーワードに変更する必要が有り、考えてみました。

通常の埋め込み

https://trends.google.co.jp/trends/explore?q=Youtube&geo=JP

埋め込みコードが提供されていますので、それをサイトに貼り付けるだけです。

任意のキーワードに変更する

サンプル

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript" src="//ssl.gstatic.com/trends_nrtr/2884_RC01/embed_loader.js"></script>
<script>
    $(document).on("click","button", function(){
        let keywd = $("#keywd").val();
        let trendWrap = document.getElementById("trendWrap");
        $("#trendWrap").html("");
        if(keywd){
            trends.embed.renderExploreWidgetTo(trendWrap,"TIMESERIES", {"comparisonItem":[{"keyword":keywd,"geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
        }
    });
</script>
<div id="trendWrap"></div>

trends.embed.renderExploreWidgetTo(trendWrap,”TIMESERIES”…..

青字の部分が埋め込む箇所です。

ココではキーワードのみの変更に留めていますが、期間やカテゴリの指定等も出来ます。WordPressで任意のカテゴリをGoogleトレンドに渡し、グラフをブログ内に表示するといったことも出来ると思います。