miMemo(ミメモ)

Web制作 WordPress ブログ

[M]RSSの登録に便利!購読者数付きのバルーンなFeedlyボタンをシェアボタンと一緒に設置してみた

FeedlyBtn sum

こんにちは!みう(@miu0512)です。SylfeedがFeedlyに対応してから、RSSの登録はFeedlyで行っています。記事にFeedlyボタンが付いていると、そのブログをRSS登録するのに便利!ということでPCサイトに設置してみました。

Feedlyって何?設置すると何のメリットがあるの?

RSSリーダーとしてだけではなく、RSSリーダー用アプリへの連携も優秀

Google Readerのサービスが終了してから、RSSリーダーとして今一番注目を浴びている「Feedly」。iPhoneで人気のRSSリーダーアプリ「Reeder」や「Sylfeed」にも対応しており、RSSの管理がとってもラクになります。

Feedlyを記事に設置することで、読んでいる方がRSS登録しやすくなる

現在私はPCの方で設置をしていますが、シェアと同様、すぐにRSSの登録が出来るようになるので、購読してもらえる可能性がアップ!検索で記事にリンクした場合、記事にRSSボタンがあると結構便利だなと私自身思っています。

導入方法はとっても簡単3STEP!

FeedlyBalloon 01

STEP1:設置したい場所に以下のソースを埋め込む

[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 * 12 );
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%2Fweb-mimemo.com%2Ffeed%2F’ target=’blank’>
<img id=’feedlyFollow’ src=’http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-medium_2x.png’>
</a>
</div>
[/php]

STEP2:自分のブログ・サイト用に中身をちょっと書き換える

FeedlyBalloon 02
feedlyボタン生成ページ」で自分のフィードを入力すると、以下の様なタグが発行されます。
[html]
<a href=’http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fweb-mimemo.com%2Ffeed’ target=’blank’>
<img id=’feedlyFollow’ src=’http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-medium_2x.png’ alt=’follow us in feedly’ width=’71’ height=’28’>
</a>
[/html]

これを、さっきSTEP1で埋め込んだAタグの部分と置き換えます。HTMLの知識がある方は、Aタグ内の「http://cloud.f〜」の部分を生成されたものに置き換えるだけでOK。※このまま貼り付けてしまうと私のブログがRSSに登録されてしまうので注意ですよ!!

STEP3:CSSでボタンの大きさや位置を調整する

スタイルシートで調整します。私は以下の様な感じで調整を行いました。修正を行う際は拡張機能「Firebug」がおすすめです。

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

#feedly-followers img{
width:72px;
height:30px;
border:none;
}
/* 購読者数の表示部分 */
#feedly-count {
margin:0 auto 6px auto;
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;
}
[/css]

今回参考にさせていただいたサイト

購読者数つきのFeedlyボタンを設置したので、その方法と参考にしたサイトを紹介

さいごに・・・

設置して初めて気づいた購読者数・・・。皆様ほんとにありがとうございます!!!Feedlyの設置はRSS登録の手助けになると同時に、自分への励みにもなることがわかりました。

最後までお付き合いいだだきありがとうございます!

これからも、みう(@miu0512)を応援していただけたら嬉しいです!

この記事が気に入ったら
いいね!しよう

About Me

みう

みう(@miu0512)

フリーランス
Webコーディネーター

フリーランスWeb屋。マンチカン5匹と一緒に仕事をしています。 【 猫 / マンチカン / Webデザイン / ブログ / ミメモ / フリーランス / カメラ / 旅行 / 車 / 水樹奈々 / ライブ / カラオケ / アニソン / マンガ / アニメ / iPhone / Mac / 白猫 / メロディア】

PAGETOP