読者です 読者をやめる 読者になる 読者になる

はてなブログ開発ブログ

はてなブログの新機能など開発に関する情報、公式のお知らせを発信します。

iTunes StoreやApp Storeから商品の検索・貼り付けに対応しました。アフィリエイトプログラムも簡単に利用できます!

新機能

本日、はてなブログの編集サイドバーに、音楽やアプリを手軽に貼り付けて紹介できる「iTunes商品紹介」機能を追加しました。

iTunes商品紹介」機能では、iTunesで販売されている楽曲や映画、App Storeのアプリ、iBookstoreの電子書籍などを簡単な手順で検索して、ブログの記事本文に商品情報を貼り付けることができます。iTunesアフィリエイトプログラムにも対応しており、スマートフォンiOSアプリでも使うことができます。どうぞご利用ください。

編集サイドバーのiTunes商品紹介
編集サイドバーからiTunes商品紹介を開いて「はてなブログ」アプリを貼り付ける

iTunes貼り付けの使い方

PC版の編集画面では、編集サイドバーに追加された iTunes商品紹介 アイコンをクリックして「iTunes商品紹介」タブを開きます。

タブ上部のフォームにキーワードを入力して検索すると、関連する商品が一覧表示されます。このとき、検索フォーム下のドロップダウンメニューで商品の種類を選択できます。デフォルトで「すべて」が検索されますが、音楽なら「アルバム」や「アーティスト」、「映画」「iPad」「ブック」など、さまざまな商品を検索できます(本記事末参照)。

検索一覧から商品を選択して「選択したアイテムを貼り付け」を押すと、編集画面に商品が貼り付けられます。Song Previewに対応した一部ブラウザ(IE10、SafariChromeなど)では、楽曲を試聴できます。

編集サイドバーからiTunes商品紹介を利用する(アニメーションGIF)
編集サイドバーからiTunes商品紹介を開いて商品を検索・貼り付ける手順

スマートフォンiOSアプリで利用するには

スマートフォンのブラウザから記事を編集するときには、記事編集画面の上にある iTunes商品紹介 アイコンをタップします。別ページに開く「iTunes商品紹介」で商品を検索・選択して、「選択したアイテムを貼り付け」を押してください。

iOSアプリでは、編集ツールバーiTunes貼り付け アイコンをタップすると、「iTunes商品紹介」画面が開きます。

iPadでiTunes商品紹介
iOSアプリでは編集ツールバーからiTunes商品紹介を開く(iPadの利用例)

iTunesアフィリエイトプログラムを利用するには

iTunesApp Storeの商品を紹介すると、閲覧ユーザーは商品リンクを介してiTunesApp Storeにアクセスし、実際に商品を購入することができます。このとき、売上金額に応じたコミッション(報酬)を受け取ることができるアフィリエイトプログラムを利用できます。

はてなブログiTunes商品紹介では、あらかじめiTunesアフィリエイトIDを設定しておくだけで、上記の手順で掲載された商品情報にアフィリエイトIDが自動で付加され、iTunesアフィリエイトプログラムを手軽に利用できます。

iTunesアフィリエイトプログラムを利用するには、まずAppleのサイトでアフィリエイトプログラムに参加します。このプログラム自体は、はてなが提供するものではありませんので、参加にあたってはAppleや提供会社の説明に従ってください。

アフィリエイトプログラムに参加できたら、発行されたアフィリエイトIDを、はてなブログに設定します。詳細設定画面を開いて「iTunesアフィリエイトID」欄に入力してください。それ以降に貼り付けられたiTunes商品は、自動的にアフィリエイトリンクになります。

iTunesアフィリエイトIDを設定
iTunesアフィリエイトプログラムにより発行されたIDを詳細設定に設定する

※【追記】この設定項目は、ダッシュボードの「アカウント設定」画面にあるアカウント設定ページに移動しています。ヘルプ「アカウント設定」を参照してください。

また、編集サイドバーのiTunes商品紹介を利用しないで、次に説明するembed記法で商品情報をリンクした場合にも、アフィリエイトIDは自動で付加されます。

なお、アフィリエイトリンクを直接記述した場合にはそちらが優先されるので、iTunesのリンクメーカーなどで作成したHTMLコードをそのまま貼ってご利用いただくことも可能です。

はてなブログアフィリエイトプログラムをご利用いただく上での注意点

http::embed記法について

はてな記法モードやMarkdownモードでiTunes商品紹介を利用すると、次のようなhttp:記法で商品情報が貼り付けられます。

[https://itunes.apple.com/jp/app/hatenaburogu/id583299321:embed]

これは、商品の個別URL(https://itunes.apple.com/jp/app/hatenaburogu/id583299321)の最後に、:embedを付加し、全体を[]で囲んだ〈はてな記法〉です。

紹介したい商品のURLがわかっている場合は、このhttp::embed記法を編集画面に直接記述しても、次のように商品リンクに展開されます。はてな記法モードやMarkdownモードだけでなく、見たままモードの「見たまま編集」にも記述できます。

http::embedは、リンク先のサイトに応じて適切な形でコンテンツを埋め込む記法で、iTunes商品紹介のほかYouTubeInstagram、Gistなどを貼り付ける際にも利用できます。

付記:iTunes商品紹介で検索できる商品の種類

iTunes商品紹介では、商品を検索するときに次のジャンルを選択できます。