>--> 2012-06 | クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

Home > 2012-06

2012-06

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

Posted at: 2012-06-24 Label: , , , , , , 86

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


ローソンガジェット

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

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

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


Awesome Floating Social Subscribing Widget

Awesome Floating Social Subscribing Widget

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

導入方法

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 -->

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

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

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


Animated Sassy Bookmarking Gadget

Animated Sassy Bookmarking Gadget

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

導入方法

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","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>
<!-- 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

Zenback

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

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


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

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


＜更新＞

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

テンプレート変更しました

Posted at: 2012-06-17 Label: 12

いつの間にか、このブログも読み込みに随分時間がかかるようになってしまっていたので、貼り付けているガジェットを精選しないといけないかな？と思っていたんですが、ならばいっそのこと！と一念発起して、テンプレートまるごと変更してみました。

クリボウの Blogger Tips テンプレート変更

左が古いテンプレートで、右が新しいのです。
シンプルで軽いものをという基準で探していたところ、
Blogger Templates で見つけたのが、このテンプレート。

ちょこちょこと自分の好みに合うようにカスタマイズしてみましたが、どうでしょうか？
クリボウ的には、読み込みが速くなったのはもとより、投稿本文のエリアが広くなったのが一番うれしいです。

みなさんも、ゴテゴテと重くなってしまったテンプレートを、夏に向けて少し模様替えしてみてはいかがでしょうか。

Blogger 関連のつぶやき 2012-05

Posted at: 2012-06-02 Label: 3

Google+ ページ「クリボウの Blogger Tips」および、Facebook ページ「クリボウの Blogger Tips」で流した先月の Blogger 関連のつぶやきを、ここにまとめておきます。

リアルタイムで読みたい！という人は、上記リンク先からぜひ、サークルに追加したり「いいね！」したりしてください。

先月は、他のブログサービスからの引っ越しネタが多かったですね。別途こちらにもまとめているので、参考してもらえたらと思います。

このブログでは毎月一度、記事にしたネタや記事にしきれなかったニュースを載せています。最新のニュースについては、Google+ ページもしくは、Facebook ページでご確認ください。

© 2005-2014 Kuribo. Powered by Blogger.