ブログに SNS のフォロワーを表示するボックスを設置してみた(Feedly Follow Button もついでに)
当ブログではこれまで SNS の情報を表示するガジェットとして “Social Media Tabs” というプラグインを使ってサイドバーに埋め込んでいました。
ところがこいつが思うように動いてくれない。
◎これまで使っていた Social Media Tabs の動作について
当方の環境では、このプラグインはこんな感じ↓で見えます。
省スペースで見た目もいいし、結構気にいってたんですけどね。
Pinterest↓
ミランダ・カー嬢から動かなくなってもうたw
ということで自分の使っている 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 3: できあがったコードをコピーして適切な場所に貼り付けます。
当ブログの場合は、サイドバーのウィジェット(テキスト)のペタリと貼って完成!
あとはみなさん、ビシバシ押してくださいませ!
今回は以上です!
[amazon_enhanced asin=”B00DLVF3HU” /] [amazon_enhanced asin=”B004F9MZZ0″ /] [amazon_enhanced asin=”4797374756″ /] [amazon_enhanced asin=”4863670001″ /]
Fatal error: Uncaught Error: Call to undefined function related_posts() in /home/insidepapaya/insideofpapaya.com/public_html/wordpress/wp-content/themes/hueman-child/single.php:71 Stack trace: #0 /home/insidepapaya/insideofpapaya.com/public_html/wordpress/wp-includes/template-loader.php(106): include() #1 /home/insidepapaya/insideofpapaya.com/public_html/wordpress/wp-blog-header.php(19): require_once('/home/insidepap...') #2 /home/insidepapaya/insideofpapaya.com/public_html/index.php(17): require('/home/insidepap...') #3 {main} thrown in /home/insidepapaya/insideofpapaya.com/public_html/wordpress/wp-content/themes/hueman-child/single.php on line 71