vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

WordPressにFeedlyを設置しよう!Feedlyボタンの設置方法3つ

      2017/02/01

LINEで送る
Pocket

wp-intr-feedly
こんにちは、okutani(@okutani_t)です。ブログを運営する上で行っておきたいことがRSSの設定です。RSSはかんたんに説明すると、ブログで新しい記事を投稿したときに、RSSを登録している人達に更新通知が送られる仕組みのことです。

RSSを設定しておけば、自分のブログを「購読」するかのように記事を読んでもらえますね。

そのRSSを利用する代表的なリーダーの1つが「Feedly」というサービスです。このFeedlyを使って購読しているユーザーはかなり多いため、なるべくならサイトに設置しておくことをオススメします。

設置自体はとても簡単にできるので、気軽に試してみてください。

今回は「デフォルトのFeedlyボタン」「購読数付きのボタン」「Feedly用のオリジナルの画像を用意する」計3パターンをそれぞれ説明していきます。

スポンサーリンク

1. Feedly公式のボタンを設置する方法

まずはデフォルトボタンの設置方法を説明します。Feedly公式ページからボタンのコードを取得してサイトに設置しましょう。

下記公式ページにアクセスします。

LINKfeedly. your news. delivered.

お好きなデザインのボタンをクリックしましょう。

feedly

その下のフォームに、Feedlyを利用したいサイトのURLを入力。

feedly2

すると、その下にFeedly設置用のコードが表示されます。

feedly3

このコードを設置したい場所に貼り付ければ、かんたんにFeedly公式ボタンを設置することができます。とっても便利ですね。

次は、購読者数付きのボタンの設置方法をみていきましょう。

2. 購読者数付きボタンを設置する

下記の記事を参考にしました。とても分かりやすく書いてあります。

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

.phpファイルにコードを記述

数字付きFeedlyボタンを設置したい場所に下記コードを記述しましょう。

私はStinger5のテーマを使っているので「sns.php」にliタグで囲って追加しました。

<?php
$feed_url = rawurlencode( 'http://vdeep.net/feed' );
$subscribers = file_get_contents( "http://cloud.feedly.com/v3/feeds/feed%2F$feed_url" );
$subscribers = json_decode( $subscribers );
$subscribers = $subscribers->subscribers;
?>
<div id="feedly-followers" class="over">
<span class="subscribers" id="feedlyCount"><?php echo $subscribers; ?></span>
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fvdeep.net%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='60' height='22'></a>

※vdeep.netと書いてある2箇所を適宜、ご自分のサイトのURLに変更してください

.cssにレイアウトを記述

次にCSSでレイアウト&吹き出しを作成します。Stinger5の場合は「style.css」に記述してあげればOKですね。

/*** 購読者数付きFeedlyボタン ***/
#feedly-followers {
  display: block;
  width: 60px;
}
#feedly-followers img{
  width: 60px;
  height: 21px;
  border: none;
}
/* 購読者数の表示部分 */
#feedlyCount {
  margin:0 auto 6px auto;
  width: 50px;
  height: 33px;
  position: relative;
  border: 1px solid #669966;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 14px;
  line-height: 33px;
  text-align: center;
  display: block;
}
/* 購読者数吹き出し部分 */
.subscribers:after,
.subscribers:before {
  border: solid transparent;
  content: ' ';
  right: 43%;
  position: absolute;
}
.subscribers:before {
  border-width: 3px;
  border-top-color: #B0C1D8;
  top: 34px;
}
.subscribers:after {
  border-width: 3px;
  border-top-color: #FFF;
  top: 32px;
}

きちんと数字付きのボタンが表示されているか確認してみましょう。

wp-intr-feedly00

無事に設置されていることが確認できました!当ブログに5人も購読者が…ありがとうございます。。

私の場合はsnsボタン全体をCSSで囲ってレイアウトしているので、みなさんと見た目が違うのと、Pocketボタンを追加しているのでボタン数がすこし多いです。

Pocketボタンをサイトに設置してみよう!Stinger5編
こんにちは、okutani(@okutani_t)です。今回はサイトのSNSシェアボタンにPocketを追...
2015-05-17 22:19
はてブ

では、次にオリジナル画像を用意してFeedlyボタンを作成する方法を見てみましょう。

