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

本Blogのエントリには、アフィリエイト広告が含まれています。

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

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

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

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

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

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

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


subscribers;
// 負荷軽減のため半日キャッシュする(数値はお好みで)
set_transient( 'feedly_subscribers', $subscribers, 60 * 60 * 24 );
endif;
?>


follow us in feedly

■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;
}

掲載している内容は公開時点の情報です。Webサイトやサービスの内容変更などにより、情報が古くなっている場合もありますので、ご注意ください。

運営者をフォローする