ブログに SNS のフォロワーを表示するボックスを設置してみた（Feedly Follow Button もついでに）

当ブログではこれまで SNS の情報を表示するガジェットとして “Social Media Tabs” というプラグインを使ってサイドバーに埋め込んでいました。

ところがこいつが思うように動いてくれない。

◎これまで使っていた Social Media Tabs の動作について

当方の環境では、このプラグインはこんな感じ↓で見えます。
省スペースで見た目もいいし、結構気にいってたんですけどね。

Facebook↓

これはまともに動く。

Twitter↓

これも大丈夫。

Google+↓

何も表示されない。

RSS feed↓

これは OK。

Pinterest↓

ミランダ・カー嬢から動かなくなってもうたw

Flickr↓

ダメ。

ということで自分の使っている SNS の半分がうまく動作しません。

ということで…
よく言われるように、できるだけプラグインは使わない方向でいきたいので、この際 Social Media Tabs は切ることにしました。
代わりに Facebook, Twitter, Google+ のフォロワーを表示するガジェットを各々単品で埋め込むことにしました。
プラグイン減らすことで少しは動作軽くなるかしら。

◎SNS のフォロワーを表示するガジェットを埋め込む

要は Facebook で言うところの Like Box を各 SNS で作りたい！ということです。
実際どのように作っていったかをご紹介します。

1. Facebook – Facebook Like Box

Facebook には標準で Like Box というのが用意されているのでそれをそのまま使います。
Facebook Developers のページに作成画面があります。
（Facebook のアプリID が必須になるので、事前に作っておく必要があります。）
私の場合はこんな感じ↓かな。

“Get Code” のボタンを押すと貼り付けるためのコードが出てきます。
HTML5 のコードはこんな感じ↓で2部に分かれます。

・body タグの直後に貼る方
[php]
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=XXXXXXXXXXXXXXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
[/php]
このブログでは、テーマファイルの header.php にある body 開始タグの直後に貼りました。

・表示する部分に貼る方
[php]
<div class="fb-like-box" data-href="http://www.facebook.com/insideofpapaya" data-width="300" data-height="300" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>
[/php]
私の場合は WordPress サイドバーのウィジェット（テキスト）にそのままペタリ。
こんな感じで↓

これで完成！

2. Twitter – Fan Box Twitter

Facebook Like Box のような機能が Twitter にもありました。
Fan Box Twitter というのですが、こちらは Twitter 公式というわけではありません。

上記のリンクを押下すると…

このような画面が表示されるので、”コードの作成” ボタンを押下します。

こんな感じで設定↓

できたコード↓を、やはりウィジェットのテキストにペタリ。
[php]
<div id="twitter-box"></div>
<script>
var tw_user = ‘papaya_papaya’;
var tw_width = 300;
var tw_height = 300;
var no_face = 15;
(function() {
var tw_box = document.createElement(‘script’); tw_box.type = ‘text/javascript’; tw_box.async = true;
tw_box.src = ‘//68.178.129.132/twitter/tw.js’;
(document.getElementsByTagName(‘head’)[0] || document.getElementsByTagName(‘body’)[0]).appendChild(tw_box);
})();
</script>
[/php]
完成！

3. Google+ – Google+ Followers Gadget

Google+ は Google+ Followers Gadget というページがあったので、そこから拝借。

コードは上記ページに書かれている通り。

[php]
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/XXXXXXXXXXXXXXXXXXXXX" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {‘lang’: ‘en’};
var po = document.createElement(‘script’);
po.type = ‘text/javascript’;
po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(po, s);
})();
</script>
[/php]

このコードの “XXXXXXXXXXXXXXXXXXXXX” の部分を自分の ID に変えれば OK。
ちなみに最近導入されたカスタム URL でも大丈夫です。
（私の場合だと、https://plus.google.com/+takujiishikawa という具合）

それと私の場合は、3行目の “script type=”text/javascript”　～　/script” は、すでに別のところでコーディングしているので不要でした（2重に書く必要がない）。

これも WordPress のウィジェットにペタリとして完成！

ふぅ、これで作業終わりです。

今、皆さんにご覧いただいているウィジェットが結果そのものです。
それらしく出てるでしょ。

【おまけ】Feedly Follow Button も付けちゃう

Google Reader 亡き今、後継はやっぱり Feedly でしょ！？ということで、今さらですが Feedly のフォローボタンも付けました。

Feedly Button のページに行きます。

step 1: 好きなボタンのデザインを選びます。

step 2: ブログのフィードの URL を入力します。

step 3: できあがったコードをコピーして適切な場所に貼り付けます。

当ブログの場合は、サイドバーのウィジェット（テキスト）のペタリと貼って完成！

あとはみなさん、ビシバシ押してくださいませ！

今回は以上です！

[amazon_enhanced asin=”B00DLVF3HU” /] [amazon_enhanced asin=”B004F9MZZ0″ /] [amazon_enhanced asin=”4797374756″ /] [amazon_enhanced asin=”4863670001″ /]