Google+、Facebook、Twitter などのソーシャルボタンセットいろいろ

現在、ブログや投稿を Google +1 や Facebook「いいね」、Retweet してもらうためのボタンがいろいろと公開されています。Blogger 関連のつぶやき（ネタ帳とも）の中にも、この手のガジェットの話題が増えてきたように思うので、ここで一挙公開しようと思います。

ローソンガジェット

ローソンガジェット 6 色のテーマ

ローソンガジェット｜エンタメ・キャンペーン｜ローソン

で、公開されているローソンの PR 用ガジェット。Twitter、Facebook、はてなブックマークのボタンがブログの左側に並びます。選択できる色のテーマは 6 つ。いろんな配色のブログに対応できるんじゃないでしょうか。

導入方法については、かずうさんがまとめてくれていますので、リンク先からご確認ください。

かずうの気まま日記: 【ブログパーツ】『ローソンガジェット』設置で３つのお得を体験する！（LAWSON GADGET）

Awesome Floating Social Subscribing Widget

Awesome Floating Social Subscribing Widget With Cool Hover Effect For Blogger ~ Helper Blogger

で、みつけたシンブルなボタン。ライブデモはこちら。（本来のデモページは広告がポップアップしてくるので、うちのテストページにしています。）

導入方法

Blogger 管理画面「デザイン＞レイアウト」からサイドバーの「ガジェットを追加」リンクをクリック、「HTML/JavaScript」ガジェットを選択し、タイトルなしで、本文に以下のコードを入れて「保存」します。

コード中、色のついている文字列については、それぞれ自分のものに書き換えてください。

このガジェットのコードは HTML と CSS だけで書かれているので、画像を変えたりリンク先を変えたりといったカスタマイズがけっこう簡単にできると思います。

上掲のコード自体もすでにカスタマイズされたもので、オリジナルはこちらのようです（デモはこちら）。不思議な生き物が見えますね…。

Animated Sassy Bookmarking Gadget

Animated Sassy Social Bookmark Gadget For Blogger | Spice Up Your Blog

で見つけた、ピョンと出てきて、シュッと引っ込むソーシャルボタンたち。ライブデモはこちら。動きがとても楽しいかと。

<div class='shr_ss shr_publisher'>

</div>


<script type='text/javascript'>
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</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>

このコードは、書き換えは必要ありません。

忍者おまとめボタン

忍者おまとめボタンの例

Twitter、Facebookボタンなどをまとめて簡単設置｜忍者おまとめボタン

で公開されているのは「忍者おまとめボタン」。これは、各サービスてバラバラに提供されているボタン類を一括して設定することができるサービス。一度ブログに貼り付けてしまえば、「忍者おまとめボタン」のページからレイアウトを変更することが可能です。変更のたびに Blogger テンプレートを編集しなくてもいいのが、非常に便利かと。

導入の仕方についてはは、すなふさんのページをご参考に。

[blogger]ひとつひとつ設置は面倒だ！ソーシャルボタンサービス「忍者おまとめボタン」を設置してみる。 - sunabox

Zenback

Zenback

Zenback

Twitter 経由で Kamimura さんにこれを愛用していると教えてもらいました。「関連するみんなの記事」や Zenback 関連のつぶやきが入ってしまうものの、たしかにこれでもソーシャルボタンをまとめることができますね。

Blogger ブログへの Zenback の導入については、romberg さんのページが詳しいです。

Bloggerにzenbackを美しく導入する方法-swordsmith

まだまだあった気がしますが、クリボウが今思い出せたのはこれだけ。おすすめのものがほかにもあれば、教えてもらえるとうれしいです。

Blogger 公式でも一応「+1 ボタン」ガジェットや「Google+ バッジ」ガジェットが用意されていますが、ほかのサービスのボタンとの統一感を出すのが難しいですね…。上記のソーシャルボタン詰め合わせガジェットを上手に使えば、ブログデザインもきっとよくなるはず。ということで、ぜひ一度お試しを。

＜更新＞

2012-06-25: Zenback の項目を追加しました。

スポンサードリンク：

お願い：

「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。　