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

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

楽天商品リンクの初期設定方法と使い方

楽天商品リンク機能を利用するには、事前準備が必要です。特に、「楽天アプリケーションID」と「楽天アフィリエイトID」は必須となります。加えて、楽天商品の商品番号の取得方法の紹介です。

wp-cocoon.com

2025.06.23

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

楽天商品リンクショートコードの使い方。サンプルつき。

楽天商品リンクを作成するためのショートコードの使い方を詳しく解説しています。オプションを利用することで、様々な表現を行うことが可能です。

wp-cocoon.com

2024.09.14

ただショートコードを作成するには、楽天の商品IDもしくは、プロダクト番号等を調べる必要があり、結構面倒くさいです。

そこで、クリック一発で「楽天商品リンクショートコード」を作成できるブックマークレットを作成しました。

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

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

以下の手順でブックマークレットを追加してください。

1. Chromeで新しいブックマークを作成する
2. 右クリックメニューから後で掲載されているコードをコピーする
3. URL部分にコピーしたものをペーストする

ブックマークレッドコードはこちらです。

javascript: (function() {
  var url = location.href;
  var host = location.host;
  var item_code = null;
  var shortcode = null;
  var title = null;
  var purchase_type = null;
  if(host == 'item.rakuten.co.jp') {
    if (document.querySelector('tr[irc="ItemPriceNormalSubscription"]')) {
      purchase_type = 1;
    }
    var scripts = document.getElementsByTagName('script');
    for(var i = 0; i < scripts.length; i++) {
        var script = scripts[i].innerHTML;
        if (script) {
          var m = script.match(/itemid:\['(.+?)'\],/);
          if(m) {
            item_code = m[1];
          }
        }
    }
    var metas = document.getElementsByTagName('meta');
    for(var i = 0; i < metas.length; i++) {
      if(metas[i].getAttribute('name') == 'twitter:title') {
        title = metas[i].getAttribute('content').replace(/\r?\n|[\[\]]/g, '');
      }
    }
    var purchase_type_code = '';
    if (purchase_type) {
      purchase_type_code = ' purchase_type="1"';
    }
    shortcode = '[rakuten id="' + item_code + '" kw="' + title + '"' + purchase_type_code + ']'
  } else if(host == 'product.rakuten.co.jp') {
    var elements = document.getElementsByClassName('topProduct__specsInfo');
    var code_no = null;
    for(var i = 0; i < elements.length; i++) {
      code_no = elements[i].innerText.trim();
      if(code_no.match(/(EAN|JAN|ISBN|UPC)/)) {
        item_code = code_no.replace(/[A-Z]+?: /, '');
        break;
      }
    }
    var elements = document.getElementsByClassName('topProduct__title');
    for(var i = 0; i < elements.length; i++) {
      var spans = elements[i].getElementsByTagName('span');
      for(var j = 0; j < spans.length; j++) {
        if(spans[j].getAttribute('itemprop') == 'name') {
          title = spans[j].innerText.trim().replace(/\r?\n|[\[\]]/g, '');
        }
      }
    }
    shortcode = '[rakuten no="' + item_code + '" kw="' + title + '"]'
  } else if(url.match(/(books\.rakuten\.co\.jp\/(rb|rk|rd)|(biccamera|brandavenue)\.rakuten\.co\.jp\/item)\//)) {
    var element_shop_code = document.getElementById('ratShopUrl');
    shop_code = element_shop_code.getAttribute('value');
    var element_item_code = document.getElementById('ratItemId');
    item_code = element_item_code.getAttribute('value');
    item_code = item_code.split('/')[1];
    title = document.getElementById('productTitle') || document.getElementsByClassName('p-productDetail__title')[0] || document.getElementsByClassName('item-name')[0];
    title = (title ? title.innerText : '').trim().replace(/\r?\n|[\[\]]/g, '');
    shortcode = '[rakuten id="' + shop_code + ':' + item_code + '" kw="' + title + '"]'
  } else {
    alert('Error:ブックマークレットのサポート範囲外のページです。')
  }
  if(shortcode) {
    if(item_code) {
        if(shortcode = prompt('コピーしてください。', shortcode)) {
        var r = document.createRange();
        var text = document.createTextNode(shortcode);
        r.selectNode(document.body.appendChild(text));
        window.getSelection().addRange(r);
        document.execCommand('copy');
        text.remove();
      }
    } else alert('Error:コードが見つかりませんでした。')
  }
})();
void(0);

v1.0.5　2025年10月23日更新

上記コードでうまくいかない場合は、以下のページのコードで試してみてください。

cocoon/js/rakuten-bookmarklet.js at master · xserver-inc/cocoon

100％GPLの無料WordPressテーマです。開発中の開発バージョンです。安定版をダウンロードする場合は、Cocoon配布サイトからダウンロードしてください。 - xserver-inc/cocoon

github.com

ブックマークレットが使える楽天ページ

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

以下の商品個別ページなどでのみ利用できるようになっています。

• 楽天市場商品個別ページ（item.rakuten.co.jp）
• 楽天ブックス個別ページ（books.rakuten.co.jp/rb）
• 楽天Kobo 電子書籍個別ページ（books.rakuten.co.jp/rk）草村氏版で追加
• 楽天ブックス ダウンロード個別ページ（books.rakuten.co.jp/rd）草村氏版で追加
• 楽天ビック商品個別ページ（biccamera.rakuten.co.jp/item）草村氏版で追加
• 楽天ファッション個別ページ（brandavenue.rakuten.co.jp）New

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

楽天Koboと楽天ブックスのダウンロード個別ページ、楽天ビックの対応は草村さんが編集してくださいました。

草村さんのページはこちら。

【電子書籍対応】Cocoon楽天商品リンクブックマークレット

2019-12-20追記：(現時点)公式ページで当記事のコードを紹介していただきました！2022-10-14追記：当記事のコードではエラーが出るページがあります。Cocoon公式のブックマークレットが最新になっておりますので公式サイトのブッ...

web.monogusa-note.com

楽天市場商品個別ページ

ブックマークレットは、楽天市場の個別商品ページで利用できます。

まずは楽天市場から商品を検索します。

例えば、以下のルンバの商品ページを例にします。

商品ページを開いた状態で、ブックマークレットをクリックします。

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

例えば、こんな感じのショートコードが作成されます。

[rakuten id="ryouhinhyakka:10093141" kw="ルンバ"]

これを、WordPressのエディターに貼り付けると

以下のように表示されます。

楽天ブックス個別ページ

ブックマークレットは、楽天ブックスでも使用可能です。

これも使い方は同じで、楽天ブックスで商品を検索します。

検索結果から商品ページを開きます。

この個別ページ上で、ブックマークレットをクリックします。

するとこんな感じのダイアログが表示されるのでショートコードをコピーしてください。

ショートコードはこんな感じ。

[rakuten id="book:17464691" kw="オーバーロード"]

実際の商品リンクはこんな感じ。

オーバーロード　（1） （角川コミックス・エース） [ 深山　フギン ]

楽天ブックス

Amazon

楽天市場

Yahoo!ショッピング

メルカリ

DMM

まとめ

こんな感じで、ブックマークレットを利用すれば「楽天商品リンク」のショートコードをクリック一発で作成できるようになります。

楽天市場の「商品ID（アイテムコード）」「商品番号」は、調べるのが結構面倒くさいので、ブックマークレットをご活用ください。

また、価格ナビ個別ページでブックマークレットを利用すれば、報酬パフォーマンスの高い運用もしやすくなると思うので、よろしければ試してみてください。