Feedly風のFacebookボタンを自作してサイドバーに設置してみた | 考えるオヤジ    

考えるオヤジ

仕事と育児を頑張るオヤジ達が「ほっ」とひと息つけるブログでありたい。父親視点での子育て・ライフハック・趣味など幅広く情報発信。

Feedly風のFacebookボタンを自作してサイドバーに設置してみた

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

      2016/02/11



ジメジメした梅雨ももうじき終わり、そろそろ夏も近くなってきましたね!夏大好きおっさんしろうめず@ShiroUmezです。

さて、遅ればせながらワタクシも一ブロガーとしてFacebookページなるものを始めてみました。

正直、使い方をまだちゃんと理解していません。まぁこういうのはね、使いながら慣れていけばいいんですよ。ということで最初のうちはこのブログの更新情報くらいしか使わないと思いますが、もしよろしければ「いいね!」をお願いします!

facebook-icon

 

SNSボタンをFeedly風に統一したい!

Feedly風RSSボタン

せっかく作ったFacebookページとこのブログを連動させるべく、サイドバーにイイ感じのSNSボタンを貼り付けたいな~と思いながらここ数日は様々なブログやサイト様を巡回しておりました。

ついでにFeedlyの購読用ボタンを設置しようと公式に飛んでみると、このボタンがカッコイイんですよ!

(↑このボタンから登録できますのでこの機会に是非当ブログの更新情報もご購読くださいね!)

せっかくだからその他のSNSボタンを、このFeedlyボタンに揃えたいな~なんてググっていたところ、ありましたよありました。ナイスなブログが!

sabotem * blog、大変素敵なFeedly風RSSボタンを自作されてます。しかも「せっかくなので使ってくれ」とおっしゃっている!ということでありがたく使わせていただきました。(ご要りようの方は上記リンクから飛んでみてください。)

Feedly風Twitterボタン

Feedly風Twitterボタンはultra-prismからダウンロードさせていただきました。おありがとうございます。

さらにultra-prism様では、SNSボタンのサイドバーへの設置方法まで記載されてます。WordpressのテーマであるSTINGERでの設置方法として、sidebar.phpとstyle.cssの変更手順を詳しく説明されてますので、コチラもご要りようの方は本家のほうへ飛んでみてください。

ちなみにサイドバーへの設置についてもほぼ丸パクリさせていただきました。重ねてお礼申しあげます。

 

Feedly風Facebookボタンは自作

RSSボタンとTwitterボタンは上記のナイスなお二方のおかげで入手できましたが、肝心のFacebookボタンは見つかりませんでした。

ということで、慣れないながらも自作してみましたよ!

facebook-icon

facebook-icon-iine3

facebook-icon2

facebook-icon-iine!2

(※上記画像は著作権フリーです。右クリック→名前を付けて画像を保存でダウンロードしてください。)

思いっきり素人仕事なので見ての通り雑です。需要的にどうかと思いますが、ご自由にお使いください。(もちろん連絡は不要ですが、この記事にリンクでも貼って貰ったら嬉しいです。)

 

画像へのリンク先設置方法

画像に各リンク先を設置する方法ですが、Twitterを例に書いてみます。

設置したい場所(サイドバーや記事本文下など)のphpファイルを開き、以下のコードをコピペしてください。

(*印部分、Twitterアカウントと画像のURLはご自分の物に変更してください。)

サイズやレイアウトの詳しい変更方法等は、上記のultra-prismを御覧ください。

 

【まとめ】SNSコーナーひとまず完成

ということで、当ブログのサイドバー(スマホなら記事本文下)にこんな感じのSNSコーナーが完成しました。

sidebarsns

う~ん満足。

ではでは、しろうめず@ShiroUmezでした。




この記事がお役に立ちましたらシェアして頂けると嬉しいです。
  • 21 follow us in feedly
  • このエントリーをはてなブックマークに追加

 - Wordpress

  合わせて読みたい【Wordpress】関連記事

lgf01a201410011300
Googleアナリティクスで自分のアクセスを完全に除外する方法(スマホ対応)

ブログを始めてからもうすぐ4か月、未だに色々と理解できないまま・使いこなせないま …

gf01a201503230100
ブログを一から始め直すつもりだったのに結局無料ブログから引越しさせた件

レンタルサーバーを借りて独自ドメイン取得後、ワードプレスを設置していざ引越し! …

ブログカード表示されない
WordPress4.4にしたけどブログカードがちゃんと表示されない件(解決済・追記有)

こんにちは、しろうめず@ShiroUmezです。 先日リリースされたWordpr …

lgf01a201311131100
Googleアドセンス広告の位置と種類をPCとスマホで使い分ける方法

このブログはWordpressの大人気テーマであるstinger5を使わせてもら …

gf01a201502090800
ブログ初心者でもphpの知識は必要?WordPressカスタマイズ

無料のseesaaブログからレンタルサーバーへブログを引越してから結構経ちました …

ブログカード表示されない
WordPress4.4にてブログカードが正しく表示されない時の対処法 #stinger5

こんにちは、しろうめず@ShiroUmezです。 先日、WordPress4.4 …

Comment

  1. Androboooy より:

    ページ内を探してもFacebookページへのリンクがないなぁと思ってたところ、グッドタイミングの記事でした。
    Facebookって簡単そうで難しいですよね。

    仕事でクライアントのFacebookページを作ったり、ウェブサイトに「いいね」ボタンを設置したりすることがありますが、ウェブサイトやブログ上の「いいね」ボタンとFacebookページ上の「いいね」ボタンに直接関連がないことを説明して理解して貰うのにいつも苦労してます。

    ウェブサイト上の「いいね」の数とFacebookページの「いいね」の数が違いますけどぉ・・・
    いやいや、だからぁ・・・っていうやりとりなんてしょっちゅうです。

  2. shiroumez より:

    Androboooyさん
    コメントありがとうございます。
    Facebookの単語の難解さはほんとどーにかならんもんかと…。
    Facebookページへの「いいね!」=フォロー、個別ブログへの「いいね!」、「シェア」等々…
    単語の定義を覚えるのに必死です(汗)