Rinker(リンカー)プラグインは前々から注目していましたが、私もようやく重い腰を上げてブログに導入することにしました。
今まではカエレバをメインに使っていたので、今後はRinkerと上手く併用できればいいかなと思っています。
Rinkerの制作者は、フリーランスプログラマの「やよいさん(@oyayoi19)」で、なんと無料で提供して下さってます！
そこでRinkerを導入するなら、記事にして少しでもお力添えできればと思い、魂を込めて書き上げました。
ここでは、Rinkerプラグインをインストールするところから、WordPressで必要な設定を行う方法、実際に商品リンクを掲載するまでの内容をまとめています。
最後の方にはCSSカスタマイズも載せていますので、よければ参考にされてみて下さい。
Rinker(リンカー)導入にあたって必要になるもの
RinkerプラグインをWordPressブログに導入するためには、いくつか必要になるものがあります。
- AmazonアソシエイトのアクセスキーID
- Amazonアソシエイトのシークレットキー
- pixiv ID(プラグインインストール時に必要)
「Amazonアソシエイト」のアクセスキーIDとシークレットキーは、アカウントを作成しないと取得することができません。
Amazonアソシエイトは誰でもすぐ登録できるわけではなく、審査に通過できた方しか利用できないサービスです。
pixiv IDはすぐに取得できるので、今お持ちでなくても特に問題はありません。
私も持っていない状態でRinker導入を始めましたし、この記事内でもpixiv IDの取得方法を解説しているので安心して下さい。
問題はAmazonアソシエイトの登録ですが、私の場合はアカウント作成手続きから１日で審査通過メールが届きました。
Amazonアソシエイト・プログラムにお申し込みいただき、誠にありがとうございます。当プログラムへの参加のお申し込みを正式に確認させていただきましたので、お知らせいたします。今すぐAmazon.co.jpへのリンク作成を開始いただけます。
あなたのアソシエイトIDは○○です。このIDは各アソシエイトメンバーを識別するために重要なものですので、必ず保管をお願いします。アソシエイト・プログラムへお問い合わせされる際にも、このIDを添えてご連絡ください。
Amazonアソシエイトのアカウントをお持ちでない方は、まず作成手続きから始めていきましょう。
Amazon・楽天・Yahoo!ショッピングのIDも必須
Rinkerは物販系アフィリエイトの収益化をアシストしてくれる商品リンク管理プラグインです。
なので、Amazon・楽天・Yahoo!ショッピングそれぞれの紹介IDが必須。
Amazonなら「Amazonアソシエイト」で紹介、楽天なら「楽天アフィリエイト」で紹介できます。
ただ、私は両方ともほとんど使っていません。
というのも、「もしもアフィリエイト」なら両方とも紹介できて、報酬もまとめて受け取れるのでこっちをメインに利用していますね。
報酬は1,000円から振り込まれますし、住信SBIネット銀行なら１円からでも振込OKとハードルが低いんです。
もしもアフィリエイトではYahoo!ショッピングにも対応しているので、すべてこの１つで紹介することも可能ですよ。
ただ、Yahoo!ショッピングの紹介料は0.77％なので、おすすめとしては１％が貰える「バリューコマース」になりますね。
私もYahoo!に関してはこちらを利用しています。
Amazonアソシエイトと楽天アフィリエイトは「本家」のサービスではありますが、優先的に利用するほどのメリットはないかと思います。
なので、もしもアフィリエイトで紹介できないような状況になり、どうしても他を利用するしかないという場合の保険として私は考えていますね。
Rinker(リンカー)プラグインを導入する方法
それではRinkerプラグインをWordPressブログに導入する方法をご紹介していきます。
できる限り細かく画像を使って解説しているので、初心者の方でも参考になるかと思います。
①：公式サイトからプラグインをインストールする
まずはやよいさんのRinkerプラグイン公式ページにアクセスしましょう。
▼こちらからアクセスできます▼
公式ページに移動したら、Rinkerベーシックの『無料ダウンロード』をクリックします。
次にpixiv IDでログインする画面が表示されます。
もしpixivアカウントをまだお持ちでない方は、『pixiv IDを作ってログイン』をクリックします。
ここからはpixivアカウントを新規作成(無料)の手順を解説するので、すでにアカウントをお持ちの方は「③の項目へ移動」して下さい。
②：pixiv ID(アカウント)を作成する
pixivのアカウント作成画面が開くので、登録する「メールアドレス」「パスワード」を入力して『次へ』をクリックします。
SNSのアカウントをお持ちの方は、それを使って登録することも可能です。
ここではイチから作成するために、SNSアカウントは利用しない方法で進めていきますね。
続いて、任意のニックネームの入力と性別・誕生日を選択して「私はロボットではありません」にチェックし、『登録』をクリックしましょう。
そうすると、登録メールアドレスに「pixiv ID」が記載されたメールが届くので、以下のURLをクリックしてID認証を行って下さい。
これでpixivアカウントの作成およびログインも完了となるので、「Rinkerプラグイン」のページに戻って無料ダウンロードをクリックしましょう。
そうするとPCへ自動的にダウンロードされます。
③：プラグインをWordPressブログへアップロード＆有効化
Rinkerプラグインをダウンロードできたら、「zipファイル(圧縮形式)」のままWordPressのプラグインへアップロードします。
このときに上記画像の左側のように解凍されてしまった場合は、マウスの右クリックから再圧縮(zip形式)を行って下さい。
ちなみにWindowsの方であれば、ファイルを「右クリック」⇒「送る」⇒「圧縮（zip形式）フォルダー」で圧縮できます。
Rinkerプラグインのzipファイルをアップロードするには、WordPressの管理画面左メニューの「プラグイン」⇒「新規追加」に移動します。
そして画面上部にある「プラグインのアップロード」から、Rinkerのzipファイルを選択して『今すぐインストール』をクリックします。
最後にアップロードしたRinkerプラグインを「有効化」しましょう。
これでRinkerをWordPressブログに導入できました。
Rinker(リンカー)プラグインの設定方法
ここからはRinkerを実際に利用するための設定を進めていきます。
途中でASPからアフィリエイトIDの取得を行いますが、ここでは「もしもアフィリエイト」「バリューコマース」経由で進めていきますね。
①：AmazonのアクセスキーIDとシークレットキーを取得する
まずはAmazonアソシエイトにサインイン(ログイン)して管理画面を開き、上部メニューの「ツール」⇒「Product Advertising API」に進みます。
Product Advertising APIとは、Amazonの商品情報を自動的に取得したり、ID付きURLで紹介するのに必要なものです。
次の画面でAPIの利用を開始するために『利用をはじめる』をクリックします。
これでAmazonアソシエイトの「アクセスキー」と「シークレットキー」を取得することができます。
この２つのキーはセキュリティ上、取得時のみしか確認することができません。
なので、認証情報をダウンロードして保管・管理しておくことをおすすめします。
WordPressの管理画面に戻って、左メニューの「設定」⇒「Rinker設定」に進むと、AmazonのAPIに関する項目があります。
ここに先程取得した「アクセスキー」と「シークレットキー」をコピー＆ペーストして下さい。
②：Amazon・楽天のアフィリエイトIDを取得(もしも経由)
続いて「もしもアフィリエイト」経由でAmazon・楽天の商品を紹介するために、それぞれのIDを取得します。
もしもアフィリエイトにログインしたら、提携中プロモーションの「Amazon.co.jp 商品購入」の「広告リンク取得」をクリックしてソースを確認します。
ソース内の「a_id=」に続く数字の部分が、自分のアフィリエイトIDになります。
これと同じ手順で「楽天市場 商品購入」のプロモーションから、楽天のアフィリエイトIDも取得できます。
それぞれで取得したアフィリエイトIDは、Rinker設定内の「もしもアフィリエイト設定」でコピー＆ペーストして下さい。
RinkerはAmazonアソシエイトIDと楽天アフィリエイトIDも登録可能です。
「もしもリンク優先ショップ」にチェックしたショップは、もしもアフィリエイトIDを優先させて紹介することができます。
なお、もしもアフィでもYahoo!を紹介できますが、紹介料が0.77％とバリューコマースより低いことに注意しましょう。
③：Yahoo!ショッピングのアフィリエイトIDを取得(バリューコマース経由)
Yahoo!ショッピングの紹介は、「バリューコマース」のアフィリエイトIDを利用して行います。
まずバリューコマースにログイン後、上部メニューの「広告管理/ツール」⇒「LinkSwitch」⇒「LinkSwitchの設定」の順に進みましょう。
次に画面下部に表示された『LinkSwitchを利用開始する』をクリックします。
そうするとコードが表示されるので、以下の赤枠で囲った部分をすべてコピーします。
あとはRinker設定内の「Yahooショッピング（バリューコマース）設定」にペーストすれば完了です。
ここまで完了したら、Rinker設定の下部にある「変更を保存」をクリックしましょう。
商品リンクのクリック数を分析したい方は
Rinkerプラグインでは解析ツールの「Googleアナリティクス」を使って、商品リンクがどれくらいクリックされたか、ということを分析することもできます。
分析の仕方がよくわからないという方も多いと思いますが、とりあえず設定しておいて損はありません。
分析を行いたい場合は、「Rinker設定」内の下部にある「Google Analytics トラッキング」項目にチェックするだけです。
設定変更したら保存も忘れずに！
Googleアナリティクスでクリック数を分析する場合は、管理画面左メニューの「行動」⇒「イベント」⇒「ページ」から確認できます。
クリックされやすい商品や記事ページなどがわかるようになるので、収益化改善に役立てていきましょう。
Rinker(リンカー)を使ってブログに商品リンクを貼ろう
これでWordPressブログにRinkerプラグインの導入・設定がすべて終わりました。
ということで、さっそくAmazon・楽天・Yahoo!ショッピングの商品をブログで紹介してみましょう。
まず記事の投稿画面に移動すると、エディタ上部に『商品リンク追加』の項目が増えているので、これをクリックしましょう。
そうすると検索画面がポップアップするので、好きな商品名を入力して検索します。
Amazonからの商品検索だけでなく、楽天市場からの商品検索もできるようになっていますよ。
すると対象商品が一覧表示されるので、掲載したい商品の『商品リンクを追加』をクリックします。
そうすると、投稿ページ内に商品リンクのショートコードが追加されます。
記事を作成している画面ではこのショートコードしか表示されませんが、プレビューで確認するとしっかり商品リンクで表示されます。
「価格の表示/非表示」はRinker設定から簡単に切り替えることができます。
また、URLの飛び先を「検索画面 or 商品詳細画面」で選択することも可能です。
ただ、このままだと商品タイトルが長すぎるのと、スマホ表示のときにバランスも悪いので、もう少しスッキリとした表示でレスポンシブにカスタマイズしたいと思います。
Rinker(リンカー)の商品リンクをカスタマイズ
Amazon・楽天・Yahoo!ショッピングの収益性を高めるためにも、できるだけクリックされやすいデザインにカスタマイズしたいところ。
そこで私は以下の３点を変更してみました。
- 商品タイトルの変更
- ショップリンクを「～で探す」に変更
- PC・スマホ別にデザインを変更
これを行った結果、デフォルトのデザインからだいぶ良くなったんじゃないかと思います。
こんな感じでそれぞれ表示できるようにカスタマイズしてみました。
私が行ったRinkerのカスタマイズ方法もご紹介しておきますね。
商品タイトルを変更する方法
商品タイトルを変更するには「商品リンク追加」から、「登録済み商品リンクから検索」⇒「リンク編集」の順に進みます。
一度記事に追加した商品リンクは、登録済みの項目へ追加されていくので、再度追加したい場合などはスムーズに掲載することができます。
また、WordPressのメニューにある「商品リンク」からカテゴリーを設定して、ジャンル分けすることも可能です。
そうすると「商品リンク設定」画面が開くので、商品タイトルを変更したら右上にある『更新』をクリックします。
これで商品リンクのタイトルが変更されているはずです。
なお、この設定ページでは他にも「自由ボタンの追加」や、URLを削除することで「ショップボタンの非表示」も行うことが可能ですよ。
ショップリンクを「～で探す」に変更する方法
Amazon・楽天・Yahoo!ショッピングのリンクに記載された内容は、手軽に変更することも可能です。
これはカエレバでも簡単にできることですが、Rinkerの場合はショートコード内に以下のコードを追加するだけです。
変更前のコード
［itemlink post_id=”○○○”］
変更後のコード
［itemlink post_id=”○○○” alabel=Amazonで探す rlabel=楽天市場で探す ylabel=Yahoo!ショッピングで探す］
※［］は大文字に変換しています。
「～で探す」でなくても、「～で見る」や「～で検索」なども自由に変更できます。
なお、「Rinkerへのご支援とカスタマイズ方法」のnoteでは、Rinkerボタンの文言を一括で変更する方法や、クレジット削除方法などもご紹介されています。
functions.phpで編集を行うことになりますが、Rinkerがより使いやすくなるので、一度確認されてみて下さいね。
▼一括変更＆クレジット削除も可能▼
PC・スマホ別にデザインを変更する方法
最後にRinkerの商品リンクをCSSカスタマイズした方法をご紹介します。
さすがにイチからコードを作成するのは難しいので、以下の２名様の記事を参考にさせて頂きました。
お二方ともWordPressテーマがSANGOだったので、少し苦労するところもありましたが、以下のCSSでJINにも導入することができました。
/* Rinkerカスタマイズ */
div.yyi-rinker-contents {/*商品リンク*/
background-color: #ffffe0;/*全体の背景色*/
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);/*枠の影*/
}
.yyi-rinker-title a {/*商品タイトル*/
font-size: 16px;/*文字サイズ*/
color: #42424290 !important;/*文字色*/
font-weight: bold;/*文字を太字*/
}
div.yyi-rinker-contents div.yyi-rinker-image {/*商品画像*/
margin-left: -12px;/*左側余白*/
margin-right: -3px;/*右側余白*/
}
div.yyi-rinker-contents ul.yyi-rinker-links {/*ショップボタン全体*/
width: 110%;/*ボタンの横幅*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {/*ボタン詳細*/
font-size: 16px;/*文字サイズ*/
font-weight: 500;/*文字の太さ調整*/
padding: 2px 6px 34px 6px;/*ボタン上下左右の内側余白*/
box-shadow: 0 3px 14px rgba(0, 0, 0, .25);/*ボタンの影*/
}
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {/*商品情報全体*/
width: 100%;/*横の広さ*/
}
div.yyi-rinker-contents div.yyi-rinker-detail {/*提供元・価格情報*/
padding-left: 6px;/*左側の余白*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {/*Amazonボタン*/
background: #9acd32;/*背景色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {/*楽天ボタン*/
background: #fa8072;/*背景色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a{/*Yahoo!ボタン*/
background: #cc9933;/*背景色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {/*Yahoo!ボタン*/
margin-bottom: 2px;/*下側の余白*/
}
@media screen and (max-width: 500px){/*スマホ用*/
div.yyi-rinker-contents div.yyi-rinker-box {/*商品リンク*/
display: block;/*縦並び*/
}
div.yyi-rinker-contents div.yyi-rinker-title p {/*商品タイトル*/
text-align: left;/*左寄せで表示*/
margin: 5px -20px 0px 10px;/*上下左右の余白*/
}
div.yyi-rinker-contents div.yyi-rinker-image {/*商品画像*/
width: auto;/*中央寄せ*/
}
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {/*提供元・価格情報・ボタン*/
width: 91%;/*ボタンの横幅*/
text-align: center;/*中央寄せ*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li {/*ボタン*/
margin: .4em 0;/*上下の余白と左右の余白*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {/*ボタン詳細*/
font-size: 13px;/*文字サイズ*/
}
}ちなみにこちらが完成した実際の商品リンクになります。
元々はカエレバをメインに使っていたので、Rinkerも近いデザインに寄せています。
カスタマイズを行う場合は子テーマの「style.css」を利用するのが基本です。
ただ、変更デザインの確認を行う手間や表示崩れなどが起こる可能性があるので、バックアップやFTPでリカバリーできる環境を整えておきましょう。
まずはリアルタイムプレビューで確認できる「追加CSS」を利用するのが安全でおすすめです。
Rinker(リンカー)プラグインの導入･設定方法まとめ
私は「もしもアフィリエイト」のカエレバやヨメレバに慣れていたので、「Rinkerも良さそうだけどちょっと面倒だな…」と内心は感じていました。
Amazonアソシエイトにも登録する必要があったり、イチから設定しないといけなかったり、ずっと後回しにしていたのが正直なところ。
ですが、利用している方の評判通りで使いやすいし、時短にもなるしリンクコードもスッキリするし、ほんともっと早くから利用しておけばよかった…
それと久しぶりにCSSで本格的にカスタマイズして思ったことは、疲れるけど時間を忘れて没頭してしまうほどに面白い！笑
デザインによってクリック数も大きく違ってきますし、それだけに力も入りますからね。
WordPressブログで物販系アフィリエイトを始めるなら、Rinkerプラグインは必需品と言えるものです。
Amazon・楽天・Yahoo!ショッピングとすべて対応していて、もしもアフィリエイト経由なら振込手数料も負担してくれてお得です。
Yahoo!ショッピングは「バリューコマース」の方が紹介料が高くなっていますよ。
Rinkerとも簡単に連携できるので、合わせて活用されてみて下さいね。
▼こちらも合わせてどうぞ▼
