アソシエイツリンクビルダーーーっ!!!!
2020年初頭、「公式プラグインなのにぶっつり稼働停止した魔の迷惑プラグイン」のお話でした!以上解散!
スマホからとてもきれいに映える点はGOOD
[amazon_link asins='4334075061,4063959376,B0756RY8FQ,4334776841' template='NEET-the-AAB' store='amenohabakiri-22' marketplace='JP' link_id='5b27f05a-be82-11e8-8eb6-e923204b1318']複数選択するとスライダーが出現
これはちょっとベンリかもマトメたいときなどに(※でもコレってJS使ってるんじゃないのかい)
アマゾンJS風のシンプル版も
アマゾンリンクビルダー?
アマゾンアソシエイトリンクビルダー?
とにかく中途半端に長い名称をもったアマゾンのビルダーさん(?)が尼リンクアフィリプラグイン戦線に名乗りを上げて早2年ということでございます。
「AmazonJSより公式プラグインだから安心かも」
みたいな需要をがっつし掴んでいそうでいないAmazonの公式プラグイン。
シェア的にいうと世間では「リンカー」でありますとか「WPアソシエイトポストR2」でありますとか優秀高機能なプラグインが出ている昨今ですからどうなることやらわかりませんがね。
まあつまりアソシエイトリンクを貼るのに有名な「AmazonJS」では「更新されてない」&「AMP対応できないだろう」ということで戦国時代が到来しているとか。
※アマビルの場合テンプレートを豊富に用意できるのが多少のメリットかね。あと公式というところ。デメリットは検索能力がそこまで高くない。公式なのに。
自分はめんどくさいので当分JSちゃんにお世話になるけれど(URL検索できるから自転車の細かい規格を紹介するのにいまだ便利)、眺めていると面白かったのでビルディングに勤しむ我らがAmazonの公式プラグをカスタマイズしてみた。
Amazonのリンクしか使わない。
(鬼の形相)
というスマートなアフィリエイトスタイルには、シンプルに使えて良いかもしれない。カスタマイズやコードの管理は一番ラクだと思うし。初心者にもすぐ扱えるだろう。
でも楽天市場のリンクもいれてみた。
ほんでヤフーショッピングのリンクもいれてみた。
いろいろ大丈夫なんだろうか?
※ただし楽天などのアフィリを真面目にやるつもりならリンカーやWPアソシエイトポストR2が無難。検索ワードを用いて商品が出せるので精度が違う。
(ヤフーは自前の検索エンジンを動かしていただけあってテキトーなワードでも何かしら紹介してくれるけど)
アソシエイツリンクビルダー
プラグイン・「アマゾンアソシエイトリンクビルダー」WordPress公式
公式説明・「WordPressプラグイン Amazon Link Builder の使い方」アソシエイト・HOW TO ガイド
アソシエイツリンクビルダーの使い方はサクッと
ご紹介くださるサイトさま
参考・「Amazon Associates Link BuilderでAmazonのアフィリエイト商品リンクを簡単作成!」まほろぐ さま
参考・「Amazon Associates Link Builder プラグインでアソシエイトリンクを出す」デフよん さま
参考・「【Simplicity】Amazon Associates Link Builderをカスタマイズしてみた」Tのジレンマ さま
参考・「コピペでOK!Amazon Link Builderを導入!AmazonJSっぽいデザインを作成した。」俺のデジモノ手記さま さま
参考・「WordPressでAmazon Associates Link Builder Amazonアフィリエイト公式プラグイン」auto-ts.net さま
カスタマイズ自体もお世話に
m(_ _)m
カンタン設定の流れ
プラグインをインストールして有効化
・そしてワードプレス画面左のメニューに出現する「Associates Link Builder」から各設定を開始する。
「Settings(セッティング)」で必要情報登録
・「国」と「トラッキングID」を登録。
・「アクセスキー」と「シークレットキー」を登録。
取得方法参考・「AmazonアソシエイトのアクセスキーIDとシークレットキー(シークレットアクセスキー)を取得する方法」WPアソシエイトポストR2 さま
※AmazonJS使ってるならワードプレス内のプラグインの設定画面で全て情報が載ってるからそれをコピペすれば良いね。
設定はカンタン過ぎですな。
m(_ _)m
テンプレートをカスタムして使う
まずデフォルトテンプレをコピペして土台に使う
「Templates(テンプレート)」から向かおう!
※やらなくてもよい 「ProductCarousel」なるデフォルトテーマから全てコピペや!
※「HTML」(コンテンツ×骨組み)と「CSS」(デザイン×ファッション)の2つがあるから全てコピペでどこかに移しておこう。メモ帳でもいいけど。コードをイジれるサイトがオススメ。
神サイト・「コードペンというサイトがオススメ(原文のページを表示させてから遊ぼう)」codepenn
キーボードの「ctrl」と「A」で全コピできるぞ
「Create new template(ニューテンプレ)」で新テーマ作成
※やらなくてもよい あとはさっき奪ったやつをコピペ
コレでカスタマイズの土台は整いました。
m(_ _)m
※というかこの記事でコピペするコードは全て書いてるのでデフォルトテーマから奪ってくる必要はなにもない
m(_ _)m
アソシエイトビルダーのデザインをカスタマイズ
HTMLとCSSの2つをコピペ
HTML
これをそのままコピペで「HTML」の部分に貼り付けよう。
ちょっと長くてごめん
※【バックアップは取ってからイジろう】…あとは好きにいじってもらってもよいが(説明文を付けてあるからそんなこんなで推察しつつトライ・アンド・エラーしつつ)、HTMLは間違えるとアソシエイトリンクが表示されない状況になる。(このプラグで挿入した全て)PHPのファンクションでミスってサイト全体が白くなるより全然マシな可愛いものだけど一応気をつけてください。いじる前にコピペしてバックアップし、復旧可能な状態でやろう。
CSS
これをそのままコピペで「CSS」の部分に貼り付けよう。
ちょっと長くてごめん
※【バックアップは取ってからイジろう】…あとは好きにいじってもらってもよいが(説明文を付けてあるからそんなこんなで推察しつつトライ・アンド・エラーしつつ)、CSSは間違えるとデザインが崩れる。PHPのファンクションでミスってサイト全体が白くなるより全然マシな可愛いものだけど一応気をつけてください。いじる前にコピペしてバックアップし、復旧可能な状態でやろう。
コピペが済んだらそのオリジナルテーマをデフォルトのテーマに設定しておこう。
※「Settings(セッティング)」の項目のところから
バックアップコピーもとって控えて保管しておきたい
※プラグインの更新でオリジナルテーマが消えちゃうみたいだし
カスタマイズ解説
あとは各種カラーなどをカスタマイズしよう(Amazonボタンと楽天ボタンのデザインなどなど)
色コード参考・「世界の伝統色の名前とカラーコードが一目でわかるWEB色見本」WEB色大辞典 さま
WEBアイコン参考・「【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう」サルワカ さま
※Amazonボタンと楽天ボタンはCSSの方の一番下にいれてあるので好きにイジろう
楽天やヤフーのリンクに自分のアフィリエイトIDを入れよう
楽天アフィID確認方法・「Posts tagged "アフィリエイトIDの確認方法"」楽天公式ブログ さま
ヤフーショッピングID確認参考・「Yahooショッピング用 pidとsidの取得方法」リンカー公式/おやこそだて さま
HTML側のコードにある楽天リンクの箇所の「自分のアフィリエイトID」という箇所に記載。ヤフーなら「自分のID(sid)」&「自分のID(pid)」という箇所にそれぞれ自分のIDを記載。
そうすれば多分イケる
※アマゾン側の商品名を楽天やヤフーで検索しているという状態なので完璧とは言い難いが(これはAmazonJSの救世主はじめ氏によってもたらされた技術を応用しているぞ感謝である)
ボタンが要らなければ
<!-- あまリンクボタン-->
<div class="amazon_button"><a href="{{DetailPageURL}}" title="{{Title}}" target="_blank" rel="nofollow"> Amazonレビューを見る </a> </div>
<!-- 楽天リンクボタン-->
<div class="rakuten_button"><a href="https://hb.afl.rakuten.co.jp/hgc/自分のアフィリエイトID/?pc=https://search.rakuten.co.jp/search/mall/{{Title}}/-/f.1-p.1-s.1-sf.0-st.A-v.2?x=0&scid=af_ich_link_urltxt&m=https://m.rakuten.co.jp/" target="_blank" rel="nofollow"> 楽天市場 </a></div>
HTML側の<!-- あまリンクボタン-->や<!-- 楽天リンクボタン-->の箇所を削除するなりコメントアウトするなりして無効化すればそれでOK。
ボタンのデザインはこんなところで一発変更
/* あまぞんぼたん */
.amazon_button a{
border: 1px solid #ffc132; /* 枠線 */
color: #ffc132; /* 文字色 */
background: #fff; /* 背景色 */
font-size: 14px; /* 文字サイズ */
padding: 7px 15px 5px; /* 各種余白関係↓ */
border-radius: 5px;
margin-top: 10px;
width: auto;
text-align: center;
display: block; /* 並び */
font-weight: bold; /* 文字太さ */
text-decoration:none; /* リンク線消し */
}
.amazon_button a:hover { /* マウスオンのとき */
border: 1px solid #ffc132; /* オン時-枠線 */
color: #fff; /* オン時-文字色 */
background: #ffc132; /* オン時-背景色 */
transition: 0.5s; /* マウスオーバー時の時間差 */
}
.amazon_button a:before {
content: "\f270"; /* 先頭につくWEBアイコン */
font-family: "fontawesome";
padding:10px 4px; /* 余白 */
font-size:14px; /* サイズ */
}
/* 楽天 */
.rakuten_button a {
border: 1px solid #c92424; /* 枠線 */
color: #c92424; /* 文字色 */
background: #fff; /* 背景色 */
font-size: 14px; /* 文字サイズ */
padding: 7px 15px 5px; /* 各種余白関係↓ */
border-radius: 5px;
margin-top: 10px;
width: auto;
text-align: center;
display: block; /* 並び */
font-weight: bold; /* 文字太さ */
text-decoration:none; /* リンク線消し */
}
.rakuten_button a:hover {
border: 1px solid #c92424; /* オン時-枠線 */
color: #fff; /* オン時-文字色 */
background: #c92424; /* オン時-背景色 */
transition: 0.5s; /* マウスオーバー時の時間差 */
}
.rakuten_button a:before {
content: "\f07a"; /* 先頭につくアイコン */
font-family: "fontawesome";
padding:10px 4px; /* 余白 */
font-size:14px; /* サイズ */
}
特にアイコンなどは「.amazon_button a:before {}」というような箇所を消せば消える。Amazonのマークは規約に反するとか文句言われることもあるみたいで。そうなったらここで一発消去可能なのでコントロールや管理がらくちんやで。
謎のタイトル文
このプラグだといきなり「なになにAmazon.CO.JP見参!!」みたいにそれもHタグで挿入されていたしかも2hである。アマゾンの商品がその記事の主体とでも言いたげな仕様。ここでは無難にdivタグにしといたけど、というか消しちゃったほうがスッキリするよ。一応フォントもカッコよくしてデザインのごとくしてみたけどさ。
謎のライン
その下にはコレまた謎のライン。一応消してあるけど(消えて無ければ消してもOK)、謎のタイトル分を出しておくなら合わせデザインとして残しても良いかも。CSSのほうでコメントアウトしてるのでその部分を消せば再出現だやったね。
メーカーなどの記載
デフォルトでは価格関係しか出現しないが、一応「任天堂」とか表記されるようにしている。でもCDなどのアーティストなどはなかなか表記されないね。ちゃんとした関数が設定できていないのだろうけどわからないのでしょうがない。公式に聞けば教えてくれるかも。
分かる人用(追加や削除できそうな情報のクラス?)
{{ASIN}}: the Amazon Standard Identification Number for the product
{{Title}}: the title or name of the item
{{DetailPageURL}}: the URL for linking back to Amazon
{{LargeImageURL}}: large image URL
{{MediumImageURL}}: medium image URL
{{SmallImageURL}}: small image URL
{{By}}: name of the author, artist or brand
{{CurrentPrice}}: it’s the current price. If the price is not available, a link to Amazon will be shown instead
{{CurrentPriceValue}}: the current price in raw format
{{StrikePrice}}: the manufacturer’s suggested price
{{StrikePriceValue}}: the strike price in raw format
{{Saving}}: the reduction in the strike price
{{SavingPercent}}: saving in percentage
{{SavingValue}}: saving in raw format
{{Prime}}: indicates if the item is eligible for Prime
{{Merchant}}: returns Amazon if the item is sold and shipped by Amazon. No value for marketplace merchants
{{MinimumPrice}}: minimum price for a new item
{{MinimumPriceValue}}: minimum price in raw format
{{InStock}}: indicates if the product is in stock.以下グーグル翻訳
{{ASIN}}:製品のAmazon標準識別番号
{{Title}}:アイテムのタイトルまたは名前
{{DetailPageURL}}:AmazonにリンクするためのURL
{{LargeImageURL}}:大きな画像のURL
{{MediumImageURL}}:中画像URL
{{SmallImageURL}}:小さな画像のURL
{{By}}:著者、アーティスト、ブランドの名前
{{CurrentPrice}}:現在の価格です。価格が利用できない場合は、代わりにAmazonへのリンクが表示されます
{{CurrentPriceValue}}:現在の価格をそのままの形式で返します
{{StrikePrice}}:メーカーの推奨価格
{{StrikePriceValue}}:未加工フォーマットのストライク価格
{{保存}}:ストライキ価格の引き下げ
{{SavingPercent}}:パーセンテージで保存する
{{SavingValue}}:元の形式で保存する
{{プライム}}:アイテムがプライムに適格かどうかを示します
{{Merchant}}:商品がAmazonで販売され出荷されている場合、Amazonを返します。マーケットプレイスの商人にとって価値がない
{{MinimumPrice}}:新しい商品の最低価格
{{MinimumPriceValue}}:ローフォーマットの最小価格
{{InStock}}:商品が在庫にあるかどうかを示します。
とりあえずこんなところでたのんます。
ガチに備忘録
アマゾンJSは「URL検索ができる」という点でいまだ有能である。