2019-12-20追記：(現時点)公式ページで当記事のコードを紹介していただきました！
2022-10-14追記：当記事のコードではエラーが出るページがあります。Cocoon公式のブックマークレットが最新になっておりますので公式サイトのブックマークレットをご利用ください！
Cocoonの楽天商品リンクショートコード作成用のブックマークレットが公式ページにて公開されているのですが、楽天Koboの電子書籍には未対応だったので対応版に改変して自分が使っている物を公開します。
※以下、Cocoon公式ページで紹介されているブックマークレット=公式ブックマークレットとします。
電子書籍対応版ブックマークレットを登録
See the Pen Cocoon用楽天ブックマークレット＋ by 草村 (@kusamura_mono) on CodePen.38847
ブックマークレットの登録方法
「楽天商品リンク作成」ボタンをブックマークバーにドラッグ&ドロップで登録できます。
エラーになる例
画像のようにクリックする(マウスボタンを離す)とエラーになります。
マウスボタンを離さずブックマークバーまで移動してから、マウスボタンを離してください。
ドラッグ＆ドロップで登録できない場合
Mac等一部の環境ではドラッグ＆ドロップで登録出来ない場合があるようです。
以下はWindows版Chromeの方法ですが、別のブラウザでも同様の手順で登録出来るかと思います。
- 「楽天商品リンク作成」ボタンを右クリックし「リンクのアドレスをコピー」※
- 設定＞ブックマーク＞ブックマークマネージャ(Ctrl+Shift+O)を開き、右クリック「新しいブックマークを追加」
※左側のフォルダ付近では別メニューが開くので、ページの右側で右クリック - コピーしたアドレスを「URL」欄に貼り付け、名前をつけて「保存」
楽天商品リンクのサンプル
このように電子書籍の商品リンクも楽天商品リンクショートコードで簡単に作成出来ます。
- 生成されたショートコード
-
[rakuten id="rakutenkobo-ebooks:18377752" kw="本当によくわかるWordPressの教科書 改訂2版 はじめての人も、挫折した人も、本格サイトが必ず作れる （本当によくわかる教科書） 電子書籍版 赤司 達彦"]
- 作成された楽天商品リンク
▼ 何気に楽天ブックスのダウンロード版も商品リンクに出来ます。
- 生成されたショートコード
-
[rakuten id="rdownload:17917635" kw=" Switch Nintendo Switch Online利用券（12ヶ月券） （ダウンロード版） ※1,000ポイントまでご利用可 Nintendo Switch"]
- 作成された楽天商品リンク
![[Switch] Nintendo Switch Online利用券（12ヶ月券） （ダウンロード版） ※1,000ポイントまでご利用可](https://thumbnail.image.rakuten.co.jp/@0_mall/rdownload/cabinet/thumbs/800000079/6/801951106_p.jpg?_ex=128x128)
ブックマークレットの使い方
作成したい商品のページでブックマークレットをクリックするとショートコードが生成されるのでコピーして記事に貼り付けてご利用ください。
- 作成したい商品のページで「ブックマークレット」をクリック
- 生成されたショートコードをコピーする
*エラーが出る場合:
ブックマークレットが使える#対応ページをご確認ください。 - コピーしたショートコードを記事に貼り付ける
- 投稿すると楽天商品リンクが生成されます。
![いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教える本格Webサイトの作り方【電子書籍】[ 石川栄和 ]](https://thumbnail.image.rakuten.co.jp/@0_mall/rakutenkobo-ebooks/cabinet/9925/2000007559925.jpg?_ex=128x128)
Cocoon公式ページにもっと詳しい使い方が掲載されているので、是非こちらを参考にしてください。
対応ページ
公式ブックマークレットで対応している個別ページに加え楽天Koboの電子書籍・楽天ブックスダウンロード個別ページでもショートコードが作成出来ます。
- 楽天市場商品個別ページ（item.rakuten.co.jp）
- 価格ナビ個別ページ（product.rakuten.co.jp）
- 楽天ブックス個別ページ（books.rakuten.co.jp/rb）
- 追加 楽天Kobo 電子書籍個別ページ（books.rakuten.co.jp/rk）
- 追加 楽天ブックス ダウンロード個別ページ（books.rakuten.co.jp/rd）
- 追加 楽天ビック商品個別ページ（biccamera.rakuten.co.jp/item）
公式ブックマークレットとの違い
楽天ブックス個別ページで作成されるショートコードが少し違います。
ただし、作成される商品リンクに差はありません。
no, shopで作成した商品リンク
![WordPressの達人が教える 本気でカッコよくする WordPressで人気ブログ 思い通りのブログにカスタマイズするプロの技43 [ 尾形義暁 ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/0641/9784800720641.jpg?_ex=128x128)
idで作成した商品リンク
ソースコード
javascript: (function () {
var url = location.href;
var host = location.host;
var item_code = null;
var shortcode = null;
var title = null;
if (host == 'item.rakuten.co.jp') {
var links = document.getElementsByTagName('link');
for (var i = 0; i < links.length; i++) {
var m = links[i].getAttribute('href').match(/item_code=(.+?)&/);
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')
}
}
shortcode = '[rakuten id="' + item_code + '" kw="' + title + '"]'
} 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()
}
}
}
shortcode = '[rakuten no="' + item_code + '" kw="' + title + '"]'
} else if (url.match(/(books\.rakuten\.co\.jp\/(rb|rk|rd)|biccamera\.rakuten\.co\.jp\/item)\//)) {
var elements = document.getElementsByClassName('susumeruArea');
var shop_code = null;
for (var i = 0; i < elements.length; i++) {
shop_code = elements[i].getAttribute('data-shop_url');
item_code = elements[i].getAttribute('data-item_id')
}
title = document.getElementById('productTitle') || document.getElementsByClassName('p-productDetail__title')[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);
更新履歴
2019-12-20: (電子書籍対応＋)楽天ビック対応
javascript: (function () {
var url = location.href;
var host = location.host;
var item_code = null;
var shortcode = null;
var title = null;
if (host == 'item.rakuten.co.jp') {
var links = document.getElementsByTagName('link');
for (var i = 0; i < links.length; i++) {
var m = links[i].getAttribute('href').match(/item_code=(.+?)&/);
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')
}
}
shortcode = '[rakuten id="' + item_code + '" kw="' + title + '"]'
} 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()
}
}
}
shortcode = '[rakuten no="' + item_code + '" kw="' + title + '"]'
} else if (url.match(/books\.rakuten\.co\.jp\/(rb|rk|rd)\//)) {
var elements = document.getElementsByClassName('susumeruArea');
var shop_code = null;
for (var i = 0; i < elements.length; i++) {
shop_code = elements[i].getAttribute('data-shop_url');
item_code = elements[i].getAttribute('data-item_id')
}
title = document.getElementById('productTitle').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);
さいごに
このブックマークレットは記事作成時点に使用可能であることを確認しています。
今後仕様変更で使えなくなる可能性もありますのでご了承下さい。
コードの原型はCocoon公式ページのブックマークレットです。ありがとうございます！
コメント
初めまして！
MACを使用していて、リンクが「Error:ブックマークレットのサポート範囲外のページです。」となってしまいます。 念のため、Androidのスマホで確認しましたが同様でした。
その為、ドラッグ＆ドロップはもちろんのことブックマークで新規登録しようとしてもダメでした。
もし良ければ対処法を教えて頂けませんか？
お忙しい中恐れ入りますがお返事よろしくお願いいたします。
ごえもんさん
はじめまして、こんにちは！
ブックマークレットをブックマークに登録できないと言う事でよろしいでしょうか？
どうやらMacだとブックマークレットの登録がうまく出来ない場合があるようですね。
Cocoon公式の楽天ブックマークレットのページにある「ドラッグ＆ドロップで登録できない場合」の方法でも登録できないでしょうか？
https://wp-cocoon.com/rakuten-link-bookmarklet/
一度ご確認くださいませ！
草村さんこんにちは!
私も上のごえもんさんのように、「Error:ブックマークレットのサポート範囲外のページです。」となり、ブックマークレットが使えません。。。
当方はWindows環境のChrome使用です。
cocoon公式サイトにあるように、「楽天商品リンク作成」のリンク先を自分のブックマークに登録しても動かないんです(T_T)
お忙しい中とは思いますが、何卒ご指南いただきたく存じますm(_ _)m
ごりんちょさん
こんにちは！確認した所、私の環境もWindows/Chromeですが利用出来るようです。
本日#ブックマークレットの登録方法に詳しい登録方法とエラーになる例や対処法を画像付きで追加したのでご確認いただけますでしょうか。
また、この通りに登録しても動かない・あるいは登録が出来ない場合、
以下の[1]～[3]について詳しく教えていただいてもよろしいでしょうか。
[1].「Error:ブックマークレットのサポート範囲外のページです。」となるのはどのタイミングでしょうか
(そもそもブックマークに登録が出来ないのか、楽天の商品ページでブックマークレットを使用するとエラーが出るのか知りたいです)
[2].「リンク先を自分のブックマークに登録しても動かない」の時は同じエラー（サポート範囲外～）が表示される状態ですか？
[3].「リンク先を自分のブックマークに登録しても動かない」の時の楽天の商品ページのURLを教えてください。
以上、お手数ですがよろしくお願いいたします。
草むらさんご返信ありがとうございます!
その後いろいろ試して見ましたら、できるようになりました!
ほんと初歩的な間違いをしていました^^;
もし同じようなことで困っている人のために、お恥ずかしながらわたしの間違いを記述させていただきます（笑）
【間違い①】
・楽天市場以外のサイトが表示されている状態のタブで、楽天ブックマークレットを使用した
【間違い②】
・楽天市場内の具体的な商品紹介以外のページ(マイページトップ等)で楽天ブックマークレットを使用した
以上です(｡>﹏<｡)
ほんとちょっと考えればわかることなのに、お恥ずかしい・・・
お騒がせしてすいませんでしたm(_ _)m
ブックマークレット使えるようになってよかったです！
使い方の説明にも#対応ページへの誘導リンクを追加しておきました。
初歩的…と思える事でも、使ってみないとわからない事ありますよね。
同じように使えなくて困ってる方がコメントを見てヒントになると思うので、具体的にご報告いただけて助かります(*^^*)
ごりんちょさんのおかげで記事内容の見直しが出来ました。
この度はコメントありがとうございました！
情報ありがとうございます。
こちらのブックマークレットを使用してもアフィリエイトの成果報酬につながるのでしょうか？
アフィリエイト初心者のため、質問させていただきました。
BBさん
こんにちは！
楽天商品リンクを介して商品が購入されたりすれば成果報酬につながるかと思います。
▼もっと詳しく言うと…
このブックマークレットは「楽天商品リンクショートコード」を簡単に作成するためのものです。
楽天商品リンクショートコードとは、ショートコードを記述するだけで楽天の商品リンクを作成できるというCocoonの独自機能です。
（※ショートコードとは[rakuten id=～～～]とかの文字列の事です）
ショートコードを使って楽天商品リンクを作成するには「管理画面＞Cocoon設定＞API」で認証キーやアフィリエイトID等の設定が必要です。
正しく設定されていてショートコードで楽天商品リンクが表示されているのであれば、専用のリンクが自動で設定されているので問題ないはずです。
詳しい設定方法については公式サイトにまとめられていますのでご確認くださいませ！
楽天商品リンクの初期設定方法と使い方
https://wp-cocoon.com/rakuten-link/
楽天商品リンクショートコードの使い方。サンプルつき。
https://wp-cocoon.com/rakuten-link-shortcode/