風の羅針盤 | Destination of winds.

【WordPress】Feedlyのフォローボタンと購読者数バルーンを設置してみた

time 2015/12/19  所要時間:約 2

【WordPress】Feedlyのフォローボタンと購読者数バルーンを設置してみた

個別投稿のページの最下部に、以前アイキャッチ画像とともに、Facebookのいいねボタンを設置したのですが、

【WordPress】「この記事が気に入ったら いいね!しよう」を投稿ページに設置する方法 | 風の羅針盤 | Destination of winds.
このサイトでは、WordPressテーマ「マテリアル」を使用していますが、Facebookのいいねボタンや、Twitterのフォローボタンは右側のサイドバーに標準で搭載されています。

&nbsp…

この時はついでにTwitterのフォローボタンをその下に一緒に設置しました。

今回、一緒にFeedlyのフォローボタン購読者数のバルーンを表示するボックスを並べて設置してみましたので、ご紹介します。

ちなみにこれも、部長ナビさんのオーダーが元になってます^^;

こっちはマテリアル版ということでご容赦いただいて、早速行ってみよ〜(笑)

スポンサーリンク

single.phpへ追記する

TwitterとFeedlyについては、ボタンは標準のものを使ってますので、何も特別なことはありません。

ただ、モバイルの場合はボタンを小さくしたかったので、PCとモバイルで若干デザインを変えるようにしています。

このコードにTwitterのIDやFeedのURLを設定して、適当な場所に挿入します。

私の場合は、コメントの下に挿入しました。

前回の記事で既にTtitterの部分を実装済みの場合は、その部分ごとに入れ替えます。

style.cssでデザインを整える

仕上げにstyle.cssにスタイルを挿入していきます。

style.cssのPC・全体の部分に貼り付けます。

これで完成です。

PCとモバイルでに表示させてみる

PCの場合

PC用

 

モバイル用

モバイル用

お分りいただけるでしょうか。若干デザインが異なります。

PC用の方は大きめのボタンとその下にタイトルが来ていますね。一方モバイル用の方はボタンを小さいものにして、タイトルを上に持ってきました。

バルーンにもちゃんと購読者数が表示されています。少ないけどね^^;

 

ちなみに、これはプラグイン「SNS Count Cache」が動いてないと購読者数を引っ張ってこれないので、ご注意を。

スポンサーリンク

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

最新情報をお届けします

シェアしてくれると、ちゃぼPめっちゃよろこびます^^v

down

コメントする




*

この記事の関連カテゴリ

関連記事



スポンサーリンク