WPでiPhoneアプリ紹介リンクを手軽に作りたい

Contents

1 iTunesのバナービルダーがWPだと表示されない？
2 App Store Insertを試す

iTunesのバナービルダーがWPだと表示されない？

iOSアプリを紹介するブログを書くときデフォルトのiTunesのBannerBuilderだとワードプレスでiOSアプリのアイコンが表示されない場合と、アイコンの下になか余計な「App Storeからダウンロード」などのアイコンが表示される。

以下に表示させてみた・・・うまく表示されない。

↑ここに表示させてみたけど見えない？

上にこういうバナーが表示される予定だけど・・・

こんな困ったことになるのでiPhoneアプリを紹介するときになにかよいプラグインかWebサービスなどがないか探してみた。

以下のiTunesのサイトからiOSやMacのアプリのリンクを生成できます。

iTunes Link Maker

App Store Insertを試す

こちら2013年に作ってから更新されていないようなのでちょっとメンテナンスが必要。

投稿画面から iOS / Mac アプリの紹介リンクを挿入するプラグイン App Store Insert を作りました（PHG 対応） | rakuishi.com

今までこのブログでは、iOS / Mac アプリは AppHtml メーカーを使用し、リンクシェアのアフィリエイトリンク付きで紹介してきました。しかし、2013年10月1日以降は、リンクシェアのアフィリエイトリンクが無効になるとのことで、投稿画面か

ダウンロード・解凍したらプラグインのディレクトリにアップロードします。

WPで有効にしてトークンを設定します。

プラグインを有効にします。

: 有効にしたら設定します。

: 自分のトークンを設定

これで記事作成ページで下のほうに表示されるようになりました。

こんなかんじでiPhone,iPad,Macのアプリが検索できてアイコン付きのリンクを作ってくれるみたいです♪

おおっ！検索したら該当アプリに近いアプリが数個表示されました。

アイコンが表示されないアプリもありますのでこの辺を以下で修正してみます。

CSSを読み込むように設定

なんだかスタイルシートを読み込んで無いようなので”app-store-insert.php”に以下を追加

add_action( 'wp_enqueue_scripts', 'app_store_insert_style' ); function app_store_insert_style(){ wp_enqueue_style('app_store_insert_style', plugins_url('app-store-insert-style.css', __FILE__)); }

CSSを読むと投稿ページが崩れるので変更

app-store-insert-style.cssも変更します。26行目以下すべて削除

サイトのブログページで使うapplication_box以外の記事投稿ページ用のCSSをすべて削除しました。/* style */以下のCSSの.radio、.buttonなど削除。

（ただ、投稿ページのCSSがなくなるので表示がデフォルトになります（汗））

.application_box {
   width: 100%;
   margin: 0 0 12px 0;
   display: block;
   float: left;
   font-size: 10px;
   color: #333;
   line-height:120%;
}

.application_box a strong{
font-size: 14px;
}

application_boxも一部変更しました。

一部アイコン画像が表示されない問題

app-store-insert-iframe.php 37行目

$replacement = '$1.100x100-75.$2'; // macSoftware を検索した場合に、.512x512-75 が邪魔なので除去する $subject = str_replace(".512x512-75", "", $result->{'artworkUrl512'});

↓　以下のように変更（ついでにアイコンの大きさを75pxに変更しました。）

        // macSoftware を検索した場合に、.512x512-75 が邪魔なので除去する
       $subject = str_replace(".512x512-75", "", $result->{'artworkUrl512'});
       //$replacement = '$1.100x100-75.$2';
       if(preg_match("/thumb/",$subject)){
           $replacement = '$1.$2';
       }else{
           $replacement = '$1.75x75-75.$2';
       }

こうすると表示されなかったアプリのアイコンが表示されるようになる。↓

上記のようにスクリプトを変更したら「thumb」がつくURLは投稿ページにデカイアイコンが表示されてしまうので、以下のテンプレートのimgタグに「width=\"75\"」を入れてあります。アイコンのサイズを変更する場合はimgタグも一緒に変更してくださいね。

HTMLテンプレート変更

バージョン・サイズ・作者を表示するように以下のように変更しました。（52行目）

    // ここから: 投稿に使用するテンプレート
   $temp = "<div class=\"application_box\"><a href=\"$software->phgTrackViewUrl\" target=\"itunes_store\"><img width=\"75\" src=\"$software->artworkUrl\"></a><a href=\"$software->phgTrackViewUrl\" target=\"itunes_store\"><strong>$software->trackName</strong></a><br />カテゴリ: $software->genre<br />作者: $software->sellerName<br />Var：$software->version<br />サイズ：$software->fileSize<br />価格: $software->price<br clear=\"both\" /></div>";
   // ここまで: 投稿に使用するテンプレート

以上でうまくアイコン付きでiPhoneのアプリをワードプレスで手軽に紹介できるようになりました。

App Store Insertで生成したリンクで作った記事はこの前の記事　↓　こちらで表示されてますのでご参考までに。