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='https://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-medium_2x.png'>
  </a>
</div>

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='https://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-medium_2x.png' alt='follow us in feedly' width='71' height='28'>
</a>

これを、さっき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;
}

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

さいごに・・・

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

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

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

 

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

最新情報をお届けします

Twitter でみうをフォローしよう!

About

みう

みう (@miu0512)

フリーランス4年を経て起業。ホームページ制作やLP制作を企画からマーケティングまですべて請けているため、「Webコーディネーター」として活動中。

Category

Popular

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事

PAGETOP