PVアクセスランキング にほんブログ村

アプリのリンク付きボタンの埋め込み方【はてなブログ】

オススメのアプリを紹介したいんだけど、アプリのリンクボタンってどうやって埋め込むの?

という疑問を解決いたします。

 

旅先の情報にしても、ブログのカスタマイズにしても、今ではググれば何でもすぐに解決できてしまう便利な時代になりましたよね。 

でも、それが少し逸れて違う情報にたどり着いてしまうと、どうやっても解決できないんですよね…最終的に迷走して放置…みたいな。

 

私にとってこのアプリのリンクボタンがまさにそんな感じで、迷走したまま放置しておりました。

それは何故か…WordPressの人向けのリンクボタン作成方法をずっと試していたからです。そう、私のブログは「はてなブログ」でした。 

 

結論:アプリのリンクボタンは、ツールを使用して一瞬で作成・埋め込み可能

 

この記事では、アプリのリンクボタンの作成・埋め込み方法を解説いたします。
 

f:id:lifeishappy_right:20201018104739j:plain

「アプリーチ」というツールを使用する

このツールは、iPhoneやAndroidアプリを紹介する下記のようなブログバーツを瞬時に作成する事ができるツールです。
 
はてなブログ
はてなブログ
開発元:株式会社はてな
無料
posted withアプリーチ
 
 
MEMO

アフィリエイトリンクに差し替えて使用・収益化することも可能です。(後述)

 

「アプリーチ」使用方法

 
POINT
✔ ブログバーツの作成(旧コード・新コード)
✔ コードのコピー
✔ ブログへの埋め込み

 

ブログバーツの作成

アプリーチ」のサイトに進んでください。
ブログで紹介したい「アプリ名」を入れて「検索」をクリックすると、iPhoneとAndroidのアプリバーツが表示されます。

f:id:lifeishappy_right:20201017202642p:plain

 

検索で表示されたアプリが紹介したいアプリと相違していた場合、「複数検索」をクリックすると、入力したアプリ名を含んだアプリがいくつか表示されます。

f:id:lifeishappy_right:20201017203735p:plain

 

この中から紹介したいアプリを選択して出力イメージの確認及び変更を行います。

f:id:lifeishappy_right:20201017210932p:plain

 

各項目のオススメ設定
  • ✔ 表示リンク:両方
  • ✔ タイトル:iPhone
  • ✔ アイコン画像:iPhone
  • ✔ 開発元:非表示
  • ✔ 価格:iPhone
  • ✔ target="_blank"の付与:あり

 基本的にデフォルトで問題ありませんが、「開発元」は好みで表示・非表示を選択してください。

なお、「target="blank"の付与」はリンクをクリックした際に新規タブを開くかどうかになります。ここも好みで選択してください。

出力イメージができたら、下にスクロールしてコードをコピーします。

コードには「新コード」と「旧コード」があり、新コードは自分でカスタマイズできるタイプになり、旧コードはコピーしたコードを埋め込むだけでブログバーツが埋め込まれるようになっています。

MEMO

旧コードであれば貼付けだけなので簡単です。

簡単な旧コードから解説していきます。

 

旧コード使用の場合

f:id:lifeishappy_right:20201017211845p:plain

「旧コード」を選択して「コピーする」をクリックします。

その後ブログ編集画面で「HTML編集」を選択して記事に貼り付けてください。

貼付けが完了して「プレビュー」を確認すると、

はてなブログ
はてなブログ
無料
posted withアプリーチ
ちなみに私が以前アプリを紹介した記事に使用しています:旅好き女子がオススメする、旅を記憶・記録してくれるアプリ3選
 
新コード使用の場合

f:id:lifeishappy_right:20201017213039p:plain

まずコードコピーの前に「こちらのCSS」をクリックしてください。

f:id:lifeishappy_right:20201017213311p:plain

 
この画面でCSSをコピーして、ブログにCSSを設定します。
< ダッシュボード → デザイン → カスタマイズ → {}デザインCSS >
なお、色々と個人でカスタマイズをされている方もいらっしゃいますので、得意な方はこのCSSから様々なカスタマイズをしてみてください。
※実は私、これで新コードを試してみたのですが…上手くできなかったんです。そこで勝手にはてなブログでは新コードは使えないんじゃないか?とも思ったんですが、新コードで使用されている方もいらっしゃるようなので、カスタマイズしたい方は試してみてください。
CSSを設定したら、ブログバーツのコードをコピーする画面に戻ってコピーをしてブログ編集画面の「HTML編集」にして貼り付けてください。
「プレビュー」を確認すると、

   f:id:lifeishappy_right:20201017214139p:plain

このように枠の付いたブログバーツになります。

デフォルトのCSSだと枠があるかないかだけの違いのようですので、カスタマイズが苦手な方は「旧コード」をオススメします。

 

「アプリーチ」でアフィリエイト

アプリ紹介のブログで、アプリーチを使用してアフィリエイトもできます。

ブログで紹介したアプリをどなたかがダウンロードすると報酬が支払われる仕組みになっています。

アフィリエイトって何?という方は、是非こちらをご覧ください:初心者向け:アフィリエイトとはから始める最初の一歩

 

アプリ案件を取り扱いのASPは主にゲーム系が多いのかな…という印象です。

私は上記ASPは登録がないので、バリューコマースで作成してみました。

アプリ案件を扱っているASPであれば、コード生成しなくてもiPhone用・Android用とコードが用意されているようです。

気が向いたらASP登録して追記します。

 

アフィリエイトリンク作成

f:id:lifeishappy_right:20201017224547p:plain

赤枠にアプリ用のアフィリエイトリンクを入力します。

多くのアフィリエイターの方が使用されているA8.netでアプリ案件を探しましたが、全く見付からず、バリューコマースで一つだけ見つけたので、それで試してみました。

 

f:id:lifeishappy_right:20201018093746p:plain

ある会社のインストール促進で、これはiosに対応のタイプになります。

「広告作成」をクリックするとリンクコードが生成されますので、そのコードをコピーしてアプリーチの「iPhoneリンク」部分に貼り付けます。

f:id:lifeishappy_right:20201018094430p:plain

 

Android用の場合は「Androidリンク」に貼り付けてください。

ここまできたら、あとはブログ編集画面の「HTML編集」で貼付けして埋め込み完了になります。

私自身がアプリをアフィリエイトに使用するほど多用しているわけでもなく、なかなか自分が紹介したいアプリをASPから探すのも大変なので、あまり使用しないのかな…とは思いますが、念のためASP経由でアプリを紹介して収益を上げることも可能になっています。

 

まとめ

2年近く前にオススメアプリを紹介したくてブログバーツの作成を試みたんですが、WordPress専用?の作成方法を一生懸命はてなブログでやった挙句、上手くいかなくて途中で放置してました。
本当に、情報過多の時代ってどの情報を得るかによって結果が大きく違うと言うことをブログ運営で再認識しました(笑)
是非オススメアプリの記事を作成する際は使用してみてください。
この記事が少しでも誰かのお役に立てれば嬉しいです♡