ブログ用購読者数カウンタ付Feedly登録ボタンの作り方と設置方法

先日、個別記事の下のシェアーバーを設置し
購読数がそれなりにある、Feedly登録ボタンを設置しようとしましたが
ツイッターなどではツィート数などはバルーン表示されるので
Feedly登録ボタンも購読者数カウンタ付にしてみました。
fr-button

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

ソースの編集ポイントなどを合わせて紹介したいと思います。

ソースのダウンロード

上記サイトよりソースをダウンロードします。(FeedlyCounter.zip
ダウンロード後ファイルを確認します。

FeedlyStyles.css
feedly_button.html
getFeedlyCount.js
getFeedlyCount.php

4つのファイルがあると思います。

アップロードと実行パス

4つのファイル内getFeedlyCount.jsgetFeedlyCount.phpはサーバー上に
アップロードして使用します。
(CSSを統合しない場合はFeedlyStyles.cssもアップロードします。)

ブログ上からアクセス出来る必要があるので分からなければ、ブログトップに
アップロードしてhttp://~でアクセスしてファイルが存在するか
確認してみて下さい。

getFeedlyCount.jsの編集

1行目、購読者数を取得するRSSフィードのURLを記入します。
例)var url = ‘https://b.eax.jp/feed/atom/’;

自分のフィードが分からない場合や
フィードが複数有、どちらがFeedlyで使われているか分からない場合は
Feedly Subscribers Checker 2
を使って自分のブログのURLの一部やドメインを入力すれば検索出来ます。

2行目、getFeedlyCount.phpへのパス
getFeedlyCount.jsgetFeedlyCount.phpが同じディレクトリー(フォルダ)にあれば
そのままで良いと思いますが、http://から始まる絶対パスで記入しておいた方が
良いと思います。

例)var phpPath = ‘https://b.eax.jp/_tools/FeedlyCounter/getFeedlyCount.php’;

編集後、アップロードして下さい。

CSSの統合

FeedlyCounter用のCSSがあり、link要素などでFeedlyCounterのCSSを取り込むか
既存のテーマのCSSに統合します。

このブログの場合、賢威6と言うテーマですが、
テーマのデザイン用CSSのdesign.css にコピペして統合しました。

htmlの編集

htmlで使うのはこの部分

<script type=”text/javascript” src=”getFeedlyCount.js”></script>
<div id=”feedly-followers”>
<span id=”feedly-count” class=”fdly-count”>0</span>
<!– ここにFeedlyの登録ボタンのソースをコピペしてください –>
</div>

1行目getFeedlyCount.jsへのパス
ブログの場合、パーマリンクでURLのディレクトリーがバラバラになるので
http://から始まる絶対パスで指定します。
例)<script type=”text/javascript” src=”https://b.eax.jp/_tools/FeedlyCounter/getFeedlyCount.js”></script>

4行目、Feedlyの登録ボタンの貼り付け
FeedlyボタンはこちらのFeedly buttonから作ることが出来ます。
簡単な作り方としては、自分のRSSフィードを入力して、ボタンを選ぶだけ。
くわしい作り方かこちらを参照してください。
Feedlyへワンクリックで登録できる「Feedly Button」をブログに設置する手順
作れたら、ボタンのソースを<!– ここにFeedlyの登録ボタンのソースをコピペしてください –>
消して貼り付けます。

 

Failedと表示される場合は、getFeedlyCount.jsgetFeedlyCount.phpへの
アクセスに失敗orデータの取得に失敗している事を示しています。
getFeedlyCount.jsの2行目のパスを絶対パス(http://~)にしたら直りました。

 

追記

スポンサーリンク

関連する記事(一部広告)