Devil！Daredevil！-dev challenge-〜魔王のハック、あるいは失敗日記〜

ブックマークレットを使ってAmazonの商品カードをWordPressに作るテスト

昨日Amazonの商品をブックマークレットを使ってブログカードっぽく商品カードをHTMLで貼れる方法を見つけ出したので、ちょっと自分好みに整形してちゃんと動くかどうかのテストをします。
　ちなみに作成されたHTMLはWordPressなら「カスタムHTMLブロック」を作ってその中に貼り付ければ動くので、WordPressでも使えるというポイントがあります。
　まず使うコードはこちら。ブックマークレットに登録するのでJavaScriptを圧縮してあります。

javascript:(function(){const name=document.getElementById("productTitle").textContent.trim();const shortlinkEl=document.getElementById("amzn-ss-text-shortlink-textarea");let link;if(shortlinkEl){link=shortlinkEl.value}
if(!link){alert("アソシエイトツールバーから「リンク生成 > テキスト」をクリックしてポップオーバーを表示してください");return}
const imgTagWrapper=document.getElementById("imgTagWrapperId");const imgTag=imgTagWrapper.getElementsByTagName("img")[0];const thumbnailSrc=imgTag.getAttribute("src");const priceEl=document.getElementById("apex_offerDisplay_desktop");const priceHtmlCollection=priceEl.getElementsByClassName("a-price-whole");const price=priceHtmlCollection[0].textContent;const el=document.createElement("textarea");el.textContent=`
<div style="border: 1px solid #aaa; padding: 10px; overflow: hidden;">
  <a href="${link}" target="_blank" rel="noreferrer noopener nofollow" style="text-decoration: none; color: inherit;">
    <img src="${thumbnailSrc}" alt="${name}" style="width: 200px; float: right; margin-left: 10px; margin-bottom: 5px;" />
    <div style="font-size: 14px; color: #333;">${name}</div>
    <div style="font-size: 14px; color: #000; font-weight: bold; margin-top: 4px;">${price} 円</div>
    <div style="display: inline-block; background: #fdaf17; color: #111; padding: 6px 12px; margin-top: 8px; border-radius: 8px;">
      Amazonで購入
    </div>
  </a>
</div>`;document.body.appendChild(el);el.select();document.execCommand("copy");el.remove()})()

これをブックマークに登録し、Amazonの商品ページのツールバーから「リンク作成」を開いて短縮URLが出ている状態でブックマークレットを押すとブログカードのコードがクリップボードにコピーされます。されるはずです。
　ではテストです。

さて、どうでしょうか……？
　ばっちりできていますね！これで「ブログカード形式の商品紹介リンクでないと見栄えが悪いからWordPressでAmazonアソシエイト使うのは難しいんだよね……」という問題が解消します！

この記事を書いた人 Wrote this article

如月 翔也 テック信奉者 / 男性

　テック関係でいろいろ試したり、テック関連の雑談をしたり、テック関連について幅広くやっています。成功方法だけでなく失敗についても何をやってなぜダメだったのかまで共有するので、あとを継ぐ人の礎になれれば幸いです。

著者記事一覧

関連記事 Related articles