Google+でもFacebookのLike Boxを７割方同じ形でブログに設置！

Pocket

デザインに合わせ背景色もCSSで簡単カスタマイズ！

likebox3

コンテンツ

Contents

1 コンテンツ
2 How to Add a Google+ Like Box！
3 FacebookのLike Box機能をブログに導入したい｜*￣∇￣｜
4 今回お世話になった記事はこちら！
5 出来上がった疑似Like BoxをCSSでデザインして本家に近づける
6 記事まとめ [Google+版のLike Box作成方法]
7 ライフハックお悩み解決製品・サービスの情報をまとめました↓

How to Add a Google+ Like Box！

I wanted to add a Like Box to my blog for a long time.However I have no plans to use Facebook for a variety of reasons.

So I checked tips on the Internet.This is the answer!

Add Customized Google Plus Followers Gadget to Blogger

In addition I designed this Like Box with CSS.Thank you for reading!

FacebookのLike Box機能をブログに導入したい｜*￣∇￣｜

■ フェイスブックの公式サイトから画像をお借りしました。

Facebookを利用しているブログにお邪魔すると、サイドバーにLike Boxが設置されている事があります。

ブログ読者から頂いた「いいね!」を見える化する事で、多くの人が利用している安心感とブログが賑わっている事をPR出来るので、是非導入したいと以前から考えていました。

ただしばらくFacebookを利用するつもりがなかったので、Google+でも同じような事ができないかと探していた所、やっと打開策に辿り着く事ができました！

今回お世話になった記事はこちら！

らくがきちょう様
FacebookのLike BoxのようなGoogle+の Followers Boxを設置できる「Google Plus Followers Gadget」

記事で紹介されているリンク先に早速飛んで、ジェネレーターでLike BoxのGoogle+バージョンを制作しました。

出来上がった疑似Like BoxをCSSでデザインして本家に近づける

リンク先のジェネレーターは非常に秀逸なつくりでエラーもなく、あっという間にGoogle+版のLike Boxの出来上がりとなりました。

最後にCSSでデザイン調整をして終わります。
ジェネレーターが作ってくれたコードがこちらになるので

<a href="http://newbloggertips.com"><img alt="Tips Tricks And Tutorials" src="http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png" /></a><div class="g-plus" data-action="followers" data-height="疑似LikeBoxの高さ" data-href="https://plus.google.com/Google+の自分のプロフィールID" data-source="blogger:blog:followers" data-width="疑似LikeBoxの横幅"> </div><script type="text/javascript">// <![CDATA[
(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>

ここにdivタグとidを付け足します。

<div id="好きなIDを設定"><div id="もう一つ別のIDを設定">Google+もチェック</div><a href="http://newbloggertips.com"><img alt="Tips Tricks And Tutorials" src="http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png" /></a><div class="g-plus" data-action="followers" data-height="疑似LikeBoxの高さ" data-href="https://plus.google.com/Google+の自分のプロフィールID" data-source="blogger:blog:followers" data-width="疑似LikeBoxの横幅"> </div><script type="text/javascript">// <![CDATA[
(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></div>

骨組みとなるHTMLを作ったら見た目を整えるCSSで完成させます。

/* 外観はブログのデザインに合わせて微調整をお願い致します。 */
 
#設定した好きなID{
 border: 1px solid #好きな色;
}
 
#もう一つの別のID{
 background-color: #好きな色;
 color: #fff;
 font-size: 15px;
 padding-left: 3px;
 padding-top: 1px;
 padding-bottom: 1px;
 margin-bottom: -10px;
}

これで(ほぼ類似の)Facebook風のライクボックスが出来上がりました！

■ 上記プログラミングコードのご利用は自己責任でお願い致します

記事まとめ [Google+版のLike Box作成方法]

これでTwitterに続いてGoogle+のハコも出来上がったので、年内のGoogle+サークル800人を目指して頑張って行こうと思います！

■ 2013/10/16に800人の方からフォローしていただく事が出来ました。本当に有難うございます！(｡´ー｀｡)

ライフハックお悩み解決製品・サービスの情報をまとめました↓

製品・サービスの公式ページを見る	こんな製品・サービスです
ウェブキャンプ	特徴:Webスキルのパーソナルジム・いつでも質問＆豊富な回答・オーダーメイドカリキュラムがおすすめポイント。自分でWebサイトを作れるようになりたいがプログラミング・デザインをどうやって学んでいったらよいか悩んでいる方におすすめです。
コードキャンプ	特徴:実務で通用するスキル全般を短期間で習得・上場企業や有力ベンチャーのエンジニアが講師を担当・受講生が本気でエンジニア就職・転職を実現できるようより現場評価いただける教育がおすすめポイント。現役エンジニアによるプログラミングの個別指導サービスを探していて悩んでいる方におすすめです。
東京での就業と住まいを同時提供のTokyoDive	特徴:東京での新生活をスムーズに始める・住居探しと仕事探しをする手間が省ける・何かとお金がかかる東京の生活で初期費用を抑えるがおすすめポイント。東京で新生活を始めたい・シェアハウスに興味がある・東京に飛び出したいが不安で一歩が踏み出せないと悩んでいる方におすすめです。
リツアンSTCは、エンジニアに特化した人材紹介会社（派遣・業務委託・正社員紹介）です！	特徴:漫画も面白い(同じ大学の研究室で学び、派遣エンジニアという職についた2人が10年ぶりに再開するところからスタートするストーリー)・社員の平均年収585万円！業界トップクラスの給与水準・自信があるからこそマージン率を公開がおすすめポイント。現在の勤め先に悩んでいて転職を考えている方におすすめです。
こんなに簡単！店舗向けホームページがすぐ始められる「グーペ」	特徴:飲食店、美容院、ネイルサロンなどのお店だけではなく塾、事務所、個人事業主、クリエイター、アイドルまで、様々な業種のホームページが簡単に作れる・4,000通りものデザインパターン・初心者だけでなく、中・上級者の方も満足がおすすめポイント。ブログ感覚で手軽にお店のホームページを作成したいと考えているが、その方法が分からない！と悩んでいる方におすすめです。