Google+でもFacebookのLike Boxを7割方同じ形でブログに設置!
デザインに合わせ背景色もCSSで簡単カスタマイズ!
コンテンツ
目次
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サイトを作れるようになりたいがプログラミング・デザインをどうやって学んでいったらよいか悩んでいる方におすすめです。 |
![]() ![]() |
特徴:実務で通用するスキル全般を短期間で習得・上場企業や有力ベンチャーのエンジニアが講師を担当・受講生が本気でエンジニア就職・転職を実現できるよう より現場評価いただける教育がおすすめポイント。現役エンジニアによるプログラミングの個別指導サービスを探していて悩んでいる方におすすめです。 |
![]() ![]() ![]() |
特徴:東京での新生活をスムーズに始める・住居探しと仕事探しをする手間が省ける・何かとお金がかかる東京の生活で初期費用を抑えるがおすすめポイント。東京で新生活を始めたい・シェアハウスに興味がある・東京に飛び出したいが不安で一歩が踏み出せないと悩んでいる方におすすめです。 |
![]() ![]() ![]() |
特徴:漫画も面白い(同じ大学の研究室で学び、派遣エンジニアという職についた2人が10年ぶりに再開するところからスタートするストーリー)・社員の平均年収585万円!業界トップクラスの給与水準・自信があるからこそマージン率を公開がおすすめポイント。現在の勤め先に悩んでいて転職を考えている方におすすめです。 |
![]() ![]() ![]() |
特徴:飲食店、美容院、ネイルサロンなどのお店だけではなく 塾、事務所、個人事業主、クリエイター、アイドルまで、 様々な業種のホームページが簡単に作れる・4,000通りものデザインパターン・初心者だけでなく、中・上級者の方も満足がおすすめポイント。ブログ感覚で手軽にお店のホームページを作成したいと考えているが、その方法が分からない!と悩んでいる方におすすめです。 |

当サイトの目標
- 管理人はこれまでの人生で
- 「知らないこと」で悔しい思いを何度もしてきました。
- だから、日々調べたこと・学んだことを
- ブログにまとめて発信しています。
- ここでまとめた情報が少しでも役立てばとても嬉しいです。
- 記事に間違いがありましたら、是非お知らせ下さい。
- 確認の上、直ちに修正します。
- またコメントも募集中です。(●´ω`●)
サイトご利用にあたって
- 当サイトで公開している記事に掲載されている情報は
- 自己責任でご活用下さい。
- 特に医療・健康に関する情報は、ある人には最適(今現在)でも
- あなたに最適とは限りません。
- 必ずご自身の状態と照らし合わせて
- 自分に最適だと判断してから掲載情報をご活用下さい。
スポンサーリンク
- 「これは使ってみてあまり良くなかった」という
- 製品・サービスがありましたら、是非お知らせ下さい。
- 確認の上、お悩み解決製品・サービス一覧表への
- 今後の掲載の継続を再度検討します。
- また「これは使ってみてとても良かった」という
- 製品・サービスがありましたら、こちらも是非お知らせ下さい。

関連記事を見る
-
【ホームページ】Twitterカードをトップページに設定。
-
【ホームページ・ブログ】Googleのモバイルフレンドリーテストに挑戦しました!
-
WordPressでimg画像にpタグがついた時の対策。
-
【移行記録9】ワードプレス開設半年経過:メリットデメリットまとめ。
-
【ホームページ・ブログ】HTMLのブロック要素<div>タグとは?
-
【ホームページ・ブログ】親要素からはみ出た子要素を隠すoverflow:hidden;
-
【ホームページ・ブログ】<ul><li>とfloat:left;で横並び!
-
Google+のカスタムURLを取得しました!
-
【移行記録8】独自ドメイン+WordPressパーマリンク設定→URL50%短縮!
-
【移行記録7】ダウンロードしたWordPress本体→レンタルサーバーのどこに設置?
-
【移行記録6】ダウンロードしたWordPress本体→ローカル環境のどこに設置?
-
【移行記録5】WordPress始めるならファイルのダウンロードから!
-
【移行記録4】レンタルサーバーとローカル環境。
-
【移行記録3】ミラーサイト削除→Googleペナルティ防衛!
-
【移行記録2】TeraPadとメモ帳の違いは大事!
-
Google検索結果画面の著者情報:開設5日目で表示成功!
1件のコメントがあります!
今年の6/23から
Facebookの「Like Box」が「Page Plugin」に
変更になるようです。