>--> Google+、Facebook、Twitter などのソーシャルボタンセットいろいろ | クリボウの Blogger Tips

クリボウの Blogger Tips

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

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

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

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

現在、ブログや投稿を 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="http://3.bp.blogspot.com/-zl6GiZgl17w/TzNgd4y2VKI/AAAAAAAAAwQ/yl5f0NXI_Ng/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="Twitter の URL" title="" target="_blank"><img alt="Follow me on Twitter" src="http://1.bp.blogspot.com/-oZXlXaVZ0NQ/TzNgee09cVI/AAAAAAAAAwY/UVUjQ9LlLuk/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="ブログフィードの URL" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="http://4.bp.blogspot.com/-v8adyG27cBs/TzNgdRZJzaI/AAAAAAAAAwM/k3HJWWhY0jY/s1600/Rss.png" /></a>
<!-- Email -->
<a href="mailto:メールアドレス or コンタクトページの URL" title="Email me" target="_blank"><img alt="Email me" src="http://3.bp.blogspot.com/-6ZNwVUqx9eo/TzNhk_KXPvI/AAAAAAAAAwk/uxsSpqb3sdI/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 の項目を追加しました。


スポンサードリンク：
お願い：
「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。　
このエントリーをはてなブックマークに追加

Comments:21

  1. ローソンガジェット導入してみました。
    ほんと、えらく簡単でしたね^^
    Twitterのフォローもありがとうございました。

    ReplyDelete

  2. どういたしましてです。こちらこそ、フォローありがとうございます。
    どの方法もやってみると意外と簡単だと思います。いろいろチャレンジしてみてください。

    ReplyDelete

  3. リンクありがとうございます。
    クリボウさんには、すごく相談したいことがあったりもするんですが、なかなか言い出せないですねｗ
    お世話になりすぎてて（・・；

    Awesome Floating Social Subscribing Widget、知らなかったのですが、見た目キレイですね(*ﾟ∀ﾟ)

    ReplyDelete

  4. はじめまして。
    ブロガー初心者のすずらんです。
    最近通常のテンプレートから、動的ビューを中心とした、
    （クリボウさんもブログで紹介されていた）ものに変更したのですが、
    その途端、海外からのアクセスが100倍に増えました。
    なにか原因とかお判りでしょうか。

    また、動的ビューにすると、
    投稿を個別にクリックしたとき、フッターに出る
    Google+、facebook, いいね の　アイコンがどうしても消せません。
    通常テンプレートならこれらはレイアウト設定で消せるのですが・・・

    以上2点、教えてください！！

    ReplyDelete

  5. この記事を参考に、忍者ボタンを設置させてもらいました。
    有難うございました。

    これからも色々勉強させてもらいます（＞＜）

    サークルに入れて下さいまして、有難うございました！

    ReplyDelete

  6. うまく、「いいね」ボタンがつけられなくて困ってて助かりました。
    忍者さんのおまとめボタンを設置しました。

    ReplyDelete

  13. http://jumperads.com.over-blog.com/2016/12/transfere-mecca
    http://jumperads.com.over-blog.com/2016/12/transfere-medina
    http://jumperads.com.over-blog.com/2016/12/cleaning-tanks-jeddah
    http://jumperads.com.over-blog.com/2016/12/transfere-dammam
    http://jumperads.com.over-blog.com/2016/12/jumperads.com.html

    ReplyDelete

  14. https://bucketlist.org/list/naklafshdmam/
    https://bucketlist.org/idea/1S24/jumperadscom/#.WIeDl7l97Z6
    https://bucketlist.org/idea/1S2M/%D8%B4%D8%B1%D9%83%D8%A9%20%D9%86%D9%82%D9%84%20%D8%A7%D8%AB%D8%A7%D8%AB%20%D8%A8%D8%AC%D8%AF%D8%A9/#.WIeEqLl97Z4
    https://bucketlist.org/idea/1S44/%D8%B4%D8%B1%D9%83%D8%A7%D8%AA%20%D8%AA%D9%86%D8%B8%D9%8A%D9%81%20%D8%A7%D9%84%D8%AE%D8%B2%D8%A7%D9%86%D8%A7%D8%AA%20%D8%A8%D8%A7%D9%84%D9%85%D8%AF%D9%8A%D9%86%D8%A9%20%D8%A7%D9%84%D9%85%D9%86%D9%88%D8%B1%D8%A9/
    https://bucketlist.org/idea/1SDK/%D8%B4%D8%B1%D9%83%D8%A7%D8%AA%20%D9%85%D9%83%D8%A7%D9%81%D8%AD%D8%A9%20%D8%AD%D8%B4%D8%B1%D8%A7%D8%AA/
    https://bucketlist.org/idea/1Tir/%D8%B4%D8%B1%D9%83%D8%A9%20%D8%AA%D9%86%D8%B8%D9%8A%D9%81%20%D9%81%D9%84%D9%84%20%D8%A8%D9%8A%D9%86%D8%A8%D8%B9/#.WIiVRrl97Z4

    ReplyDelete

  16. An fascinating discussion is value comment. I think that it is best to write extra on this matter, it won't be a taboo topic however generally people are not enough to talk on such topics.
    http://gooddownloadablefreeware.ru

    ReplyDelete

  17. We made it easier for you to add a profile picture to a prospect record. download music Its a secure workspace on your iPad to get work done.

    ReplyDelete

  18. Multiple devices running NoteMaster can share notes by syncing with the same account. http://purbleplacedownloadwindowsxp.com
    Reordenao de itens simplesmente arrastando e soltando (sem necessitar entrar em modo de edio).

    ReplyDelete

  19. It was the first country music awards program held by a major organization, propelling country music into the public spotlight for the first time. downlodable ebooks Simply set up your free Gamedock account by selecting a username and password.

    ReplyDelete

  20. Hi dear, I like your post so much, and it is very good. Hope that we can communicate with each other. I want to introduce an what is aso, I try it and I feel it is so good to us beginners.

    ReplyDelete

  21. SubRosaSoft FTPDroplet II? is a tool to help you upload files to web servers (FTP Servers) quickly and easily. downlodable manuals Do my eyes deceive me, or is Senna's Lotus sounding rough.

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.