めっちゃカンタン! オリジナルのPocketボタンを作成する方法
レイアウト変更にともなって、新しく記事のヘッダーエリアに、Facebookへのシェアボタン、Twitterのツイートボタン、Google+への共有ボタン、はてなブックマークボタン、そしてあとで読むサービスのPocketボタンを設置しました。
今回はその中から、オリジナルPocketボタンを設置する方法について紹介したいと思います。
Pocketボタンを含むオフィシャルの各シェアボタンは、全て記事を読み終わったあとに表示しているんですが、このPocketは性質上、読後に設置するボタンではなくて読む前に押されるよう設置すべきボタン。
元々、記事のタイトル下に各シェアボタンを設置していたんですが、体感的に読み込みが遅く感じられるので、記事下に移動させました。
そんな経緯もあり、記事のヘッダーエリアにもう一度復活させるに当たって、オフィシャルのボタンは使わず、オリジナルのボタンを設置することにしました。
FacebookやTwitterのボタンの設置方法はググるといっぱい出てきますが、Pocketの設置方法ってあんまりないなーと思ったのでまとめてみます。
基本的な構造としては以下のとおり。単純に<a>タグを使うだけです。
<a href="http://getpocket.com/edit?url=記事URL&title=記事タイトル" onclick="window.open(this.href, 'PCwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;">Pocketに保存</a>テキストではなく画像をリンクで囲むも良し、代わりにWebフォントを使うも良し。やり方はいろいろです。
ここではonclick属性を使ってポップアップするようになってますが、レスポンシブデザインでスマートフォン表示させるという場合は、普通にtarget="_blank"でもいいかなと思います。
CSSだけでボタンをデザインしたいという人は、以下の記事を参考にするといいんじゃないでしょうかね。
ちなみに、記事ヘッダーエリアに実装しているボタンは、ホバーするとツールチップが表示されるようになっていますが、これはCSSだけで実装していて、ちょっとした小技を使っているので、別途記事にしました。