blog.hakozu.me

プラグインを使用せずに Send to Kindle ボタンの設置 [WordPress]

Amazon.com: Send to Kindle Button スクリーンショット

Amazon よりウェブサイト用の「Send to Kindle ボタン」が公開されました。
早速、問い合わせをいただきましたので、設置を試してみました。
WordPress 用にプラグインが用意されているのですが、試してみたところ、ウェブサイト上で生成をしてしまった方が手っ取り早かったので、こちらの方法をメモとして残します。

まず注意点ですが、現時点では Amazon.co.jp のアカウントでは Kindle に送信をすることができませんので、Amazon.com のアカウントが動作検証のために必要になります (まだ、用途が限られるということですね)
僕はこの 2 つのアカウントの統合は行っていないので、以前に使用をしていた iPhone 4 を英語環境にし、Kindle アプリにて確認をしています。

以下は、Amazon.com: Send to Kindle Button にて設定を行います。

ボタンスタイルの指定

「Choose your button style」にあるプルダウンメニューとチェックボックスより任意の項目を選択することで見た目の指定を行います。
この記事の下に表示をしていますが、以下の指定としています。

Text Kindle
Font Sans Serif
Icon Color Light
Icon Size Small
Theme Light
Border チェック

タイトル、作者、公開日時の指定

「How do you mark the title, author, and publication date on your pages ?」部分ですが、Facebook の Like Button や Like Box の設置をしていれば Open Graph protocol (OGP) の記述はあるかと思います。
このブログの場合も記述済みですので [Open Graph] を選択します。
ここで必要なものは以下の 3 つになります。

<meta property="og:title" content="<?php the_title(); ?> | <?php bloginfo('name'); ?>" />
<meta property="og:article:author" content="<?php the_author(); ?>" />
<meta property="og:article:published_time" content="<?php the_time(__('Y-m-d')) ?>" />

実際はもっと多くの OGP の記述がありますが、ここでは割愛をします。
気になる方は HTML をご覧ください。

表示をさせるコンテンツの指定

「How do you mark the main body of content on your pages ?」の部分になります。
このブログは Wpshower の「Blogum」というテーマを使用していますが、コンテンツ部分の CSS セレクタが「post_content」で、その中に記事のタイトルが含まれる構造となっており、うまく抽出をできませんでした。
構造の変更をする余裕がありませんので [Custom CSS Selectors] の使用は見送り [schema.org] に準じて Microdata のプロパティの記述をします。
この部分のみで気持ちが悪いのですが、いずれ対応をするということにしたいと思います。

記事であれば single.php、ページであれば page.php のコンテンツ表示部分を以下の様に「articleBody」の指定をすることにより抽出されます。

<div itemprop="articleBody"><?php the_content(); ?></div>

Kindle ストアで定期刊行物の販売をしているかの指定

「Do you sell a periodicals subscription on Kindle ?」の部分ですが、多くの方は当てはまらないと思いますので [No] にて問題は無いでしょう。

ウェブサイトへの設置と動作の確認

以上で設定は終了となりますので [Generate widget code] をクリックし、コードを取得します。
「Step 1」を footer.php にある </body> タグの直前に記述します。
「Step 2」は表示をさせたい任意の位置に記述します。ずらずらと style がありますので、カスタマイズも可能ですね。

以下が表示結果になります。
最初は左側の設定画面が表示されますが、次回からは右側の画面が直接、表示される様になります。
この右側の画面にて [Send] をクリックすることで指定の Kindle デバイス、またはアプリに送信されます。

Amazon.com: Send to Kindle スクリーンショット

受信をした Kindle アプリでの表示が以下になります。
CSS の問題かもしれませんが、表示にズレが見られます。
今後、当然の様に設置されるボタンになった場合は、Kindle での表示確認も検証項目に含まれるかもしれません。

Kindle アプリ スクリーンショット

後ほど読むためのクリップとしての用途が多いかとは思いますが、普段は Pocket を利用していますので、使い分けはどうなっていくでしょうか。
持ち歩いている Kindle は Paperwhite なので転送はしないでしょうが、Fire 等のタブレット端末とは相性の良いボタンかと思います。

関連しそうな商品

関連しそうな記事

コメント