WordPressテーマ『Cocoon』で使用できる楽天商品リンク用のブックマークレットで、エラーが発生した場合の代替手段をメモした備忘録記事です。
楽天市場の商品詳細ページ（個別ページ）に複数の商品が掲載されている場合は、ブックーマークレットからコードを取得できなかったので、ソースコードから手動でコピペする方法を書き留めています。
エラーについて
楽天商品リンクのブックマークレットについては以下リンクを参照。
複数商品掲載ページでエラー
手軽に楽天商品のアフィリエイトリンクを作成できて便利なブックマークレット。
しかし、商品詳細ページ（個別ページ）に複数の商品がまとめて掲載されているページでは、アイテムIDを取得できないようでエラーが発生する。
対策：手動でコードを取得
紹介したい商品の「アイテムコード（商品ID）」をブックマークレットから取得できない場合は、商品詳細ページのソースコードから手動でコピーする方法も利用できる。
ちなみに、楽天側の仕様変更でソースコードに記述されるアイテムコードの位置や形式が変わることも考えられるので留意しておきたい。
2020年10月時点では、Cocoonの公式ページに記載されている「apprakuten:item_code」でソースコードを検索してもヒットしないのでちょっと注意（「item_code」では一応ヒットする）。
ということで、ソースコードからアイテムコードをコピペする手順に進みます。
ソースコードからのコピペ
手順は「対象の商品詳細ページのソースコードを表示」→「アイテムコードを検索＆コピー」→「ショートコードにペースト」。
ソースコードの表示
一般的なウェブブラウザだとソースコードを表示する方法はだいたい同じ。
対象の商品詳細ページにアクセスして下記を実行。
- Google Chrome / Firefox / Edge
- 「Ctrl+U」
- 「空白部分を右クリック」→「ページのソースを表示」
「itemid:」で検索
ソースコードを表示したら検索機能（ctrl+F/メニュー内にある検索）を使って以下のキーワードを探す（半角で）。
itemid:
「itemid」だけだと少しヒット数が増えて面倒なので、コロンを付け加えた「itemid:」を使う。
例えば、1つのページに2つの商品が掲載されている場合だと、以下のようなコードが見つかるはず。
アイテムコードはページの上部分に記載されている順に並んでいるので、紹介したい商品コードをコピーする。上記画像の場合だと「hirochin:10000098」の部分となる。
基本構文に組み込む
アイテムコードを取得できたら、あとはショートコードの基本構文に組むこむ。
基本構文
[rakuten id="ここにアイテムコード"]
作成例1
前述した例を組み込むと以下のようなコードになる。
[rakuten id="hirochin:10000098"]
作成例2
楽天以外のサイトで同様の商品を探せる「商品検索ボタン」を加えたい場合は「kw」を加える。
[rakuten id="hirochin:10000098" kw="生ピーナッツ ぞっこんイカ本舗"]
先日レビュー記事を書いた商品でもブックーマークレットが使えなくて手動でショートコードを記述しました。
各アイテムコードで実際に商品リンクを作成してみたところ、リンク先のURLなどの情報も正常に取得できているようでした。
