iPhoneアプリのアフィリエイト リンク作成するブックマークレットの導入編

まず意味がわからない人がいれば

前回のエントリを参照してください。

 

で、導入方法

1.まずは導入先のスタイルシートに以下を追加します。

/dl/iTunesAffiliateLinkmakerBookmarklet.css

@charset "utf-8";

.appstore {
  padding: .75rem;
  background: #F9F9F9;
          border-radius: .5rem;
     -moz-border-radius: .5rem;
  -webkit-border-radius: .5rem;
  margin-bottom: 1rem;
  display: block;
}

.appstore .appstore_cf::before, .appstore .appstore_cf::after {
  content: "";
  display: table;
}
.appstore .appstore_cf::after {
  clear: both;
}

.appstore figure {
  display: block;
  padding: 1px;
          border-radius: 15px;
     -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  float: left;
  width: 75px;
  margin: 0 1rem 1rem 0;
}

.appstore figure a {
  padding: 0;
  border-bottom: 0;
}

.appstore figure img {
          border-radius: 15px;
     -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
          box-shadow: 1px 2px 4px 1px #AAAAAA;
     -moz-box-shadow: 1px 2px 4px 1px #AAAAAA;
  -webkit-box-shadow: 1px 2px 4px 1px #AAAAAA;
}

.appstore .appstore_dv {
  float: left;
  overflow: hidden;
}

.appstore h4 {
  font-weight: bold;
  margin-top: 0;
  color: #007BF6;
  font-size: 1.25rem;
  margin: 0;
}
.appstore h4 img {
  vertical-align: middle;
}

.appstore dl {
  font-size: .8rem;
  margin-bottom: 0;
}

.appstore dt {
  line-height: 180%;
  float:left;
  clear:both;
  width:100px;
  text-align: right;
}

.appstore dd {
  line-height: 180%;
  margin-left:100px;
  max-width: 500px;
}

.appstore dd a, .appstore dd a:link, .appstore dd a:visited {
  -webkit-transition: color .2s ease,border .2s ease;
     -moz-transition: color .2s ease,border .2s ease;
       -o-transition: color .2s ease,border .2s ease;
      -ms-transition: color .2s ease,border .2s ease;
          transition: color .2s ease,border .2s ease;
}

.appstore a, .appstore dd a {
  color: #00679F;
  text-decoration: none;
}

これは最終的には好きにカスタマイズしてもらえればと。

2.ブックマークレットを保存

まず2行目にある
 var token = “****…”;
にリンクシェアのトークンを入れる。この辺がわからない人もいるだろうからまた別途まとめる予定。で、ブックマークレット保存。ブックマークレットとか何?って人もいるだろうけど、この辺はググれ。chromeでしか試してないけど改行とかそのままコピペして保存すればOK。

javascript:(function(){
  var token = "************************************";
  var mid   = "13894";

  if (location.href.match(/id([\d]{9})/)) {
    var id = location.href.match(/id([\d]{9})/)[1];
  } else {
    alert("アプリのidを取得できません。");return;
  }

  function getHttp(p, c) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open('GET', p, true);
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        c(xmlhttp.responseText);
      }
    };
    xmlhttp.send(null);
  }

  var af = "http://queltide.com/js/acao.php?u="+encodeURIComponent("token="+token+"&mid="+mid+"&murl="+location.href);
  getHttp(af, function(aflink) {
    getHttp("https://itunes.apple.com/lookup?lang=ja_jp&country=JP&id="+id, function(req) {
      var json = eval("("+req+")");
      if (json.resultCount !== 1) {
        alert("アプリ情報を取得できません。");return;
      } else {
        d = json.results[0];
        var copypa = "<aside class='appstore'><div class='appstore_cf'><figure><a href='" +
                   aflink + "' rel='nofollow' target='itunes_store'><img src='" +
                   d.artworkUrl60 + "' width='75' alt='" +
                   d.trackName + "'></a></figure><div class='appstore_dv'><h4><a href='" +
                   aflink + "' rel='nofollow'>" +
                   d.trackName + " <img src='/images/viewinitunes_jp.png' alt='iTunesで見る' width='95' height='23'></a></h4><dl><dt>カテゴリ:</dt><dd>" +
                   d.genres.join(', ') + "</dd><dt>掲載時の価格:</dt><dd>" +
                   d.formattedPrice + "</dd><dt>販売会社:</dt><dd><a href='" +
                   d.artistViewUrl + "' rel='nofollow'>" +
                   d.artistName + "</a></dd><dt>バージョン:</dt><dd>" +
                   d.version + "</dd>";
        if (typeof d.supportedDevices != "undefined") copypa += "<dt>対象デバイス:</dt><dd>" + d.supportedDevices.join(', ') + "</dd>";
        copypa += "</dl></div></div></aside>";

        var d1 = document.createElement('div');
        d1.setAttribute('id', 'queltide_d1');
        d1.setAttribute('style','position:fixed;bottom:0px;left:0px;background-color:#111;filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;z-index:99999;overflow:auto;width:100%;height:100%;text-align:center;');
        document.body.appendChild(d1);

        var d2 = document.createElement('div');
        d2.setAttribute('id', 'queltide_d2');
        d2.setAttribute('style','padding:15px;position:fixed;width:400px;left:50%;top:10%;margin-left:-200px;z-index:99999;background:#FFF;border-radius:.25rem;-moz-border-radius:.25rem;-webkit-border-radius:.25rem;');
        d2.innerHTML="<h5>以下のHTMLをコピーしてブログにペースト。</h5><br><textarea style='width:370px;height:200px;border-radius:.25rem;-moz-border-radius:.25rem;-webkit-border-radius:.25rem;'>"+copypa+"</textarea>";
        document.body.appendChild(d2);
      }
    });
  });
})();

30行目から始まるのがhtml部分なので、この辺を変更すればより好みのものに近づくかと。後はレーティング追加したいとかも基本的な情報はiTunesAPIから取得しているのでiTunes Search APIとか見てもらって、実際にどんなデータ返ってるのか見てもらえばバッチリかと。例えば「d. userRatingCount」とかだとレビュー数?だと思う。

あ、あと前回もちょっと書いたけどこれはスクリーンショットの表示には対応してなくてhtmlとcssなんかは書いた途中のものがgithubに上がっているので、スクリーンショットも必要な人は一度見てやってください。

と、こんなもんかな?あ、あとアプリの検索は日本に限定しています。

コメントを残す

メールアドレスが公開されることはありません。