アフィリエイターのためにアフィリエイトリンクなどのURLを美しくする見せるためのリンクメーカーを作りました。これであなたのアフィリエイトリンクはクリック率50%アップです。（嘘

• どうも、フリーランスエンジニアの notty です

先日外部ページを美しくシェアするための Embed HTML という誰でも綺麗に埋め込みパーツが作成できるオンラインツールを作成したのですが、アフィリエイターの方々がより便利に使えるように、アフィリエイト特化型のリンクメーカーを作成しました。
これを使えば、誰でも綺麗なアフィリエイトリンクが作れますが、専用のCSSを追記する事前準備の作業が必要です。
事前準備についてはこちらの記事をご覧ください。

Embed HTML は単純にニュースサイトなどの記事を美しくシェアしたいとき用、リンクメーカーはアフィリエイトリンクを美しくシェアしたいとき用といった感じで使い分けれるといいかと思います。

【リンクメーカー】綺麗なアフィリエイトリンクの作り方

どこよりも美しいリンクメーカー

リンクメーカー：https://woinc.jp/tool/link-maker/

どこよりも美しいリンクメーカーの使い方

それでは、簡単んに使い方を説明します。
基本的にはリンクメーカーなので、URLがあればだいたい機能します。存在しないURLなどはもちろん機能しません。

URLを入力してボタンを押すだけ！

ページ真ん中にある入力フォームにURLを入力します。
※URLには http:// とか https:// のホスト情報も必ず入力してください。

あとはリンク生成ボタンを押すだけ。
APIがいい具合に処理してくれるので、処理を待ちましょう。

美しいリンクの生成に成功！

情報の取得に成功すると、ページ下部に美しいリンクの生成情報が表示されます。

情報の取得は、WEB実装で標準機能のOGPを取得しているので、ある程度ちゃんと実装されているページなら処理に成功します。
※※例外として、FacebookやTwitterなどのSPA技術を用いられて作られているサイトは取得できなかったです。

生成リンクを編集

URLから取得した情報を編集したい場合は各項目ごとに編集できます。また、編集内容はリアルタイムでプレビュー確認できです。
美しいリンクメーカーの場合、生成リンクの編集機能がパワーアップしています。
以下、編集可能項目と説明です。

どこよりも美しいリンクメーカーの応用編

リンクメーカーはアフィリエイト特化型の埋め込みパーツ作成ツールです。
今回は、大手ASPとしてもっともおすすめの a8.net のアフィリエイトリンクを例に紹介します。
まずは a8.net の管理画面より提携中プログラムから、アイフィリエイトリンクを取得しましょう。
今回は、DMM FX証券のアフィリエイト案件にしました。
URLはなんでもいいんですが、今回はこのURLを使うことにしました。

<a href="https://px.a8.net/svt/ejp?a8mat=35HMAY+G4HP4Y+1WP2+6HU7L" rel="nofollow">
<img border="0" width="120" height="120" alt="" src="https://www29.a8.net/svt/bgt?aid=190618666975&wid=003&eno=01&mid=s00000008903001091000&mc=1"></a>
<img border="0" width="1" height="1" src="https://www19.a8.net/0.gif?a8mat=35HMAY+G4HP4Y+1WP2+6HU7L" alt="">

この埋め込みコードから リンクのURLを抜き出します。僕の場合は https://px.a8.net/svt/ejp?a8mat=35HMAY+G4HP4Y+1WP2+6HU7L でした。
このURLをフォームに入力すると、自動的にDMMの公式サイトの情報が取得されます。

しかし、うまいこと画像が取得できなかったようです。
画像が取得できなかった場合、リンクメーカー画面にて、サムネイル画像のチェックボックスにチェックを入れると、画像編集フォームが出現します。
画像のURLを取得しましょう。

画像のURLは、先ほどのa8net管理画面で取得したタグのimgタグに入っています。
この埋め込みコードから リンクのURLを抜き出します。僕の場合は https://www29.a8.net/svt/bgt?aid=190618666975&wid=003&eno=01&mid=s00000008903001091000&mc=1 でした。
画像URLを入力すると、このように即時で画像付きの掲載リンクプレビュー画面が表示されます。

いい感じです。
画像は複数のアスペクト比が選べるので、適切な画像アスペクト比を選びましょう。問題なければ、「埋め込みコードをコピー！」ボタンを押して埋め込みタグを取得します。

取得したコードがこちら。

<p class="embed-html-box-inner">
<div class="embed-html-box"><a href="https://px.a8.net/svt/ejp?a8mat=35HMAY+G4HP4Y+1WP2+6HU7L" target="_blank" rel="noopener nofollow"><span class="embed-html-box_image"><img src="https://cdn.mixh.jp/cache/thumbnail-1x1.svg" style="background-image: url(https://www29.a8.net/svt/bgt?aid=190618666975&wid=003&eno=01&mid=s00000008903001091000&mc=1);"></span><span class="embed-html-box_meta"><span class="embed-html-box_title"><q>FX取引をはじめるならDMMがお得！FX/CFD取引のDMM.com証券</q></span><span class="embed-html-box_description"><q> FX取引をはじめるならDMMがお得！ ドル円スプレッド原則固定0.3銭はもちろん全通貨FX業界最狭水準のスプレッド縮小に挑戦中！口座開設キャンペーンでキャッシュバック！好評の取引応援ポイントサービスで貯めて、現金化！</q></span></span></a></p></div>

これをワードプレスなどのHTMLタグが書けるブログにペーストしたら完了です。
完成したのがこちら。

完成したアフィリエイトリンク

ほかのリンクボタン生成例

まとめ

僕が開発したどこよりも美しいリンクメーカーがあれば、味気ないアフィリエイトリンクも思わずクリックしたくなるようなアフィリエイトリンクボタンに簡単に変身します。
ぜひたくさんのアフィリエイターの方に使ってもらえたら嬉しいです。
こういったツールが欲しい！とか、Web系のエンジニアならすぐにサクッと作れます！プログラミングで世の中をもっと便利にしていきましょう♩

人気