3. 自分で画像を用意して設置する

まずは公式サイトにアクセスします。

LINKfeedly

入力フォームに利用したいサイトのURLを入力します。入力するとURL下にサイトタイトルが表示されますので、そちらをクリック。

wp-intr-feedly

クリックすると、RSSの情報が表示されるページに飛びます。

wp-intr-feedly2

上のアドレスバーに表示されているURLが、入力したサイトのFeedlyのアドレスです。コピーしてメモしておきましょう。

アドレスが取得できたので、実際に自分のサイトにリンクを設定していきます。

Feedlyのリンクを設置

今回はWordPressサイトのサイドバーにFeedlyリンクを設置してみましょう。

ダッシュボードから「外観」→「ウィジェット」→「テキスト」を選択して、サイドバーにウィジェットを追加しましょう。

wp-intr-feedly3

好きにタイトルをつけた後、テキストエリアに次のように記入します。

<a href="Feedlyへのリンク" target="_blank">
  <img src="rss.pngへのリンク" />
</a>

aタグでFeedlyへのリンクを作成して、rss.pngというrssリンク用の画像を設置しました。

target=”_blank”」はリンクを開いた時に別窓で開いてくれるので、任意で記述しましょう。

rss.pngの画像はメディアからアップロードしてもいいですし、私は子テーマのimagesフォルダに置いてます。子テーマのimagesフォルダに置いた場合、次の形になるかと思います。

http://(WordPressをインストールした場所)/wp-content/themes/子テーマ/images/rss.png

今回はサイドバーに設置しましたが、お好きな場所に設置してみましょう。私はこんな形で設置してみました。

wp-intr-feedly5

フリーで配布しているRSS用の画像をダウンロードして利用してみました。アイコンのデザインができる方は1から作ってみても良いと思います。

おまけ:自分のサイトを購読している人数を確認

自分のサイトをFeedlyで購読している人数を確認する方法を載せておきます。下記ページにアクセスします。

LINK[K]Feedly Subscribers Checker | Knowledge Colors

先程取得したURLを、チェッカーの入力欄に貼り付けて「確認!」ボタンを押します。

wp-intr-feedly4

これで現在何人ぐらいがサイトを登録しているのか確認できます。購読数が気になったらこの方法で調べてみてはどうでしょうか。

まとめ

簡単にFeedlyのリンクを作成することができました。

このサイトのFeedlyリンクを下記に載せておきますので、参考程度にご覧ください。

参考vdeep-Feedly

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

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
Feedlyの設置は簡単にできるので、新しくブログを作成した際には忘れずに設置しておくと良いですね。多くの人に記事がみてもらえる機会がUPすること間違いなしです。

 - Web, WordPress

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

noindexを使ってサイト評価を下げない方法

こんにちは、okutani(@okutani_t)です。僕はブログ記事を書くとき …

「Vimium」でマウスなしブラウジング!ネットサーフィンが捗るよ

こんにちは、okutani(@okutani_t)です。Chrome拡張機能の『 …

サイトを好きに改ざんできちゃう!?Clone Zoneってサイトが面白い件

こんにちは、Web勉強中okutani(@okutani_t)です。 今回は、サ …

[WordPress] 記事下の一言コメントをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。以前、WordPress …

『Vagrant+VCCW』でWordPressローカル環境を構築してみよう

こんにちは、okutani(@okutani_t)です。お店のサイトやブログなん …

Pocketボタンをサイトに設置してみよう!Stinger5編

こんにちは、okutani(@okutani_t)です。今回はサイトのSNSシェ …

WordPressサイトをGitで管理。Macローカル開発環境編

こんにちは、okutani(@okutani_t)です。みなさんはちゃんと「Wo …

Like Boxがサービス終了。「Page Plugin」に変更しておこう

こんにちは、okutani(@okutani_t)です。先日、当ブログにFace …

[Stinger5] リード文下のAdSense広告をPC・スマホ用サイズに分岐して表示する

こんにちは、okutani(@okutani_t)です。AdSenseの広告サイ …

[WordPress]記事内で使える『連載記事一覧』機能をPHPで作ってみた

こんにちは、okutani(@okutani_t)です。ブログを書いていると、連 …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。