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

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

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

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

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

Feedly風RSSボタン

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

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

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

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

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

Feedly風Twitterボタン

Feedly風Twitterボタンはultra-prism様（2017.4月時点でリンク切れ中の模様）からダウンロードさせていただきました。おありがとうございます。

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

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

Feedly風Facebookボタンは自作

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

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

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

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

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

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

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

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

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

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

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

う～ん満足。

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