【Blogger】Feedlyの購読者カウントを表示

Google Readerが終了して1ヶ月以上経ちまして、
Feedlyが結構ユーザを増やしていると勝手に思っています。

ので、Feedlyでちょこっと遊んでみました。

今回はこんなものを表示してみたいと思います。
現在の購読者カウントですね。

こことか参考にしました。
ソースも公開しちゃいます！Feedly登録ボタンの購読者数カウンタを自作してみました

ちなみに、記事を書いてる時点では、
クロスドメインのAJAX使っているので、普通には表示されません。

事前準備

まずはFeedlyボタンを作成しなければいけません。
Feedly buttonのページへ行き、ボタンを作成します。
aタグとimgタグの混ざったタグが表示されますので、貼り付けます。

blog.shonanshachu.comでは、

<a href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fblog.shonanshachu.com%2Ffeeds%2Fposts%2Fdefault" style="text-decoration:none" target="blank">
  <img style="height:20px;width:66px;" data-count="horizontal" id="feedlyFollow" src="http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-small_2x.png" alt="follow us in feedly">
</a>

こんな感じのコードを取得します。

JavaScript

続いてJavaScriptを書きました。
Feedlyのimgタグにdata-count="horizontal"を追加し、
対応するFeedのURLからデータを取得します。

$(function() {
  // displaying feedly count
  var align = $('#feedlyFollow').attr('data-count');
  if(align === 'horizontal' || align === 'vertical') {
    var feed = $('#feedlyFollow').parent().get(0).href.split('subscription%2Ffeed%2F')[1]; 
    $.ajax({
      'url': 'http://cloud.feedly.com/v3/feeds/feed%2F' + feed,
      'crossDomain': true,
      'success': function(data) {
        if(align === 'horizontal') {
          $('#feedlyFollow').after('<div id="feedly-count" class="feedly-count-horizontal">' + data.subscribers+ '</div>');
        }
        else if(align === 'vertical') {
          $('#feedlyFollow').before('<div id="feedly-count" class="feedly-count-vertical">' + data.subscribers+ '</div>');
        }
      }
    });
  }
});

このままではほとんどのブラウザで動きません。
表示したいサイトと同じドメインでサーバサイドスクリプトを書き、
取得したいJSONだけを返すようにすれば使えます。

ここでは分かりやすさのためにjQueryのajaxでそのまま取得しに行ってます。

ここで返って来るレスポンスは

{
  "website":"http://blog.shonanshachu.com/",
  "title":"湘南社中テクニカルブログ",
  "velocity":1.4,
  "subscribers":19,
  "id":"feed/http://blog.shonanshachu.com/feeds/posts/default"
}

というJSONになります。

CSS

CSSは縦用と横用の両方を書いておきます。

縦で表示する場合は
data-count='vertical'
と
横で表示する場合は
data-count='horizontal'
とimgタグに追加すればJavaScriptとCSSが頑張ってくれます。

#feedly-count {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  color: #333;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  text-decoration: none;
  font-size:16px;
}
.feedly-count-horizontal {
  position: relative;
  background: #fff;
  border: 1px solid #bbb;
  padding: 0 3px;
  margin-left: 8px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
}
.feedly-count-horizontal:after, .feedly-count-horizontal:before {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.feedly-count-horizontal:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 3px;
  top: 50%;
  margin-top: -3px;
}
.feedly-count-horizontal:before {
  border-color: rgba(187, 187, 187, 0);
  border-right-color: #bbb;
  border-width: 4px;
  top: 50%;
  margin-top: -4px;
}
.feedly-count-vertical {
  position: relative;
  background: #fff;
  border: 1px solid #bbb;
  padding: 0 3px;
  margin-bottom: 6px;
  top: 0px;
  width: 58px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  display: block;
}

.feedly-count-vertical:after, .feedly-count-vertical:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.feedly-count-vertical:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 3px;
  left: 50%;
  margin-left: -3px;
}
.feedly-count-vertical:before {
  border-color: rgba(187, 187, 187, 0);
  border-top-color: #bbb;
  border-width: 4px;
  left: 50%;
  margin-left: -4px;
}

最初はJavaScriptでCSSをごちゃごちゃやろうと思ったんですが、
beforeとかafterとかが結構面倒そうだったので、cssで書きました。

サイズとかはちょっと調整しないと綺麗に見えませんね。

実際、私のブログでもちょっと文字が大きいかなぁと気になるけど面倒なので直してないです。

あとは、クロスドメインの回避方法は検索してみて下さい。

湘南社中テクニカルブログ

Pages

2013年8月7日