読者です 読者をやめる 読者になる 読者になる

@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

jQueryMobileでGoogle Adsenseを使う

jQuery mobile

ググったら、日本語の情報はiframe使うと良いよ!って書いてありまして、で、具体的にどうすんねん?と。
英語のページを見てったらコードが書いてありましたが、ココにAdsenseのコードを書きなねとしか書いてなかったので、試行錯誤しながらやってみた。
で、出来たのだけれども、Chrome, Safari, FireFoxでは表示されませんでしたが、デプロイしてAndroidipod touchで見たら大丈夫そうでした。IE?何それおいしいの?

HTMLはこんな感じです。

<section data-role="page">
  <header data-role="header">
    <h1>タイトル</h1>
    <div id="google_ads_top">
      <div align="center"></div>
    </div>
  </header>
  <div data-role="content">
    コンテンツ
  </div>
  <footer data-role="footer">
    <h4>フッター</h4>
  </fotter>
</section>

<div id="adsense_top" style="display:none;">
    <script type="text/javascript"><!--
    // XHTML should not attempt to parse these strings, declare them CDATA.
    /* <![CDATA[ */
    window.googleAfmcRequest = {
        client: 'XXXXXXXXXXXXXXXX',
        format: 'XXXXXXXXXXXXXXXX',
        output: 'HTML',
        slotname: 'XXXXXXXXXXXXXX',
    };
    /* ]]> */
    //--></script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_afmc_ads.js"></script>
</div>

javascriptはこんな感じです。jQueryの読み込みと、jQueryMobileの読み込みの間に入れてくだしあ。

$(window).load(function() {
    var ads_top = $("#adsense_top").find("iframe");
    $(ads_top).appendTo("#google_ads_top div");
    $("#adsense_top").remove();
    $("section").live("pagehide", function(event, ui) {
        $(ads_top).appendTo("#google_ads_top div");
    });
});