読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

はてなブログにfeedlyの購読者数付きのボタンを設定する方法

はてな
スポンサーリンク

前々から実は何度かチャレンジしてうまく行かなかったのであきらめていたのですが、今日偶然にも記事を見つけて「はてなブログ」にfeedlyの購読者数付きのボタンを設定することができました。

完成図はこんなの。
f:id:lightgauge:20150210202121p:plain

設定内容が破壊されても良いようにここにメモとして書いておきます。
ソースコードはリンク先にあるので、を書きたくなかったのですが、以前設定したCSSがリンク先ページ削除されてて、2度と再現できないという悲しいことになってるので、念のためソースコードも載せておきます。

まずはタイトル下に以下の文を追記します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

これはすでに設定されている方は結構です。

次に記事下に以下のスクリプトを追加します。

//feedlyの購読者数を取得
function get_social_count_feedly(rss_url, selcter) {
jQuery.ajax({
type: "get", dataType: "json",
url: "http://query.yahooapis.com/v1/public/yql",
data: {
q: "SELECT content FROM data.headers WHERE url='http://cloud.feedly.com/v3/feeds/feed%2F" + encodeURIComponent(rss_url) + "' and ua='#Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36'",
format: "json",
env: "http://datatables.org/alltables.env"
},
success: function (data) {
count = data.query.results.resources.content.json['subscribers'];
//console.log(count);

jQuery( selcter ).text(count);
console.log('feedly_count:');
console.log(count);
}
});
}
document.addEventListener( "DOMContentLoaded", get_social_count_feedly('http://自分のサイト/feed', '#feedlyCount'), false );
document.addEventListener( "DOMContentLoaded", get_social_count_feedly('http://自分のサイト/feed', '#feedlyCount2'), false );
// ]]></script>

難しい解説は参考にさせていただいた、

はてなブログにFeedlyの購読者数付きボタンをJavascriptだけで設置する方法 - いーとてくのろじ
を参照してください。
違いは「addEventListener()」を2つ追加していてあるところです。
上下2つのボタンを作ろうとしたら「DIVタグのIDが2ついる」みたいなんで2つしました。
なんと安直な。もっといい方法がある方は教えてください。
基本、私の対策は「ベタ書き」です。└( ̄^ ̄)┘エッヘン

あとは表示したいところに

<div id="feedly-followers" class="over">
    <span class="subscribers" id="feedlyCount"></span>
    <a href='ここは自分のブログのFEEDがあるURLをfeedlyのサイトで変換させたURL'  target='blank'><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

[K]ソースも公開しちゃいます!Feedly登録ボタンの購読者数カウンタを自作してみました - Knowledge Colors
ここで造られたCSSを利用させていただきました。


って勝手に使っていいんでしょうか?
ダメなら教えてください。

ということで、他の人が作ったのを持ってきて貼り付けただけなんですが、最初は吹き出しが出なかったり、数字がとれなかったりして結構苦労しました。

f:id:lightgauge:20150210202121p:plain
ちなみにこのうちの1人は自分なんで・・・登録よろしくお願いします。

詳解RSS~RSSを利用したサービスの理論と実践

詳解RSS~RSSを利用したサービスの理論と実践

<<追記>>
また今度、スマホにもやってみましょう。
スマホににも設定してみました。
デザインのタイトル下にPC版のCSSと同じものを設定するのですが、

<style>
</style>

の間に挟む(なければ追加してください。)以外はそのままで設定可能でした。
スマホ版はボタン表示1つにしてあるので、追加するイベントリスナーも一個でOKです。

注:イベントリスナーで設定しているget_social_count_feedly()の第2引数の名前と、

<span class="subscribers" id="feedlyCount"></span>

のidの名前は必ず合してくださいね。
あとは私ははてなブックマークFacebookFeedlyのボタンなどは自力で出してます。

記事下のソーシャルボタンとGoogleAdsenseの位置を入れ替える方法 - 攻めは飛車角銀桂守りは金銀三枚
この方法でやれば上手く設定できると思います。