Home > Facebook
現在、ブログや投稿を Google +1 や Facebook「いいね」、Retweet してもらうためのボタンがいろいろと公開されています。Blogger 関連のつぶやき（ネタ帳とも）の中にも、この手のガジェットの話題が増えてきたように思うので、ここで一挙公開しようと思います。
ローソンガジェット
導入方法については、かずうさんがまとめてくれていますので、リンク先からご確認ください。
Awesome Floating Social Subscribing Widget
で、みつけたシンブルなボタン。ライブデモはこちら。（本来のデモページは広告がポップアップしてくるので、うちのテストページにしています。）
導入方法
Blogger 管理画面「デザイン ＞ レイアウト」からサイドバーの「ガジェットを追加」リンクをクリック、「HTML/JavaScript」ガジェットを選択し、タイトルなしで、本文に以下のコードを入れて「保存」します。
コード中、色のついている文字列については、それぞれ自分のものに書き換えてください。
Blogger 管理画面「デザイン ＞ レイアウト」からサイドバーの「ガジェットを追加」リンクをクリック、「HTML/JavaScript」ガジェットを選択し、タイトルなしで、本文に以下のコードを入れて「保存」します。
<style>
.btsnts-flt-wdt{
position:fixed;
right:10px;
top:30%;
}
.btsnts-flt-wdt img{
float:right;
clear:right;
margin:1px;
-webkit-transition: all .0s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.btsnts-flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg);
transform: scale(1.2) rotate(6deg);
}
</style>
<!-- btsnts.blogspot.com -->
<div class="btsnts-flt-wdt">
<!-- Facebook -->
<a href="Facebook の URL" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglCXD9ydfglOOZMv3BuUVCy37NThnQZKs_vh7ZKicv4PWf1lIeF5yLeRAN2cVjBl97hxoZtvIiIz1TNHSTPOll-QoLPjIFZ03uCrLE-5mvWuHQfw8xZRAWJBbRuWWYl1640Amu/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="Twitter の URL" title="" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoqdNqZ2hg2B9J2mfcMiQZLTooRRkaH30MseqD0zabJjWecdTL2Aji5wl0wCBoKWFNuOtKhbJCwMj9-DkIVTvhmc5vvkleO0WlxgLxcbF8-2RWzYE7BHPKLsF2n2t4JlJsfbiD/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="ブログフィードの URL" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkuWJTRDuE9rqOk9-xWf32Hb8B5U1km3d0j5tDPd9EG1FJPXRdmoASQVlW0GESosq1WlNPOn6qJd4Sktdy2HSdgYddcIbby2p-iWTuotQa5IPyk3d1B8iLDrJ38_l2F_E5xbN/s1600/Rss.png" /></a>
<!-- Email -->
<a href="mailto:メールアドレス or コンタクトページの URL" title="Email me" target="_blank"><img alt="Email me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYU5cTi-ov-AJ-WZaF1XMbhkH9R8t7Y6pnhUt7Ez35ZFiAgv1e-BCX23uOU91_vpS_LJ1x_JoWdDbt35urD-meB541hXMek0kiMNRD5r4hAnRhZVZiW2f5PYiI4ica5OOvG57x/s1600/Mail.png" /></a>
</div>
<!-- End -->
.btsnts-flt-wdt{
position:fixed;
right:10px;
top:30%;
}
.btsnts-flt-wdt img{
float:right;
clear:right;
margin:1px;
-webkit-transition: all .0s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.btsnts-flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg);
transform: scale(1.2) rotate(6deg);
}
</style>
<!-- btsnts.blogspot.com -->
<div class="btsnts-flt-wdt">
<!-- Facebook -->
<a href="Facebook の URL" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglCXD9ydfglOOZMv3BuUVCy37NThnQZKs_vh7ZKicv4PWf1lIeF5yLeRAN2cVjBl97hxoZtvIiIz1TNHSTPOll-QoLPjIFZ03uCrLE-5mvWuHQfw8xZRAWJBbRuWWYl1640Amu/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="Twitter の URL" title="" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoqdNqZ2hg2B9J2mfcMiQZLTooRRkaH30MseqD0zabJjWecdTL2Aji5wl0wCBoKWFNuOtKhbJCwMj9-DkIVTvhmc5vvkleO0WlxgLxcbF8-2RWzYE7BHPKLsF2n2t4JlJsfbiD/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="ブログフィードの URL" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkuWJTRDuE9rqOk9-xWf32Hb8B5U1km3d0j5tDPd9EG1FJPXRdmoASQVlW0GESosq1WlNPOn6qJd4Sktdy2HSdgYddcIbby2p-iWTuotQa5IPyk3d1B8iLDrJ38_l2F_E5xbN/s1600/Rss.png" /></a>
<!-- Email -->
<a href="mailto:メールアドレス or コンタクトページの URL" title="Email me" target="_blank"><img alt="Email me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYU5cTi-ov-AJ-WZaF1XMbhkH9R8t7Y6pnhUt7Ez35ZFiAgv1e-BCX23uOU91_vpS_LJ1x_JoWdDbt35urD-meB541hXMek0kiMNRD5r4hAnRhZVZiW2f5PYiI4ica5OOvG57x/s1600/Mail.png" /></a>
</div>
<!-- End -->
コード中、色のついている文字列については、それぞれ自分のものに書き換えてください。
このガジェットのコードは HTML と CSS だけで書かれているので、画像を変えたりリンク先を変えたりといったカスタマイズがけっこう簡単にできると思います。
上掲のコード自体もすでにカスタマイズされたもので、オリジナルはこちらのようです（デモはこちら）。不思議な生き物が見えますね…。
Animated Sassy Bookmarking Gadget
で見つけた、ピョンと出てきて、シュッと引っ込むソーシャルボタンたち。ライブデモはこちら。動きがとても楽しいかと。
導入方法
Blogger 管理画面「デザイン ＞ レイアウト」からサイドバーの「ガジェットを追加」リンクをクリック、「HTML/JavaScript」ガジェットを選択し、タイトルなしで、本文に以下のコードを入れて「保存」します。
このコードは、書き換えは必要ありません。
Blogger 管理画面「デザイン ＞ レイアウト」からサイドバーの「ガジェットを追加」リンクをクリック、「HTML/JavaScript」ガジェットを選択し、タイトルなしで、本文に以下のコードを入れて「保存」します。
<!-- Start Shareaholic Sassy Bookmarks HTML - http://www.spiceupyourblog.com -->
<div class='shr_ss shr_publisher'>
</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type='text/javascript'>
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark",
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script><small><a href='http://www.spiceupyourblog.com/2012/05/animated-sassy-social-bookmark-gadget.html'>Animated Social Gadget</a> - <a href='http://www.spiceupyourblog.com'>Blogger And Wordpress Tips</a></small>
<!-- End Shareaholic Sassy Bookmarks script -->
<!-- End Shareaholic Sassy Bookmarks HTML - http://www.spiceupyourblog.com -->
<div class='shr_ss shr_publisher'>
</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type='text/javascript'>
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark",
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script><small><a href='http://www.spiceupyourblog.com/2012/05/animated-sassy-social-bookmark-gadget.html'>Animated Social Gadget</a> - <a href='http://www.spiceupyourblog.com'>Blogger And Wordpress Tips</a></small>
<!-- End Shareaholic Sassy Bookmarks script -->
<!-- End Shareaholic Sassy Bookmarks HTML - http://www.spiceupyourblog.com -->
このコードは、書き換えは必要ありません。
忍者おまとめボタン
で公開されているのは「忍者おまとめボタン」。これは、各サービスてバラバラに提供されているボタン類を一括して設定することができるサービス。一度ブログに貼り付けてしまえば、「忍者おまとめボタン」のページからレイアウトを変更することが可能です。変更のたびに Blogger テンプレートを編集しなくてもいいのが、非常に便利かと。
導入の仕方についてはは、すなふさんのページをご参考に。
Zenback
Twitter 経由で Kamimura さんにこれを愛用していると教えてもらいました。「関連するみんなの記事」や Zenback 関連のつぶやきが入ってしまうものの、たしかにこれでもソーシャルボタンをまとめることができますね。
Blogger ブログへの Zenback の導入については、romberg さんのページが詳しいです。
まだまだあった気がしますが、クリボウが今思い出せたのはこれだけ。おすすめのものがほかにもあれば、教えてもらえるとうれしいです。
Blogger 公式でも一応「+1 ボタン」ガジェットや「Google+ バッジ」ガジェットが用意されていますが、ほかのサービスのボタンとの統一感を出すのが難しいですね…。上記のソーシャルボタン詰め合わせガジェットを上手に使えば、ブログデザインもきっとよくなるはず。ということで、ぜひ一度お試しを。
＜更新＞
2012-06-25: Zenback の項目を追加しました。
