オリジナルのfeedlyボタンを作成、設置する方法

WEBのアイキャッチ

オリジナルのfeedlyボタンを作成、設置する方法を紹介します。

標準のFeedlyボタンの種類が少ない、しっくりこないと感じている方向けの記事となります。

今回扱うのは、テキストリンクをCSSで装飾するパターンと自前の画像を使うパターンの2種類。

スポンサーリンク

手順

途中までは、標準のボタン設置と同じです。
HTMLコードを取得後に修正を行います。

記事内のHTMLコードは、メモトラのfeed URLを使った場合です。
そのままコピペせずに、自ブログのURLに置き換えて、手順を踏んで下さい

1.Feedly公式ボタン 作成ページに行きます。

2.feedのURLを入力します。
Feedlyボタンの取得01

WordPressの場合は、以下のどちらかです。

http://ドメイン名/feed/
http://www.ドメイン名/feed/

3.表示されたHTMLコードを、テキストエディタに貼り付けます。
Feedlyボタンの取得02

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fmemotora.com%2Ffeed%2F'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-medium_2x.png' alt='follow us in feedly' width='71' height='28'></a>

4.HTMLコードを修正します。

<テキストリンク+CSSの場合>
imgタグ部分を削除して、好きな文言を入れて下さい。

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fmemotora.com%2Ffeed%2F'  target='blank'>好きな文言</a>

<自前画像を使う場合>
imgタグ内を修正します。

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fmemotora.com%2Ffeed%2F'  target='blank'><img src='使用する画像のパス' alt='画像の説明' width='画像の幅' height='画像の高さ'></a>

5.ウィジェットやテーマ等、表示したい場所にコードを挿入します。

6.動作を確認して下さい。

サンプル

メモトラでは、記事と固定ページ下に設置しています。
オリジナルFeedlyボタンのサンプル

実際に使用しているコードは下記。
参考になれば幸いです。

<div class="feedly-b">
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fmemotora.com%2Ffeed%2F' target='blank'>Feedlyでブログを購読する</a>
</div>
.feedly-b{font-size:22px;
background-color:#70AA43;
padding:10px;
margin-bottom:25px;
text-align:center;}
.feedly-b:hover{background-color:#92BD43;}
.feedly-b a{color:#FFF;display:block;}
.feedly-b a:hover{text-decoration:none;}

追記

2015/01/28追記
仕様が変わったようなので、コード修正を行う必要があります。

修正前のコード

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fmemotora.com%2Ffeed%2F'  target='blank'>好きな文言</a>

修正後のコード

<a href='http://feedly.com/i/subscription/feed/http://memotora.com/feed/'  target='blank'>好きな文言</a>

要は、http://feedly.com/i/subscription/feed/RSSのURLに変更すればよいみたいです。

参考サイト:Feedlyの購読用ボタンを押しても、購読画面に移動しない。いつのまにか変わっている気がする。なので変更しました(今村だけがよくわかるブログ)

WEBのアイキャッチ

お役に立ったら、シェアをお願いします

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUTこの記事をかいた人

九荻 新

1983年生まれのおっさんブロガー。 自作PC、ハードウェア、ソフトウェアの役立つメモ、レビュー、ニュースをお届けします。