魂を揺さぶるヨ!

ブログを通じて「魂を揺さぶり情熱を燃やせる何か」を探すゲーム制作を生業とする30代の男です。 アウトドア、インドア、なんでも好きです。

【図解あり!】わかりやすい feedlyフォローボタンの導入方法のまとめ

スポンサーリンク


f:id:soul-vibration:20170707235703j:plain

ブログを巡回していて上記のようなアイコンやボタンを見たことは無いでしょうか?

 

これは何のサービスだろ?FacebookやTwitterのようなSNSなのかなーと思っていたのですが、

 

調べてみたらRSSリーダーの一つで「feedly」というサービスでした。

 

feedlyでどんなことが出来るのかについてはこちらに丁重に書かれていました。

mobareco.jp


 

ユレオはRSSを今まで利用したことがなかったため、これを機に利用してみて当ブログでもfeedlyフォローボタンを導入することに致しました。

 

f:id:soul-vibration:20170708002214j:plain

 

RSS(Rich Site Summary リッチ・サイト・サマリー)は直接サイトを行かなくても、

ブログなどが更新されたかどうかを知ることができます。

 

多くのニュースサイト等で導入されており、一部のブログでも目にすることがあります。

 

RSSの情報をまとめて表示するツールのことをRSSリーダーといい、

 

RSSリーダーを使用することで気になるニュースやブログの新着情報を効率よくチェックすることができます。

 

「feedly」はRSSリーダーとして人気が高く、利用者が多いとのことです。 

 

”ブログを定期購読で読んでいただけるようにfeedlyフォローボタンを導入したい!!”

 

今回はそんな便利なfeedlyのfeedlyフォローボタンの導入方法ご紹介したいと思います。

 

 設定手順1 feedlyの登録を行う

1:以下のリンクをクリックして「feedly」のページへ移動します。

feedly.com

 

2:画面中央にあるFOLLOWボタンを押しますf:id:soul-vibration:20170708003501j:plain

 

3:Google、Facebook、Microsoft等のアカウントで新規登録してください。


アカウントが無い場合は先にいずれかの登録を行ってからの設定をお勧めします。

f:id:soul-vibration:20170708003901j:plain

 

4:画面左下の ADD CONTENT をクリックします。f:id:soul-vibration:20170708004724j:plain

 

5:画面左下の Sources をクリックします。f:id:soul-vibration:20170708010314j:plain

 

6:画面中央の What source do you want to follow? にブログのURLを入力します。ブログのタイトル名などでも検索可能です。

(例:http://www.tamashii-yusaburuyo.work/

f:id:soul-vibration:20170708005854j:plain

 

 

 

7:フォロアーさせたいリンクが出ますので「FOLLOW」を選択します。f:id:soul-vibration:20170708011829j:plain

 

8:CREATE A COLLECTION をクリックします。

f:id:soul-vibration:20170708012135j:plain

9:Collection name を入力します。入力後 CREATE を押します。

(例:ブログ、ニュース

f:id:soul-vibration:20170708012347j:plain

 

10:画面左にFEEDSに Collection name が表示され、FOLLOWING に替わります。f:id:soul-vibration:20170708012948j:plain

 

11:Collection name を選択すると目的のURLの情報が画面右側に表示されます。

記事を読むには画面右側の記事を選択してください。これでfeedlyの登録は終了です。

f:id:soul-vibration:20170708013320j:plain

 

 

 設定手順2 feedlyフォロアーボタンのコードを作成する

1:以下のリンクをクリックしてfeedlyフォロアーボタンを作成ページへ移動します。

www.feedly.com

 

 2:フォロアーボタンのデザインを選択します。

他のボタンにデザインを合わせるのであれば下の左から3番目をお勧めします。

f:id:soul-vibration:20170708014914j:plain

 

2:feed URLを調べます。

feed URL を簡単に調べるには以下のURLを開いてください。

RSSフィード取得・検出ツール - RSSリスティング

 

3:ブログのURLを入力します。入力後自動検出スタートを押します。

(例:http://www.tamashii-yusaburuyo.work/

f:id:soul-vibration:20170708020030j:plain

 

自動検出後に表示されたURLを選択してコピーします。

(例:http://www.tamashii-yusaburuyo.work/feed

 

4:feedlyフォロアーボタンを作成ページ戻り、「3」で自動検出されたfeed URLを以下にペーストします。

(例:http://www.tamashii-yusaburuyo.work/feedf:id:soul-vibration:20170708020655j:plain

 

5:生成されたコードを全てコピーします。

f:id:soul-vibration:20170708021258j:plain

 以上でfeedlyフォロアーボタンのコードを作成は終了です。

 

 設定手順3 feedlyフォローボタンをブログに張り付ける

1:feedlyフォローボタンを張り付けたいページを編集で開き、HTML編集を選択します。

 

2:先ほど生成されたfeedlyフォロアーボタンのコードを張り付けます。

f:id:soul-vibration:20170708021959j:plain

 

3:プレビュー表示に切り替えるとfeedlyフォローボタン表示されます。

f:id:soul-vibration:20170708022230j:plain

 

 

設定方法は以上となります。

 

feedlyフォロアーボタンは好きなところに張り付ける事ができます。

 

私はサイドバー等に張って使用しております。

 

feedlyフォロアーボタンが付いているとブログがレベルアップして少しかっこ良くなった気がします。