App Store のアプリをブログで紹介したいなら iTunes の「Link Maker」を使おう


ブログ等でiPhoneアプリを紹介をしたい場合、Apple公式サイトのLink Makerというページからリンクコードを取得すると、簡単にボタン(バッジ)の設置ができます。

しかし、WordPress をお使いの場合には、ちょっとした注意が必要です。なぜなら、そのままコードを貼り付けても上手くいかないからです。

そこで今回は、WordPress をお使いの方が、App Storeのボタン(バッジ)をブログに掲載する方法を解説します。

記事の後半では、より簡単に使うための方法も紹介しているので、ぜひ参考にしてください。

Link Makerで埋め込みコード取得

Link Makerとは、iTunesで提供しているApp・映画・Musicなどのコンテンツへのリンクボタン(バッジ)を簡単に取得できる、Apple公式のサービスです。

まずは、Appleの Link Maker にアクセスして、紹介したいアプリを見つけることから始めます。

iTunes:Link Maker

link maker

目的のアプリを検索する前に、「ストア国」と「Media Type」を選択します。

今回は、サンプルとして、iPhoneの無料写真文字入アプリ「Phonto 」のリンクを作ってみます。

【 ストア国 > 日本 】と【 Media Type > App 】を選択したら、検索窓に【Phonto】と入力して、検索をかけます。

目的のアプリを見つけたら、クリックしてください。

次の画面でリンクの取得ができます。

①の中から、表示したいバッジのタイプやテキストリンクが選べます。選択すると②に【 埋め込みコード 】が表示されます。

実際には、それぞれこんな感じで表示されます。

バッジ

Phonto 写真文字入れ – youthhr

スモールバッジ

③は直リンクになりますが、アプリ紹介なんかじゃあまり使う機会がないかもしれませんね。

今回は、大きい方のバッジを取得したいと思いますが、WordPress を利用している人はここで注意が必要です。

WordPress での Link Maker利用方法

そのままでは使えない

WordPress でバッジの埋め込みコードを利用するには、通常だと、「投稿の編集」画面をテキストモード(HTMLモード)にして、ただ貼り付けるのが一般的だと思います。

しかし、取得したコードをそのまま貼り付けてはいけません。リンク文字が空欄になっているので、何かしらのテキストを追記する必要があるんです。

<a href="https://itunes.apple.com/jp/app/phonto-%E5%86%99%E7%9C%9F%E6%96%87%E5%AD%97%E5%85%A5%E3%82%8C/id438429273?mt=8" style="display:inline-block;overflow:hidden;background:url(//linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg) no-repeat;width:135px;height:40px;background-size:contain;">何かテキストを入力してください</a>

なぜなら、ここが空欄のままだと、ビジュアルモードに戻した時に、せっかく入力した埋め込みコードが綺麗さっぱり消えてしまいます。

これは、WordPress の自動整形機能によるものですが、これを防ぐため、何かしらのテキストを入れてやる必要があるんです。

CSSで調整する

けれども、テキストを入力すると、バッジとテキストが重なって表示されてしまいますよね。
何かテキストを入力してください
なので、styleタグに手を加えて、テキストが表示されないようにしてあげます。

text-indent: 100%;white-space: nowrap;overflow: hidden;

上記のコードをstyleタグに加えてください。

<a href="https://itunes.apple.com/jp/app/phonto-%E5%86%99%E7%9C%9F%E6%96%87%E5%AD%97%E5%85%A5%E3%82%8C/id438429273?mt=8" style="text-indent: 100%;white-space: nowrap;overflow: hidden;display:inline-block;overflow:hidden;background:url(//linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg) no-repeat;width:135px;height:40px;background-size:contain;">何かテキストを入力してください</a>

これで、文字を消すことができます。

何かテキストを入力してください

ただ、たくさんのアプリを紹介したい時なんかは、この作業っていちいち面倒ですよね?

そんな時のために、簡単にテキスト部分を消す方法をご紹介します。

クイックタグを登録してテキスト消去を自動化する

考え方としては、「埋め込みコード」をdivタグで囲み、スタイルシートでテキストを見えなくするといった感じです。

ポイントは、divタグで囲む作業を、手入力ではなく、クイックタグを使いボタンひとつで実現するところです。

クイックタグの登録

まずは、クイックタグ登録のため、functions.phpに以下のコードを追記します。

function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
		QTags.addButton( 'eg_itunes', 'iTunes', '<div class="itunes">', '</div>');
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

この記述を加えるだけで、投稿の編集」のテキストモードにiTunesボタンが追加されているはずです。

このiTunesボタンを一度押すと<div class=”itunes”>が、もう一度押すと</div>が自動で入力されます。これを利用して、「埋め込みコード」をdivタグで囲ってあげてください。

<div class="itunes"><a style="display: inline-block; overflow: hidden; background: url('//linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg') no-repeat; width: 135px; height: 40px; background-size: contain;" href="https://itunes.apple.com/jp/app/phonto-%E5%86%99%E7%9C%9F%E6%96%87%E5%AD%97%E5%85%A5%E3%82%8C/id438429273?mt=8">テキストを入力</a></div>

CSSで非表示に

また、実際にテキストを非表示にするため、style.cssには次のコードを書き加えます。

/**********************************************/
/* Link Maker 埋め込みコードのテキスト非表示化 */
/**********************************************/
.itunes a{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

これで完了です。

まとめ

いかがでしたか?上手くできましたか?

クイックタグを追加する方法は、結構応用が利くので、アイデア次第で他にも色々な使い方ができると思います。ご自身で研究されてみてはいかがでしょうか。

以上、「App Store のアプリをブログで紹介したいなら iTunes の Link Maker を使おう」でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です