『Feedlyに登録する』ボタンを購読者数つきに変更してみた

RSSリーダーの『Feedly』にBlogを登録するためのボタンを『購読者数つき』のものに変更する方法が紹介されていたので、早速設置してみた。

参考にさせて頂いたのは以下のBlogエントリ。
購読者数つきのFeedlyボタンを設置したので、その方法と参考にしたサイトを紹介

■設置したボタンはこんな感じ
Feedlyに登録するボタン(登録者数つき)

登録者数が見えるようになって、何かと良い(^ ^)

Feedlyの登録者数は約1ヶ月前の段階では1,725アカウントとなっていたので徐々に増えているようで、ご登録頂いてる皆様には感謝m(_ _)m

コード内容は、上記のBlogエントリで紹介されている内容をほぼそのまま流用させて頂いた。

■『Feedlyに登録する』ボタンを設置する場所に追加したコード
自分の場合はエントリの各記事に追加したのでsingle.phpに追加。

<?php
    if ( false === ( $subscribers = get_transient( 'feedly_subscribers' ) ) ) :
    $feed_url = rawurlencode( get_bloginfo( 'rss2_url' ) );
    $subscribers = wp_remote_get( "http://cloud.feedly.com/v3/feeds/feed%2F$feed_url" );
    $subscribers = json_decode( $subscribers['body'] );
    $subscribers = $subscribers->subscribers;
    // 負荷軽減のため半日キャッシュする(数値はお好みで)
    set_transient( 'feedly_subscribers', $subscribers, 60 * 60 * 24 );
    endif;
    ?>

    <div id="feedly-followers">
        <span id="feedly-count" class="fdly-count"><?php echo $subscribers; ?></span>
            <a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fshimajiro-mobiler.net%2Ffeed%2F'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-medium_2x.png' alt='follow us in feedly' width='71' height='28'></a>
    </div>

■CSSに加えた内容
続いて、CSSに以下の内容を加える。

特に修正を加える必要が無かったので、冒頭で紹介したサイトのままの内容を追加。必要に応じて適宜修正を加えると良い感じに仕上がるかなと。

/* 購読者数つきFeedlyボタン */
#feedly-followers {
    display: block;
}
/* 購読者数の表示部分 */
#feedly-count {
    margin-bottom: 6px;
    width: 62px;  ←カウンタの幅
    height: 31px;  ←カウンタの高さ
    background-color: #FFF;
    position: relative;
    border: 1px solid #669966;
    border-radius: 4px;
    padding: 0 4px;
    font-family: Arial;
    font-size: 16px;
    line-height: 31px;
    text-align: center;
    display: block;
  background: white;
}
/* 購読者数吹き出し部分 */
.fdly-count:after,
.fdly-count:before {
    border: solid transparent;
    content: ' ';
    right: 43%;
    position: absolute;
}
.fdly-count:before {
    border-width: 5px;
    border-top-color: #B0C1D8;
    top: 32px;
}
.fdly-count:after {
    border-width: 5px;
    border-top-color: #FFF;
    top: 30px;
}