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

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

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

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

 

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

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

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

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

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

App Store Insertを試す

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

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

WS000004

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

WS000000

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

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

WS000001

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

WS000002

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

WS000007

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

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で生成したリンクで作った記事はこの前の記事 ↓ こちらで表示されてますのでご参考までに。

スマホを変えた時に必須アプリを入れて使えるようにする作業スマホを変更した時に必要な作業としてアプリをダウンロード+設定しないといけない。これは結構時間がかかる作業なので次回のためによく使うアプリのメモしておきます。

今度はAndroidやWindowsもアイコン付きのアプリ紹介するときに便利なのないか調べてみます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする