Sumirexxx

今日もiPhone片手に出かけます

PHGのIDゲット!AppHTMLに対応した手順と方法 はてなブックマーク - PHGのIDゲット!AppHTMLに対応した手順と方法

ブックマークレット

今日は満月前日なので、いつものお店で飲んで帰ります。理由はなんでもいいと思う。。

AppHtmlをPHGアフィリエイト対応するぞー!と燃えていた私。でもそもそもアフィリエイトをやっていなかったので右も左もわかりませ~ん。

まずは見てみようかな

AppHtmlをよく見ると、アフィリエイトIDを組み込んでくれる項目があるのですね。
でもここは「リンクシェアid」。

PHG対応前のアフィリエイト会社とでもいうのでしょうか。

いままではこのリンクシェアidで良かったそうですが、2013年10月からはPHGのアフィリエイトidでないと適用されなくなります。

ということで、今回やりたい対応は「PHG対応」なので違う方法を探します。

自分のソースみてみる

以前にAppHtmlカスタマイズをしていたので、なんとなくこのソースのどこかに入れればいいんじゃないかなってことはわかります。

いまのところ、この前カスタマイズしたAppHtmlはこんな感じになっています。
ちなみにBookmarkret変換前。

<div id="apphtml">
    <a href="${linkshareurl}" target="_blank" rel="nofollow">
    <img width="100" class="alignleft" align="left" src="http://sumirexxx.com/2013/09/18/phg_fix_apphtml/" style="border-radius: 20px 20px 20px 20px;-moz-border-radius: 20px 20px 20px 20px;-webkit-border-radius: 20px 20px 20px 20px;box-shadow: 1px 4px 6px 1px #999999;-moz-box-shadow: 1px 4px 6px 1px #999999;-webkit-box-shadow: 1px 4px 6px 1px #999999;margin: -5px 15px 1px 5px;"></a>
    <strong> ${title}</strong>
    <a href="${linkshareurl}" target="_blank" rel="nofollow"></a><br> 
    カテゴリ: ${category}<br style="clear: both;">
    <div class="appDownloadButton">
        <a href="${linkshareurl}" rel="nofollow" target="_blank">
        <img src="http://sumirexxx.com/wp-content/themes/sample/images/apri_downloadbutton.gif" alt="アプリをダウンロードする" width="280" height="50" />
        </a>
    </div>
</div>

ふむふむ。${linkshareurl}という箇所があります。ここをPHG用にすればいいですね。

どうやってPHGのidに変えるの??

次の疑問は、あかめちゃん(@mk_mizuho)がやりかたを載せていてくれたのでこれで迷わず出来ました!!いつもありがとうございます。

[Å] PHG対応の「AppHtml」の作り方・設定方法をご紹介!AppHtml愛用者はぜひ! | あかめ女子のwebメモ

予約語といういうものがあるのね。
予約語についてはふぃーぷれさん(@feelingplace)がまとめてくださっています。親切!

あなたはAppHtmlの予約語一覧を知っていますか? | Feelingplace

なるほど、この一文をいれれば自分のアフィリエイトidとして認識してくれるようです。

${url}%26at=自分のPHGのid

私は先日カスタマイズしたフォーマットを使おうと思います。あとは、${linkshareurl}の部分とまるごと置き換えればOKということですね。

※注意 ${linkshareurl}は2か所あります。前半と後半にあるので、両方修正するようにします。

Bookmarklet作成前のソースはこのようになります。

</p>

<div id="apphtml">
    <a href="${url}%26at=自分のPHGのid" target="_blank" rel="nofollow">
    <img width="100" class="alignleft" align="left" src="http://sumirexxx.com/2013/09/18/phg_fix_apphtml/" style="border-radius: 20px 20px 20px 20px;-moz-border-radius: 20px 20px 20px 20px;-webkit-border-radius: 20px 20px 20px 20px;box-shadow: 1px 4px 6px 1px #999999;-moz-box-shadow: 1px 4px 6px 1px #999999;-webkit-box-shadow: 1px 4px 6px 1px #999999;margin: -5px 15px 1px 5px;"></a>
    <strong> ${title}</strong>
    <a href="${url}%26at=自分のPHGのid" target="_blank" rel="nofollow"></a><br> 
    カテゴリ: ${category}<br style="clear: both;">
    <div class="appDownloadButton">
        <a href="${url}%26at=自分のPHGのid" rel="nofollow" target="_blank">
        <img src="http://sumirexxx.com/wp-content/themes/sample/images/apri_downloadbutton.gif" alt="アプリをダウンロードする" width="280" height="50" />
        </a>
    </div>
</div>

<p>

出力と動作も確認してからあとの作業をしてください。
そうしないとあとでまた直すのがたいへんになってしまいます。。

わかったところで、設定変更するべき作業が2つあります。

  1. これからブログに載せる際に使うBookmarklet。
  2. いまブログに載っているアプリリンク。

順番に参りましょう。

新しいAppHtmlの作成

1つめの「これからブログに載せる際に使うBookmarklet」を修正します。

${linkshareurl}となっている部分を、${url}%26at=自分のPHGのidに置き換えます。さっき上でやった通りですね。

※注意 こちらも${linkshareurl}は2か所あります。

さきほど確認したソースをAppHtmlに貼り付けてBookmarkletを生成します。
見た目は変わらないけど、裏側はPHG対応に切り替わっていますね。

<div id="apphtml">
    <a href="${url}%26at=10l9XF" target="<em>blank" rel="nofollow"><img width="100" class="alignleft" align="left" src="http://sumirexxx.com/2013/09/18/phg_fix_apphtml/" style="border-radius: 20px 20px 20px 20px;-moz-border-radius: 20px 20px 20px 20px;-webkit-border-radius: 20px 20px 20px 20px;box-shadow: 1px 4px 6px 1px #999999;-moz-box-shadow: 1px 4px 6px 1px #999999;-webkit-box-shadow: 1px 4px 6px 1px #999999;margin: -5px 15px 1px 5px;"></a>
    <strong> ${title}</strong>
    <a href="${url}%26at=10l9XF" target="</em>blank" rel="nofollow"></a><br>
 カテゴリ: ${category}<br style="clear: both;">
    <div class="appDownloadButton">
    <a href="${url}%26at=10l9XF" rel="nofollow" target="<em>blank">
    <img src="http://sumirexxx.com/wp-content/themes/sample/images/apri</em>downloadbutton.gif" alt="アプリをダウンロードする" width="280" height="50" /></a></div></div>

つぎは今まで作ってきたAppHTMLを置き換える作業です。
あのプラグインがよさそうな予感・・。

あのプラグイン「Search Regex」

たびたびの御登場です。よろしくおねがいします。
1つめの「いまブログに載っているアプリリンク。」に使用します。

使い方はこちらでごらんいただければと思います。

AppHTMLリンク切れの修正方法をご紹介 | sumirexxx

これは慎重にご自分のソースを確認してください。
カスタマイズするときに、リンクシェアIDの部分を変更されていましたか?私は全くなにもしていなかったので、全部のリンクにこのidが入っている状態です。

置換前:10l9XF
置換後:自分のid

これでOK!
いままでのリンクが置き換わっているか確認してみてください。

完了までの流れをまとめてみました

もしも、あれ?これはどうやるのかな?っていうことがあればまとめを作りましたので少々お待ちください。

更新したら、追記します☆

これで、PHG対応完了でーす。

<