Amazon商品リンクブックマークレットの使い方

Amazon商品リンク
この記事は約6分で読めます。

Cocoonには、Amazonの商品を紹介するための機能が用意されています。

Amazon商品リンクの初期設定方法と使い方
Cocoonの「Amazon商品リンクタグ作成ショートコード」機能の使い方を詳しく解説しています。

商品リンクを作成するには、ショートコードを利用する必要があります。

Amazon商品リンクショートコードの使い方。サンプル付き
Amazon商品リンク作成ショートコードの使い方を、出来る限り優しく説明しています。便利なオプションもあるので、欲しい見た目をある程度手に入れることができます。

ただショートコードを作成するには、AmazonのASIN(商品ID)を商品ページ内から取得して記入する必要があります。

そんな手間を少しても軽減すべく、クリック一発で「Amazon商品リンクショートコード」を作成できるブックマークレットをnaenote.netを運営されているNAEさんが作成されました。

CocoonのAmazon商品リンクショートコードをボタン一発で作成するブックマークレットを作った
CocoonのAmazon商品紹介用ショートコードを自動作成するブックマークレットを作りました。カエレバやヨメレバのかわりにCocoonの機能を使う人は便利かと思います。

以下では、使い方を説明したいと思います。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

ブックマークレットの登録方法

まずはブラウザにブックマークレットを登録します。

ブックマークレットを登録するには、以下の「Amazon商品リンク紹介」と書かれたリンクボタンをブラウザのブックマークにドラッグ&ドロップするなどして登録してください。

ブックマークレットコード本文

こんな感じ。

Amazon商品リンクショートコードをブックマークに登録

登録は、これだけです。

ブラウザのVivaldiでは、ブラウザの仕様上ドラッグ&ドロップではブックマークレットを登録できません。Vivaldiでブックマークレットを登録するには、ブックマークの編集から直接ブックマークレットコード本文を入力してください。
Vivaldiのbookmarklet編集ダイアログ
上記のブックマークレットはNAEさん作成のブックマークレットに、「対象範囲を表すエラーメッセージ」と「ダイアログを閉じたあとにページにとどまる処理」等を加えたものです。そのコードをより登録しやすいようにCodePenにてドラッグ&ドロップで登録できるようにしたものです。
上記ブックマークレットの不具合については当サイトのフォーラムにお願いします。というのも、僕がコードを編集したものなので不具合の原因が僕にある可能性が高いです。NAEさんにご迷惑をかけないためにもよろしくお願いいたします。

タイトル・説明文つきのブックマークレット

「titleとdescオプションつきのブックマークレットも作成して欲しい」という要望があったので作成しました。

ブックマークレットコード本文

利用方法はほぼ同じです。ショートコードを取得後、タイトルと説明文を変更してご利用ください。

こんな感じのショートコードを作成します。

[amazon asin="B00F4KOK5M" kw="ベンザブロックLプラス" title="ベンザブロック(タイトルを自前で入力)" desc="説明文を入力してください"]

表示例はこちら。

Amazonボタンのみのブックマークレット

「Amazon商品のみ紹介用のも作成して欲しい」という要望があったので作成しました。

ブックマークレットコード本文

以下のように、楽天ボタンとYahoo!ショッピングボタンが非表示のショートコードが生成されます。

[amazon asin="B07GN4TLLQ" kw="Echo Show " rakuten=0 yahoo=0]

表示例はこちら。

ブックマークレットの使い方

ブックマークレットの使い方は簡単で、まずはAmazonで商品を検索します。

Amazonの検索バー

検索結果が表示されたら、紹介したい商品ページを開きます。

表示したい商品ページを開く

すると以下のような個別ページが表示されると思います。

Echo Spot (エコースポット) - スマートスピーカー with Alexa、ブラック

このページで登録したブックマークレットをクリックします。

Amazon商品リンクブックマークレットをクリック

すると以下のようなダイアログが表示されるのでショートコードをコピーします。

Amazon商品リンクブックマークレットダイアログ

あとは取得したショートコードをWordPressエディターに貼り付けるだけで利用できます。

WordPressエディターにAmazonショートコードを貼り付ける

kw(キーワード)については、検索したい商品がヒットするように変更してください。

作成したショートコードを貼り付けるとこんな感じになります。

ショートコード機能の詳細

今回作成したブックマークレットは、Amazon関係の全てのページで使えるわけではありません。

以下のドメイン個別ページで利用できるようになっています。

  • Amazon商品個別ページ(www.amazon.co.jp)

基本的に、上記の個別ページのみで利用できます。

基本的に、Amazonの個別物販(サービス)個別ページ、以外のトップ・検索・キャンペーンページでは利用できません。

