Pocket
LINEで送る

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

likebox3

コンテンツ

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機能をブログに導入したい|* ̄∇ ̄|

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

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の出来上がりとなりました。

likebox-google+1
最後に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風のライクボックスが出来上がりました!
likebox-google+2
上記プログラミングコードのご利用は自己責任でお願い致します

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

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

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

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

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

比較表:説明

はみ出し情報

コメント欄

1件のコメントがあります!

  1. 管理人 より:

    今年の6/23から
    Facebookの「Like Box」が「Page Plugin」に
    変更になるようです。

この記事はこんな人が書いています!

  • サイト管理人紹介
  • 管理人が現在気になっている青汁が
  • サンスター 粉末青汁 やわたのおいしい青汁 です。
  • 記事に間違いがありましたら、是非お知らせ下さい。
  • 確認の上、直ちに修正します。
  • またコメントも募集中です。

サイトご利用にあたって

  • 当サイトで公開している記事に掲載されている情報は
  • 自己責任でご活用下さい。
  • 特に医療・健康に関する情報は、ある人には最適(今現在)でも
  • あなたに最適とは限りません。
  • 必ずご自身の状態と照らし合わせて
  • 自分に最適だと判断してから掲載情報をご活用下さい。

スポンサーリンク

  • 「これは使ってみてあまり良くなかった」という
  • 製品・サービスがありましたら、是非お知らせ下さい。
  • 確認の上、お悩み解決製品・サービス一覧表への
  • 今後の掲載の継続を再度検討します。
  • また「これは使ってみてとても良かった」という
  • 製品・サービスがありましたら、こちらも是非お知らせ下さい。
サイトご利用にあたって

関連記事を見る