FeedlyフォローボタンのSSL対応&不具合解決方法

FeedlyのフォローボタンをSSLに対応させる方法と不具合の解決方法を紹介します。公式のタグを少しカスタマイズするだけなので、誰でも簡単にできます。

Feedlyが公式に提供しているフォローボタン(購読ボタン)は、そのままではSSL(HTTPS)に対応していなかったり、ちょっとしたバグ(?)があるので解決方法をまとめました。あくまでも、公式が対応するまでの暫定版の処置とお考えください。

WordPressで運営するサイトにFeedlyのフォローボタンを設置している方は参考にしてください。

はじめに

要確認!

注意

突然ですが、あなたのブログに設置してあるFeedlyのフォローボタンは正しく動作していますか?

試しに、Feedlyにログインした状態で、自分のブログのフォローボタンをクリックしてみてください。フォロー対象に正しく画面遷移しますか?

フォロー対象に画面遷移しなければ、フォローボタンが正常に動作していない可能性があります。恐らく、以前は正常に動作していましたが、Feedly側のバグ(?)で、正常に動作しないままで放置されているようです。

もしかしたら、あなたはFeedlyのフォロワーを獲得する機会を逃しているのかもしれません。直ぐに対処が必要です。

Feedlyとは?

Feedly(フィードリー)は、RSSリーダーのサービスを提供しています。ブログのニュースフィードを収集して、ブログの情報を閲覧したり、他人と共有できるサービスです。ブログから配信される情報を収集する際に利用すると役に立ちます。

このサービスは世界中に多くの利用者がいます。日本でも利用者が多いです。管理画面は英語表記ですが、日本語環境でも問題なく利用できます。

Feedly(フィードリー)

公式サイト

Feedly(フィードリー)

SSL導入時に知っておくべきこと

  1. FeedlyはRSSフィードをHTTPとHTTPSでは別々に認識する。HTTPSに移行するとFeedlyのフォロワー数はリセットされる。
  2. HTTP(非SSL)のRSSフィードを既にフォローしている人は、RSSフィードの再登録の必要はない。HTTPSになっても新しい記事の情報を受け取ることができる。
  3. Feedlyが公式に提供しているFeedlyボタンの生成ツールにはバグ(不具合)がある。SSL環境で利用するには修正が必要になる。(2017年10月現在)

フォローボタンのSSL対応方法

Feedlyが公式に提供している「Feedly Button」の生成ツールから生成されるタグを少しカスタマイズするだけでSSLに対応できます。

フォローボタンの画像ファイルは、SSLにも対応しています。HTTPSのURLに変更しても利用できます。ただ、このフォローボタン生成ツールには、複数のバグ(不具合)が存在します。

(2017年10月現在)

フォローボタン生成ツール

FeedlyのフォローボタンのHTMLコードは公式サイトから生成できます。

Feedly button

URLをHTTPSに変更する

FeedlyのフォローボタンをSSL(HTTPS)に対応させるためには、フォローボタンのリンクURLと画像のパスをHTTPSに変更してください。フォローボタンの画像ファイルはSSL用のHTTPSのURLでも利用できます。

URLをHTTPSに変更する例

バグと思われる現象の解決方法

1. HTTPS(SSL)の不具合を修正

公式のFeedlyボタン生成ツールに、HTTPS(SSL)のRSSフィードのURLを入力すると、HTTPSとHTTPが混じったタグが生成されます。

現状では、自動的に先頭にHTTPのアドレスが挿入される仕様になっているようです。この仕様では、SSL導入時に問題が発生します。

対処方法
A案 RSSフィードにHTTPS(SSL)のURLを利用する場合は、
二重になっている余分なHTTPの部分を除去する。
B案 RSSフィードはHTTP(非SSL)のURLを利用しても問題ありません。
HTTP(非SSL)のURLを入力すれば、不具合が発生することはありません。
htaccessに301リダイレクトの設定があれば、自動的にHTTPSのフィードの情報を取得します。
余分なHTTPの部分を除去する例

HTTPS(SSL)のRSSフィードを利用する場合は、二重になっている「http%3A%2F%2F」の部分を除去します。

余分なHTTPの部分を除去する例

2. エンコードの不具合を修正する

Feedlyのフォローボタンの仕様では、登録したRSSフィードのURL部分がエンコードされるが、URLエンコードされた部分のパラメーターが正常に受け渡されない。(2017年10月現在)

対処方法

URLがエンコードされている部分をデコードすると問題が解消します。
ちなみに、RSSフィードのURLはHTTPS・HTTPのどちらでも問題ありません。

デコード後のHTMLコード
<a href='https://cloud.feedly.com/#subscription/feed/https://netaone.com/feed/' target='blank'>
<img id='feedlyFollow' src='https://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png' alt='follow us in feedly' width='131' height='56'>
</a>
変更前のHTMLコード(参考)
<a href='https://cloud.feedly.com/#subscription%2Ffeed%2Fhttps%3A%2F%2Fnetaone.com%2Ffeed%2F' target='blank'>
<img id='feedlyFollow' src='https://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png' alt='follow us in feedly' width='131' height='56'>
</a>
参考

URLエンコード・デコードフォーム

まとめ

FeedlyのフォローボタンをSSLに対応させる方法と不具合の解決方法を紹介しました。公式のタグを少しカスタマイズするだけなので、誰でも簡単にできます。

Feedlyが公式に提供しているフォローボタンは、そのままではSSL(HTTPS)に対応していなかったり、ちょっとしたバグ(?)があります。

もしかしたら、あなたはFeedlyのフォロワーを獲得する機会を逃しているのかもしれません。直ぐに対処が必要です。ちなみに、この方法は公式が対応するまでの暫定版の処置とお考えください。

スポンサーリンク