指揮者だって人間だ

晴れた日には洗濯を。

読者登録ボタンライクなFeedlyボタンを設置してみました(購読者数表示付き)

サイドバーに Feedly ボタンを設置していたのですが、購読者もなんとかすれば表示できるだろうと調べてみた結果、先人たちの知恵をお借りして実現できました。

こんな感じです。

f:id:nyokkicond:20140402224242j:plain:w200

読者登録ボタンに合わせて吹き出しが右側に出るようにしてみたのでやり方とコードをメモっておきます。

よくわかるJavaScriptの教科書

よくわかるJavaScriptの教科書



参考にさせていただいたサイトはこちらです。
わかりやすくて勉強になりました、ありがとうございます!

レンタルブログでもFeedlyの読者数カウントつきボタンを設置する方法 - 現代版徒然草 (地方より)

[Å] feedlyの購読者数付きボックスボタン 効果は抜群!?作り方を晒しました! | あかめ女子のwebメモ

設置のステップは以下の通り。

  1. 購読者情報を取得する準備をする
  2. ボタンを設置する
  3. CSSで吹き出しを表示する


1がやや大変ですがその他はそれほど難しくありませんでした。

1、2のステップは id:lettuce0831 さんの解説ページを参考にしてコードを書きました。

レンタルブログでもFeedlyの読者数カウントつきボタンを設置する方法 - 現代版徒然草 (地方より)

はてなブログではサーバにphpを埋め込んで…ということができないので購読者数を取得するのがちょっと面倒です。

最終的に以下のようなコードになりました。
コード自体はほぼコピペで行けましたが、吹き出しとボタンの位置を変えるために div タグ内をちょっと変更しています。

<div id="feedly-followers" class="over">
    <a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fshikisha.hatenablog.com%2Ffeed'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-small_2x.png' alt='follow us in feedly' width='66' height='20'></a>
    <span class="subscribers" id="feedlyCount"></span>
</div>

<script>
    function getJSON(){
        var req = new XMLHttpRequest();
        var span = document.getElementById("feedlyCount");
        
        if (req) {
            req.onload = function(){
                if (req.status >= 200 && req.status < 400) {
                    // 成功
                    var json = JSON.parse(req.responseText);
                    
                    span.innerHTML = json[0]["subscribers"];
                    console.log(json[0]["subscribers"]);
                    
                }else{
                    span.innerHTML = 'error1';
                    console.log("なんらかの失敗");
                }
            };
            req.onerror = function(){
                span.innerHTML = 'error2';
                console.log("通信の失敗");
            };
            
            var url = "https://free-ec2.scraperwiki.com/ef2pjzq/efd4aa8dab1340d/sql/?q=select%20%0A%20%20%20%20subscribers%0Afrom%20swdata";
            req.open('GET', url);
            req.send();
        }
    }
    document.addEventListener( "DOMContentLoaded", getJSON, false );
</script>


http://cloud.feedly.com/…」と「https://free-ec2.scraperwiki.com/…」はブログごとに異なるのでご注意ください。

最後に吹き出しを表示するためはてなブログ デザインのCSSに以下のコードを追加しています。

/* 購読者数つきFeedlyボタン */
#feedly-followers {
    display: block;
}

/* 購読者数の表示部分 */
#feedlyCount {
    margin: -24px 0px 10px 72px;
    width: 18px;
    height: 17px;
    background-color: #FFF;
    position: relative;
    border: 1px solid #669966;
    border-radius: 3px;
    padding: 0 4px;
    font-family: Arial;
    font-size: 11px;
    line-height: 17px;
    text-align: center;
    display: block;
    background: white;
}
/* 購読者数吹き出し部分 */
.subscribers:after,
.subscribers:before {
    border: solid transparent;
    top: 4px;
    content: ' ';
    position: absolute;
}
.subscribers:before {
    border-width: 5px;
    border-right-color: #669966;
    right: 26px;
}
.subscribers:after {
    border-width: 5px;
    border-right-color: #FFF;
    right: 25px;
}


このコードはあかめさんのページを参考にさせていただきました。

[Å] feedlyの購読者数付きボックスボタン 効果は抜群!?作り方を晒しました! | あかめ女子のwebメモ

もしかしたらブログデザインによっては表示が崩れてしまうかもしれませんので、CSSは微調整したほうがいいかも。
これでこんな感じの見た目になり、読者登録ボタンとみた目をそろえることができます。

f:id:nyokkicond:20140402224259j:plain:w200

ScraperWiki の登録だけちょっと手間取りますが、その他はほぼコピペで行けるのでぜひお試しください。


これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)

これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書

広告を非表示にする