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

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

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

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


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

Facebook
Social Media Tab (Facebook)
これはまともに動く。

Twitter
Social Media Tab (Twitter)
これも大丈夫。

Google+
Social Media Tab (Google+)
何も表示されない。

RSS feed
Social Media Tab (RSS feed)
これは OK。

Pinterest
Social Media Tab (Pinterest)
ミランダ・カー嬢から動かなくなってもうたw

Flickr
Social Media Tab (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 が必須になるので、事前に作っておく必要があります。)
私の場合はこんな感じ↓かな。

Facebook Like Box generator

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

・body タグの直後に貼る方
<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>
このブログでは、テーマファイルの header.php にある body 開始タグの直後に貼りました。

・表示する部分に貼る方
<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>
私の場合は WordPress サイドバーのウィジェット(テキスト)にそのままペタリ。
こんな感じで↓

sidebar widget text FB

これで完成!

2. Twitter – Fan Box Twitter

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

上記のリンクを押下すると…
Fan Box Twitter genarator
このような画面が表示されるので、”コードの作成” ボタンを押下します。

こんな感じで設定↓
Fan Box Twitter code

できたコード↓を、やはりウィジェットのテキストにペタリ。
<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>
完成!

3. Google+ – Google+ Followers Gadget

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

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

<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>

このコードの “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: 好きなボタンのデザインを選びます。
Feedly Button step1

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

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

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

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

今回は以上です!



Leave your comment

papaya

This is blog what is the inside of Papaya. Hum... nobody wants that, neither do I, maybe. I think with or without my empty brain and sometimes write down here.