めっちゃカンタン! オリジナルのPocketボタンを作成する方法

スポンサーリンク

レイアウト変更にともなって、新しく記事のヘッダーエリアに、Facebookへのシェアボタン、Twitterのツイートボタン、Google+への共有ボタン、はてなブックマークボタン、そしてあとで読むサービスのPocketボタンを設置しました。
今回はその中から、オリジナル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だけで実装していて、ちょっとした小技を使っているので、別途記事にしました。

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく