【Google Blogger】FacebookやTwitterなどのソーシャルボタン･ガジェットをブログページに設置

クリボウのBlogger Tipsの「Google+、Facebook、Twitter などのソーシャルボタンセットいろいろ」を拝見して自分のブログにボタン・ガジェットを設置しようと思い、チャレンジしてみました。紹介されているいくつかのサイトを閲覧して色々目移りしたのですが、今回はHelper Bloggerサイトで見つけたものを採用。ボタン・ガジェットで気になるものが２つあるのですが、帯に短しタスキに長しという感じです。今回、設置したいアイコンはFacebook、Twitter、Google+、それからFeedアイコンの４つなのですが、「Awesome Floating Social Subscribing Widget」にはGoogle+がなく、「Spinning Social Icons」にはホームページの外側に設置する機能がないので、足して2で割ったものを設置してみたいと思い、ちょっとやってみました。

• Awesome Floating Social Subscribing Widget
Webページの外側左サイドに表示され、アイコンにポインタが移動するとちょっと大きくなるガジェット






<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="http://www.facebook.com/btsnts" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOzr-szhiaYNxbmpAhT0jiY9FrOpytwmnVZrQz_SBdwvERL_4wDXRY9c15i1aNGz6Ez5Oa4s6nYApGeo6pCnLpongY70u5vOq8D0Nron5eq8EgKsxwP60p35PB2DwqQJwpUWx4/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="http://twitter.com/rahulippar" title="" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWRfgW0v2pK78IEqdrsdEMxnCOz5AfLMQ5JId5E87juLiqARIFKL22wxDTnxhh5cjUXHHSg_Fnx5prZqau39kCqqOjawykuNJSBI5sJbRttG2Tb322OgAOUuOFD59CWLjo-6EF/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="http://feeds.feedburner.com/btsnts" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi09FX18cXeJ0vbg-J1A-cDDgcC4vulMcRTkTF1IfbDDX5XACuIB0S5h0aDB5lfdjtwSkbYRbJE06pFH26xS273Qdej37kJRRIoL9s9jlGU2NLHeK-4F9SkGoVeCiV9wMPTpXHI/s1600/Rss.png" /></a>
<!-- Email -->
<a href="Your Contact Page URL" title="Email me" target="_blank"><img alt="Email me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPYtV0JswUZibPgUeQ0JUgbO5VK8yL6wjFfTlArFe0JqqA0IWuKmJjjBgz239Jz8OjNRtpOHEAJQsx2O1M27Qr75nvUUxV_N1T0jS-nnqNuhldGfH4APlKF3cnIQ5a_mf0ITPR/s1600/Mail.png" /></a>
</div>
<!-- End -->



• Spinning Social Icons
Webページ中の任意の場所に表示され、アイコンにポインタが移動すると回転するガジェット






<style>p#hb_socialicons img { /* Spinning Social Icons Widget By HelperBlogger */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
p#hb_socialicons img:hover {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
/* Spinning Social Icons Widget By HelperBlogger */
</style> <center><p id="hb_socialicons">
    <a href="http://www.facebook.com/btsnts/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ZCebk0iRyFnXfQ8zxqBbygo2VDtZhLLx9e1TCYLcfs8dqMmK99dC7qQzOCxnJ5HJLJe7B0NUzwMMVEVlPs3ZpiW-boCfz3bqMdLPQA3Dh7X1P1CYL2xj8qdJx-enSfTA5__r/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVMOggHpmXE1x4ZCiM6JP3ug40qaqtYV2zMBO074beTieW-QZEONiPZ9uFEhETx9TmQ1qN7InzvifQYMsI4HHVtgXmIJAPqQ27lUcMent5mCvX7VjbBxxWGsQ5QkzzMJwzL7H/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO8Qmo66cuhqZ1kajgTZQYQDh4PWM31rZ3qfqGFxZpsnLneIvpJg15ZC6OjWifVYQylfLGIQYI2MKFSxntqspwQ1OVIf34KWjsZDjtXGutxgM-4rsow6HnUpuxNtNY_bHpxZ_u/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrRqR9FV-VwMy2G_Vw_Hrav0Ph_ZwYztbKHKi9_RVbyZ2UC5XfeQkfDqtPx9rHsdrem7UGw5eJL0KybH1MldpSdYkBXiAKaYbX3O0iHk9yWmTCpwtL4YOluD1uTIr89-vtINcH/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqiPiISOIUjekzkOZHcZ22QocUAbjf_h5AHEGkBjgf1IzzHkszMJmZueUCOBledb5tfsK8i8F5SQqyC-29pnMJAWk0VXZk6AFDueQU8jGEOWB97SDpO3CgY22slmV59-aRBGY8/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

