カテゴリー: RSS

2014.01.31 加筆修正。number_format_i18n 関数を咬ませて出力。
2015.01.28 購読 URL が変わったためコード変更

今日の午前中メンションが飛んできまして、

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

@hayashikejinan @ezm_t 本当にそのまんま使わせてもらってて恐縮なのですが、お2人のエントリーを見てFeedlyボタン設置させていただきました。ありがとうございます！ http://t.co/rRsRpe2LVi

— ushigyu (@ushigyu) August 20, 2013

ぼくの過去記事を参考にして頂いたらしく。

そういえばこのブログでも自分で作ったボタンがあるなぁ、ということで紹介された勢いを借りてサンプルコードを載せておこうと思います。

FeedlyのRSS登録ボタン購読者数付きのサンプルコード

まず前提条件がいくつか。

• 過去記事、FeedlyのブログRSS購読者数(フォロワー数)を取得・表示してうれしがる方法を紹介するよ！をやっていること
• IE7以下だと表示が乱れること

をご理解くださいませ。では早速。

マークアップ

phpにさしこむhtmlタグとphp文です。

入れたいところに書き込めばOKです。

cssで見た目を整える

ソーシャルボタン的にするためcssでスタイルを指定してあげます。

a.feedlyButton {
	color: #777777;
	text-align: center;
	text-decoration: none;
}
a.feedlyButton:hover {
	color: #333333;
}
a.feedlyButton:visited {
	color: #777777;
}
.arrow_box_feedly {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #CCCCCC;
	border-radius: 3px 3px 3px 3px;
	height: 35px;
	width: 66px;
	margin-bottom: 8px;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.arrow_box_feedly:after, .arrow_box_feedly:before {
	border: medium solid transparent;
	content: " ";
	height: 0;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 100%;
	width: 0;
}
.arrow_box_feedly:after {
	border-color: #FFFFFF rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
	border-width: 4px;
	margin-left: -4px;
}
.arrow_box_feedly:before {
	border-color: #CCCCCC rgba(204, 204, 204, 0) rgba(204, 204, 204, 0);
	border-width: 5px;
	margin-left: -5px;
}
.arrow_box_feedly img {
	margin: 0;
	border: none;
}
.arrow_box_feedly span {
	line-height: 35px;
}

テーマのcssに書き込みましょう。

これで終了です、簡単ですね！表示サンプルはこちら（拡大してます、本来はwidth 66pxです）

ちなみに、WordPress用の不動産プラグインを作ってらっしゃる nendeb.jp さんがいつの間にかこのブログと同じものを使っておられました。

ﾎﾎまとめ

2匹目のどじょうインスパイアを受けて書いてみました。

他のブログと違った個性を出すためには色々試してみるのがいいですね。

全く同じになっちゃうとちょっとオリジナリティがなくなるので、うちではマウスホバー時に～人目の～って出すようにしてます。

横長のソーシャルボタンは使ってないので作っていませんが、リクエストがあれば作ってみようと思います。

ボタンつけてだいぶ購読者さんが増えたのでなかなかに効果はあったのかな。

2013.06.27 Feedly Cloudになったのでコード書き変えました。

やれソーシャルだやれSNSだ（いっしょ）、ネット社会が社会性を訴求し倒してますよね最近。

さて。

feedlyの記事を書けばウケるんでしょうとばかりに。

feedlyの購読ボタンって何よ

SNSボタンのようなカウントをしてくれるものじゃあありませんこれ。

ただただfeedlyにボタンを据えてるブログのRSS追加するだけのボタンです。

「はて、つける意味はあるのかい？」みたいになりますかね。

まぁfeedlyRSS登録画面へ直接誘導するってのは一手間省けるので、少しはRSS登録してくれる人増えるんじゃないですかね。

feedlyのpublisherページから Add a subscribe button to your site のところ、 Get subscride button からzipを頂けます。

feedly. feed your mind.
Our publishers program aims at empowering you to make the most of your feeds. Whether you wish to re …

では導入してみましょう

ざっくり言うと「zipを落として画像選んでリンク付けたらええねん」です。

zipを解凍して使いたいアイコンを決めます。4パターン13種ありました、一覧がこちら。

当ブログでは一番上と一番下に据えてます。参考程度に。

一応導入のコードも書いておきますが、大して困ることはないでしょう。

Retinaディスプレイ用もありますね、Renitaディスプレイ機器持ってないのでよくわかんないです ｧ ‘`,､(‘∀`)’`,､

導入コードhtmlの場合

RSSのURL・画像URL・画像高さ・画像幅は自分のそれに置き換えてください。

うちのブログだと http://www.feedly.com/home#subscription/feed//feed/ です。

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2F【ここにRSSのURL】'
  target='_blank'
  title="FeedlyでRSSを購読する" >
  <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>

導入コードwordpressの場合

画像はテーマ内のimagesフォルダに入っているものとします。

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2F<?php echo get_bloginfo_rss( 'rss2_url' ); ?>'
  target='_blank'
  title="FeedlyでRSSを購読する" >
  <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>

まぁこんな感じですかね。全然難しいことはないです。

ﾎﾎまとめ

zip内のInstructionsを読むと、

「端末にfeedlyアプリが入ってたらfeedlyアプリが起動するぜAh-ha」

って書いてますけどもandroidだと無理でした。iPhoneならいけるのかな（持ってない）。

Lineのボタンみたく無理矢理対応させようとandroidnoのfeedlyアプリを見てみるも、独自のschemaを持ってないので対応させることはできませんでした。