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

• Facebook
• X(旧:Twitter)
• はてブ
• LINE
• Pocket

昨日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が出ている状態でブックマークレットを押すとブログカードのコードがクリップボードにコピーされます。されるはずです。
　ではテストです。

パナソニック ドラム式洗濯乾燥機 10kg 液体洗剤・柔軟剤自動投入 左開き キューブル スマホで洗濯 フロストステンレス NA-VG2800L-S

232,319 円

Amazonで購入

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

• Facebook
• X(旧:Twitter)
• はてブ
• LINE
• Pocket