Stinger3 に Pocket ボタンを設置しました

公開日: : 最終更新日:2014/02/05 ブログ , ,

「あとで読む」系のサービスのひとつである Pocket
ボクも Pocket を使っていまして、通勤電車の中で貯めてある記事を読んで情報収集に努めています。

このブログにも Pocket のボタンを設置してみました。

例によって、Stinger3 が提供しているテーマファイルを直接修正してボタンを設置しました。

icatch-pocket

目次

1. このブログの Stinger3 のバージョン

このブログに使っている Stinger3 のバージョンは “ver20131217″ です。

Stinger3 のダウンロードは次のページから行えます。

2. Pocket ボタン用の HTML を作成する

Pocket のサイトで登録ボタン用の HTML を作成することができます。
サイトは英語ですが全然難しくありませんし、速攻で終わります。
簡単です。

2-1. Pocket ボタン用 HTML 作成ページまでの画面遷移

まずはサイトにアクセスします。

  • http://getpocket.com/

下記の図にあるようにプルダウンから Options を選択します。

blog-pocket-buttom-01

遷移先のページのフッタに “Publishers” というリンクがあります。
これをクリックします。

blog-pocket-buttom-02

次に左メニュの “Pocket Button” をクリックします。

blog-pocket-buttom-03

そうすると、登録ボタン用の HTML 作成画面が表示されます。

2-2. ボタンのデザインを選択する

サイト上部にある「Choose Button Style:」の部分に登録ボタンが並んでいます。
ブログに設置したいボタンのデザインをクリックします。

blog-pocket-buttom-04

ボタンを選択すると、右側のプレビュー欄に反映されます。

2-3. 作成された HTML をコピーする

「Copy Code」にあるテキストエリアに HTML が表示されます。

blog-pocket-buttom-05

テキストエリアに表示されている HTML をコピーします。
コピーした HTML はテキストエディタなどに貼り付けておくといいかもしれません。

3. テーマファイルに HTML を貼り付ける

次からは Stinger3 のテーマファイルにコピーした HTML を貼り付ける作業になります。

3-1. サーバにログインする

ボクは Windows ユーザなので Cygwin 使ってます。
Cygwin のほかにも Tera Term などのツールを使って ssh でサーバにログインします。

とりあえずサーバにログインできればツールは何でも OK です。

3-2. sns.php をバックアップする

Feedly 購読ボタンを貼り付けるファイルは次のものになります。

  • WORDPRESS_HOME/wp-content/themes/stinger3ver20131217/sns.php

WORDPRESS_HOME とは WordPress をインストールしたディレクトリを指します。
ご自身の環境に合わせて読み替えてください。

3-3. sns.php にコピーした HTML を貼り付ける

sns.php のどこに HTML を貼り付けたかは、次の画像を参考にしてください。

blog-pocket-buttom-06

li タグは上から順に次の SNS ボタンになっています。

  1. Twitter
  2. Facebook
  3. Google+
  4. はてなブックマーク
  5. Pocket ← これを追加しました!
  6. Feedly 購読ボタン

HTML を貼付け後、ブログをリロードすると Pocket 登録ボタンが表示されるようになっているはずです。

blog-pocket-buttom-07

もし表示されないという場合は、ブラウザのキャッシュを削除するか、Ctrl キーを押しながら F5 を押してみてください。

4. まとめ

Pocket の登録ボタンを設置しました。

多くの人に見てもらえる記事をどんどん追加していきたいと思っています。

5. ファイルを Github に登録しました

このブログで使っている Stringer3 のテーマファイルは Github に登録してあります。

今回の Pocket 登録ボタンの設置も登録済みです。
次のリンクが修正内容になっていますので、よかったら参考にしてみてください。

6. その他の ブログ に関する記事

その他の ブログ に関する記事は次の通りです。
気になる記事があったらぜひチェックしてみてください!

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-money-93206_640

9円!!

このブログに設置してある Google Adsense の見積もり収益額を確認すると、現時点での今月

記事を読む

icatch-seeking_mini

Stinger3 の追尾式 SNS ボタンを削除する方法

Stinger3 ではデフォルトで画面左下に追尾式の SNS ボタンが表示されます。 これはこれであ

記事を読む

icatch-measure_4153762400_mini-thumbnail

GTMatrix の診断結果でF判定になった項目の対策まとめ

ブログを運営している誰もが取り組む「ブログ表示の高速化」。 優先度が低かったので測定すらしていませ

記事を読む

icatch-blog-customize_mini

Stinger3 の single.php で使われている style.css をカスタマイズ

デフォルトの状態でも読みやすいと感じる Stinger3 ですが、このブログはプログラムのソースコー

記事を読む

2014-04-07-icatch

ブログを本格的に始めて3ヶ月経って分かったこと

tomoyamkung のブログ を2014年1月から本格的に始めました。 それから3ヶ月が経ちま

記事を読む

icatch-feedly-buttom

Stinger3 に Feedly ボタンを設置しました

Google Reader が終了してしまってから RSS フィードの購読に使っている Feedly

記事を読む

Googleアドセンス用(PC)

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


一 × = 3

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