Feedlyなどで購読出来るRSS購読ボタンを作った

※記事内に商品プロモーションを含む場合があります

先日、ブログをSSL化した為、非SSLで接続する
Feedlyやライブドアリーダーのボタンは使えなくなりました。

使おうと思えば使えますがloaded over httpsエラーが発生しています。

Feedly購読者は若干増えているので、あった方が良いはず。
今回はRSS購読ボタンを自作しました。

ボタンの画像の作成

RSSアイコンだけ、だと分かりにくい上に
ツィッターのフォローボタンなどが横長まので１つだけ正方形だと
不自然に見えます。

今回はFeedlyも、購読出来る様にするので横長のボタンにして
ボタンの左右に各アイコンを配置しました。

各ボタン素材はこちらからダウンロードしました。
【参考】フリー素材:Web2.0チックなフィードアイコン
【参考】次世代のRSSリーダーになるかもしれない Feedlyのアイコンを作成したよ。

作成はGIMPで。

グラデーションを半透明にし、立体化を出しました。

クリックするとメニューが表示されるボタン

購読の項目は

1. Feedky
2. ライブドアリーダー
3. RSS

の３つにしたいのですが、３つボタンを並べるの見た目も悪いです。
そこで、ボタンをクリックするとメニュ（リンク）が表示される様にしました。

使用したのはJavaScript。

こちらのソースを元にしました。
【参考】クリックするとツリーメニューを表示する（フラット）

各サービスへのリンクはテキストリンクにしました。

左側のRSSアイコンはWordPressテーマで行いました。

これをウィジェットやモバイルでは記事下に挿入しました。

ボタンをクリック・タップするとFeedlyなどへのリンクが表示され、
再度クリック・タップすると再び隠れます。