使いたいガジェットのコードをそのまま（URLは自分のものに書き換え）Blogger管理画面の「デザイン ＞ レイアウト」で任意の「ガジェットを追加」の「編集」をクリック、「HTML/JavaScript」ガジェットを選択して、タイトルは空欄のまま上記のコードを入れれば各々のガジェットは完成です。
今回は「Awesome Floating Social Subscribing Widget」の体裁で「Spinning Social Icons」を設置したいので2つのコードをミックスしました。変更点は下記のCSSで書かれているアイコンの動作部分と表示するアイコンのコード部分を「Spinning Social Icons」側コードに置き換えました。


<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: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
</style>
<!-- btsnts.blogspot.com -->
<div class="btsnts-flt-wdt">
<!-- Facebook -->
    <a href="http://www.facebook.com/btsnts/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ZCebk0iRyFnXfQ8zxqBbygo2VDtZhLLx9e1TCYLcfs8dqMmK99dC7qQzOCxnJ5HJLJe7B0NUzwMMVEVlPs3ZpiW-boCfz3bqMdLPQA3Dh7X1P1CYL2xj8qdJx-enSfTA5__r/s1600/helperblogger.com-facebook.png" /></a>
<!-- Twitter -->
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVMOggHpmXE1x4ZCiM6JP3ug40qaqtYV2zMBO074beTieW-QZEONiPZ9uFEhETx9TmQ1qN7InzvifQYMsI4HHVtgXmIJAPqQ27lUcMent5mCvX7VjbBxxWGsQ5QkzzMJwzL7H/s1600/helperblogger.com-twitter.png" /></a>
<!-- Google＋ -->
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO8Qmo66cuhqZ1kajgTZQYQDh4PWM31rZ3qfqGFxZpsnLneIvpJg15ZC6OjWifVYQylfLGIQYI2MKFSxntqspwQ1OVIf34KWjsZDjtXGutxgM-4rsow6HnUpuxNtNY_bHpxZ_u/s1600/helperblogger.com-google_plus.png" /></a>
<!-- RSS -->
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrRqR9FV-VwMy2G_Vw_Hrav0Ph_ZwYztbKHKi9_RVbyZ2UC5XfeQkfDqtPx9rHsdrem7UGw5eJL0KybH1MldpSdYkBXiAKaYbX3O0iHk9yWmTCpwtL4YOluD1uTIr89-vtINcH/s1600/helperblogger.com-rss.png" /></a>
<!-- Youtube -->
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqiPiISOIUjekzkOZHcZ22QocUAbjf_h5AHEGkBjgf1IzzHkszMJmZueUCOBledb5tfsK8i8F5SQqyC-29pnMJAWk0VXZk6AFDueQU8jGEOWB97SDpO3CgY22slmV59-aRBGY8/s1600/helperblogger.com-youtube.png" /></a>
</div>
<!-- End -->

上記のコードをBloggerの「レイアウト」で「ガジェットの追加」を行ないます。上記の下線コード部分は自分のURLにそれぞれ置き換えました。



1. Bloggerのダッシュボード > その他のオプション > レイアウト
「ガジェットを追加」をクリックします。どこに配置されている「ガジェットを追加」枠でもいいです。





2. ガジェットを追加> HTML/JavaScript
「ガジェットを追加」のメニュー画面が別ウインドウで表示されます。「HTML/JavaScript」を探して「＋」ボタンをクリックします。





3. コンテンツにコードをペースト、保存
「HTML/JavaScript」の設定画面で「コンテンツ」枠にコードをペーストします。「タイトル」は空欄のまま「保存」ボタンをクリックします。






News Source Site

• Google+、Facebook、Twitter などのソーシャルボタンセットいろいろ　－ クリボウのBlogger Tips
• Awesome Floating Social Subscribing Widget With Cool Hover Effect For Blogger　－ Helper Blogger
• SpinningSocial Icons With CSS3 For Blogger　－ Helper Blogger