「あとで読む」をタイトル周りに置くと便利じゃないのかな

「あとで読む」サービス使ってますか?
私は元々、はてぶで「あとで読む」タグをつけておいて、あとで読もう!と思ってたのですが、結局「あとで読む」タグの中身は見ることなく肥大化していくばかりでした。
iPhoneを活用するようになってからは、「Instapaper」を使うようになりキチンとあとで読むようになりました。
他には「あとで読む」や「Read It Later」などの「あとで読む」に特化したサービスがあります。

ブログの記事を読むときにタイトルってかなり重要ですよね。
パッとタイトル見て「あっ、これ読んでみようかな。でも時間がない」って時に「あとで読む」サービスのボタンがあると便利だなと思い、実装の仕方を調べてみました。
ここではiPhone・Androidアプリなどもあり、よく使われているであろう「Instapaper」と「Read It Later」の実装の仕方を説明しようと思います。

まずは「Read It Later」から。
こちらはかなり単純です。

<a href="https://readitlaterlist.com/save?url=記事のURL&title=記事のタイトル">Read Later</a>

このようにアンカータグのhref属性に記述してやれば、「Read It Later」の入力画面へ遷移し自動でURLとtitleが入力されます。

WordPressなら

<a href="https://readitlaterlist.com/save?url=<?php the_permalink(); ?>&title=;<?php the_title(); ?>">Read It Later</a>

でいけますね。

次に「Instapaper」ですが、こちらは少し厄介です。
まず、「Instapaper」にはブックマークレットがあるのですが、これにはアカウントごとに異なるキーが発行されます。

function iprl5(){
  var d= document;
  var z= d.createElement('scr'+'ipt');
  (省略)
  z.setAttribute('src',l.protocol+'//www.instapaper.com/j/個別のキー?u='+encodeURIComponent(l.href)+'&amp;t='+(new%20Date().getTime()));
  (省略)

なので、単純にブックマークレットをコピペして貼るだけでは、キーが違うため保存されません。
Instapaper API Documentation」を読んだら、どうやら保存させるにはユーザー名とパスワードが必要みたいですが、それだとブックマークレットを使ったほうが早いよって話ですね。

「Read It Later」のように入力画面へ遷移し自動でURLとtitleが入力されないのか?と試行錯誤したら何とかできました。

<a href="javascript:href="javascript:window.location='http://www.instapaper.com/edit?url='+encodeURIComponent(記事のURL)+'&title='+encodeURIComponent(記事のタイトル);">Instapaper</a>

基本的には「Read It Later」と同じですが、記事のURLと記事のタイトルはエンコードする必要があります。PHPは無知なのでjavascriptでやってますけど、Wordpressだとこう書きます。

<a href="javascript:href="javascript:window.location='http://www.instapaper.com/edit?url='+encodeURIComponent('<?php the_permalink() ?> ')+'&title='+encodeURIComponent('<?php the_title(); ?> ');">Instapaper</a>

そんなわけで、当サイトに「Read It Later」と「Instapaper」のボタンを追加しましたので、ご利用の方はポチポチとあとで読んでください。(ご利用には「Read It Later」か「Instapaper」のアカウントが必要です。)

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