早速ブログに Send to Kindle ボタンを導入してみたのだが・・・

スポンサード リンク

先ほど、TechCrunchでこんな記事を発見。

http://jp.techcrunch.com/2013/03/20/20130319amazon-launches-send-to-kindle-button-for-web-developers-wordpress-blogs/
Amazonが[Send to Kindle](コンテンツをKindleへ送る)ボタンをローンチ

ということで早速試してみた。

がしかし!残念な状況であった。まとめると、

  • 設置は、OGP設定しつつFacebookボタンを導入するよりもちょっとだけ難しい
  • 肝心のボタンが日本のAmazonのKindleアカウントにはまだ未対応であった(涙)
  • 日本Amazonの対応待ってる!

設置方法

Amazon.com: Send to Kindle Button のページで以下の内容を設定して、ブログのテンプレートに設置します。

1.ボタンのスタイルを決める

私はこんな設定にしました。
ボタン内のテキストは、"Send to Kindle"。
フォントは、Verdana。
アイコンの色は、Dark。デフォルトはLightの白でしたが、やっぱり黒のがKindleっぽいね。

2.記事タイトル、著者、発行日を指定

これらの情報の収集元を、Open Graph/scheme.org/hNewsの3種類のマークアップから選べます。ページのHTML内にどういうマークアップで、タイトル/著者情報/発行日を書いておくかってことですね。

わたしは、schema.orgにしました。詳細は次項。

3.本文箇所を指定

こちらは、scheme.org/hNews/Custom CSSの3種類のマークアップから選べます。ページのマークアップがscheme.org形式にも、hNews形式にもなっていない場合、または記事が複数ページにまたがる場合には、Custom CSSで指定可能だそうです。

こちらもわたしは、schema.orgの形式で指定。ざっくり言うと、itempropというアトリビュートを使って、そのタグのコンテンツは何を表しているかを指定する形式です。

Kindleで利用する部分だけ抜き出すと、こんなマークアップになります。


<h1 itemprop="name">Kindles are Fantastic</h1>
<h2>By <span itemprop="author">Johannes Gutenberg</span></h2>
<h2><span itemprop="datePublished">2007-11-19</span></h2>
<div itemprop="articleBody">
  <p>I am of the humble opinion the Kindle is the best e-reader available.</p>
</div>

詳細は、Getting Started - schema.org の公式情報をご参照くださいませ。

MTのRainierというテンプレートは、最初からこのscheme.orgの形式のマークアップがされていたので、とっても楽ちんでした。 :)

セマンティックなマークアップになっていないブログテンプレートの場合は、ここらへんの調整が一番のハードルなんじゃないかなあと思います。

4.Kindleで定期購読マガジンを発行している人用

お次の設定は、Kindleで定期購読のマガジンを発行している人向けの設定ですが、そんなのないので割愛。ちなみにココを設定しておくとKindleボタンを押した方に、購読をおすすめしてくれるみたいです。

5.コードをブログテンプレに設置

左の黄色いボタンでGENERATEするとコードが発行されます。

STEP1の方のJSのコードは、ご自身のブログテンプレートのbodyタグ直前に設置。
STEP2のdivタグはボタンを表示したいところに設置すれば完成。

おまたせしました、実際のボタンはこちら

Send to Kindle

ちなみに記事タイトル直下にも入ってます。

さてこのボタンを押すとですね!なんと!おどろき!

・・・

と言いたいところですが、私のPaperwhiteもiPhoneも日本AmazonのKindleアカウントとして連携していないので、サポートデバイスがないと言われてしまいました・・・。残念。日本Amazonの対応、待ってる!!

スポンサード リンク