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

公開日: : ブログ , ,

Google Reader が終了してしまってから RSS フィードの購読に使っている Feedly。
ボクと同じように Google Reader の終了後に乗り換えた方も多いかと思います。

ぼちぼちブログのカスタマイズを始めようかと思っていまして、記事に関する CSS をいじったのをきっかけに Feedly の購読ボタンを設置してみました。

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

icatch-feedly-buttom

目次

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

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

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

2. Feedly 購読ボタン用の HTML を作成する

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

2-1. 購読ボタン用 HTML 作成ページにアクセスする

まずは作成ページにアクセスします。

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

サイト上部にある「Step 1: Select your design」の部分に購読ボタンが並んでいます。
ブログに設置したいボタンのデザインをクリックします。

blog-feedly-buttom-01

例えば、上段右端のボタンをクリックすると、

blog-feedly-buttom-02

「Step 3: Copy and embed the HTML code snippet」の部分に反映されます。

blog-feedly-buttom-03

2-3. ブログの RSS フィード URL を入力する

「Step 2: Insert your feed URL」にあるテキストに自身のブログの RSS フィード URL を貼り付けます。

blog-feedly-buttom-04

Stinger3 の場合、デフォルトであれば次の URL になるかと思います。

  • “ブログのドメイン/feed”

「デフォルトからデザインをいじっていなければ」という条件付きですが、RSS フィード URL は画面に表示されています。

blog-feedly-buttom-05

このリンクに設定されているアドレスをコピーしても OK です。

コピーした RSS フィード URL を Feedly サイトのテキストに入力します(または貼り付けます)。

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

RSS フィード URL を入力(または、貼り付け)し、テキストからフォーカスを外すと、HTML が生成されて「Step 3: Copy and embed the HTML code snippet」にあるテキストエリアに表示されます。

blog-feedly-buttom-06

テキストエリアに表示されている 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-feedly-buttom-07

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

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

HTML を貼付け後、ブログをリロードすると SNS ボタンの右端に Feedly 購読ボタンが表示されるようになっているはずです。

blog-feedly-buttom-08

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

4. まとめ

ようやく Feedly 購読ボタンを設置しました。

前々から設置したいなぁと思ってはいたのですが、こんなに簡単にできるならサッとやってしまえばよかったと思えるぐらい簡単でした。

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

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

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

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

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

Googleアドセンス用(PC)

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

関連記事

icatch-measure_4153762400_mini-thumbnail

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

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

記事を読む

2014-04-07-icatch

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

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

記事を読む

icatch-seeking_mini

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

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

記事を読む

icatch-blog-customize_mini

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

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

記事を読む

icatch-pocket

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

「あとで読む」系のサービスのひとつである Pocket。 ボクも Pocket を使っていまして、通

記事を読む

icatch-money-93206_640

9円!!

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

記事を読む

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 ↑