どのようなショートコードが作成されるか

Amazon個別ページで作成されるショートコードの詳細についてはこちらを参照してください。

Amazon商品リンクの初期設定方法と使い方
Cocoonの「Amazon商品リンクタグ作成ショートコード」機能の使い方を詳しく解説しています。

ブックマークレットでは利用されていない、詳細なショートコードオプションについてはこちら。

Amazon商品リンクショートコードの使い方。サンプル付き
Amazon商品リンク作成ショートコードの使い方を、出来る限り優しく説明しています。便利なオプションもあるので、欲しい見た目をある程度手に入れることができます。

まとめ

NAEさん作成のブックマークレットのおかげで、より手軽に「Amazon商品リンクショートコード」を利用できるようになりました。

このをブックマークレットのおかげで、Amazonで商品などを閲覧していて、

これは良い商品!

と思ったときに、1秒で「紹介用のショートコード」を作成できるようになりました。

なので、

商品紹介用のタグを作成するのが面倒なんだよな…

商品タグをテキストエディターで見るとタグが長すぎて編集の邪魔になってしまう…

ということはなくなるかと思います。

本家のブックマークレットはこちら。

CocoonのAmazon商品リンクショートコードをボタン一発で作成するブックマークレットを作った
CocoonのAmazon商品紹介用ショートコードを自動作成するブックマークレットを作りました。カエレバやヨメレバのかわりにCocoonの機能を使う人は便利かと思います。
タイトルとURLをコピーしました
'); /* ヘッダーの高さの変化分、paddingで調整しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': `${threashold}px`, }); /* トップメニュータイプに変更する */ $("#header-container-in").removeClass('hlt-center-logo hlt-center-logo-top-menu').addClass("hlt-top-menu wrap"); $("#header-container").addClass("fixed-header"); $("#header-container").css({ 'position': 'fixed', 'top': '-100px', 'left': '0', 'width': '100%', }); const wpadminbar = document.getElementById('wpadminbar'); const headerContainerTop = wpadminbar ? wpadminbar.clientHeight : 0; $('#header-container').animate( { top: headerContainerTop, }, 500 ); } } /*固定ヘッダーの解除*/ function staticHeader() { if ($("#header-container").hasClass("fixed-header")) { /*センターロゴタイプに戻す*/ $("#header-container-in").removeClass("hlt-top-menu hlt-tm-right hlt-tm-small hlt-tm-small wrap").addClass(" hlt-center-logo"); $("#header-container").removeClass("fixed-header"); $("#header-container").css({ 'position': 'static', 'top': 'auto', 'left': 'auto', 'width': 'auto', }); /* ヘッダーの高さの戻る分、padding削除しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': '0', }); $("#header-fixed").remove(); } } /* 境界値をヘッダーコンテナに設定 */ var threashold = $('#header-container').height(); var prevScrollTop = -1; var $window = $(window); var mobileWidth = 1023; $window.scroll(function() { var scrollTop = $window.scrollTop(); var s1 = (prevScrollTop > threashold); var s2 = (scrollTop > threashold); var w = $window.width(); /*スクロールエリアの位置調整*/ function adjustScrollArea(selector) { if ($(selector) && $(selector).offset()) { offset = $(selector).offset().top; h = $("#header-container").height(); pt = $(selector).css('padding-top'); if (pt) { pt = pt.replace('px', ''); } else { pt = 0; } if ((scrollTop >= offset - h) && (w > mobileWidth)) { if ((pt <= 1) && $("#header-container").hasClass('fixed-header')) { $(selector).css({ 'padding-top': h + 'px', }); } } else { if (pt > 0) { $(selector).css({ 'padding-top': 0, }); } } } } /*スクロール追従エリアの調整*/ function adjustScrollAreas() { adjustScrollArea('#sidebar-scroll'); adjustScrollArea('#main-scroll'); } /*固定ヘッダーのスタイル決め*/ function adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth) { if (s1 ^ s2) { if (s2 && (w > mobileWidth)) { stickyHeader(); } } /* 境界値に達したら固定化 */ if (scrollTop <= threashold || w <= mobileWidth) { staticHeader(); } } adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth); adjustScrollAreas(); prevScrollTop = scrollTop; }); /*ウインドウがリサイズされたら発動*/ $window.resize(function () { /*ウインドウの幅を変数に格納*/ var w = $window.width(); if (w <= mobileWidth) { /*モバイル端末の場合*/ staticHeader(); } else { /*パソコン端末の場合*/ var scrollTop = $window.scrollTop(); if (scrollTop >= 50) { stickyHeader(); } } }); })(jQuery);