アプリのアフィリエイトリンクをきれいに表示させる方法をご紹介します。
↓例えば、こんな感じでアプリのアフィリエイトリンクを貼る方法です。
↓スマホから見るとこんな感じです。
バリューコマースの広告で「ebookjapan(イーブックジャパン)」をアフィリエイトする例を挙げますね。
アプリのアフィリエイトリンクをきれいに表示させる方法
アプリのアフィリエイトリンクをきれいに表示させる時に使っているのはアプリーチです。無料で使えるツールです。
iPhoneアプリ・Androidアプリを同時に表示してくれますし、スッキリきれいです。
アプリーチの使い方
今回は電子書籍サービス「ebookjapan(イーブックジャパン)」をアフィリエイトする時の使い方です。
私は「ebookjapan(イーブックジャパン)」のアフィリエイトにバリューコマース(ASP)の広告を利用しています。
バリューコマースのアフィリエイトリンクをアプリーチで使用する方法のご紹介です。
バリューコマースは、ebookjapanの他にも電子書籍サービス広告をたくさん扱っています。
ebookjapanは新規購入で2,717円の報酬になります。(※2020年5月現在)
ブログパーツ作成
アプリーチの TOPページを開きます。
少し下にスクロールすると「ブログパーツ作成」の項目があります。
「アプリ名」にebookjapanと入力し、「検索」ボタンをクリックします。
↓
※「複数検索」を押すと、似たような内容のアプリも検索結果に表れます。「検索」で目当てのアプリが見つからない時に利用するといいと思います。
出力イメージを確認
ここでブログパーツをどのように表示させるか選択できます。
ボタンを押して項目変更してみると、下の画像が微妙に変化します。自分好みの設定にするといいですよ。
よく分からないのは「target=”_blank”の付与」だと思います。私は「あり」にしています。
あり⇒リンク先を別ウィンドウ（タブ）で新しく開く
なし⇒表示されているページがそのままリンク先に変わる
アフィリエイトリンクの設定
赤枠部分にアフィリエイトリンクをコピペします。
アフィリエイトリンクの取得方法(バリューコマース)
他ASPのアフィリエイトリンクでも使用できますが、今回はバリューコマースを利用します。
バリューコマースログイン後のTOP画面の上にある検索窓に「ebookjapan」と入力検索します。
↓
「広告素材を選ぶ」をクリック
次の画面で、どの素材でもいいので「広告作成」をクリックします。
出てきた「広告タグ」の赤枠部分をコピーします。
この部分だけです。「”」はコピーしません。これに「https:」をつけてアプリーチの赤枠部分に入力します。
「コピーする」をクリックしてブログで表示させたい部分貼り付けます。(テキストモードで貼り付けます)
「旧コード」⇒カスタマイズできない
特にカスタマイズしなくてもいい場合は、「旧コード」だけブログに貼ればいいです。
カスタマイズしたい場合は、新コードをブログに貼って、以下のCSS(※)をWordPressの「追加CSS」に貼り付けます
WordPressの管理画面左のメニューから「外観」⇒「カスタマイズ」をクリック。「追加CSS」をクリックしてそこに貼り付けてください。
↓(※)以下のCSSはこれです。アプリーチ公式サイトのものです。
.appreach {
text-align: left;
padding: 10px;
border: 1px solid #7C7C7C;
overflow: hidden;
}
.appreach:after {
content: "";
display: block;
clear: both;
}
.appreach p {
margin: 0;
}
.appreach a:after {
display: none;
}
.appreach__icon {
float: left;
border-radius: 10%;
overflow: hidden;
margin: 0 3% 0 0 !important;
width: 25% !important;
height: auto !important;
max-width: 120px !important;
}
.appreach__detail {
display: inline-block;
font-size: 20px;
line-height: 1.5;
width: 72%;
max-width: 72%;
}
.appreach__detail:after {
content: "";
display: block;
clear: both;
}
.appreach__name {
font-size: 16px;
line-height: 1.5em !important;
max-height: 3em;
overflow: hidden;
}
.appreach__info {
font-size: 12px !important;
}
.appreach__developper, .appreach__price {
margin-right: 0.5em;
}
.appreach__posted a {
margin-left: 0.5em;
}
.appreach__links {
float: left;
height: 40px;
margin-top: 8px;
white-space: nowrap;
}
.appreach__aslink img {
margin-right: 10px;
height: 40px;
width: 135px;
}
.appreach__gplink img {
height: 40px;
width: 134.5px;
}
.appreach__star {
position: relative;
font-size: 14px !important;
height: 1.5em;
width: 5em;
}
.appreach__star__base {
position: absolute;
color: #737373;
}
.appreach__star__evaluate {
position: absolute;
color: #ffc107;
overflow: hidden;
white-space: nowrap;
}ブログにコードを貼ったら、リンクをクリックしてちゃんとリンク先に移動するか確認してくださいね。
以上で完了です。おつかれさまでした(*^-^*)
