[blogger]スクロールしてもついてくるソーシャルボタン、bloggerですぐ使えるようにしてみました。

こんにちは、すなふです。

また懲りもせずソーシャルボタンのネタですよ！
今回は、スクロールしてもついてくるソーシャルボックスの作り方です。

参考サイト

スクロールしてもついてくる！ブログにソーシャルボックスをつけよう。 | ウェビメモ

ウェビメモ製作時に、ページをどんなにスクロールしても横にくっついて来るソーシャルボックスを作りました。コードを教えて欲しいという方がいたので、他の方にも需要あるかな？と思い、記事にしてみました:) ...

上記のサイトで紹介されているコードをみて、結構簡単にいけそうだなぁと思ったのですが、何故か途中コードが通らなくて、しかも見直して分からなくてちょっと諦めようかと思いましたが、色々してるうちに何故か出来たので、書くことが出来そうです・ｗ・

導入方法

基本的には

 <ul id="social_box"> 
   <li>お好きなソーシャルボタンのコード</li>
   <li>お好きなソーシャルボタンのコード</li>
   <li>お好きなソーシャルボタンのコード</li>
</ul>

という、リスト構造を使って並べているだけなので、そんなに迷うはずはなかったんですが・・・。

ボタン表示用コード

<ul id='social_box'>
<!-- ツイッター -->
<li><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='ツイッターID' data-via='ツイッターID' href='https://twitter.com/share'/></li>
<!-- facebook -->
<li><div class='fb-like' data-expr:href='data:post.url' data-layout='box_count' data-send='true' data-show-faces='false' data-width='50'/></li>
<!-- google+1 -->
<li><g:plusone size='tall'/></li>
<!-- はてぶ -->
<li><a class='hatena-bookmark-button' data-hatena-bookmark-layout='vertical' expr:href='"http://b.hatena.ne.jp/entry/" + data:blog.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a></li>
</ul>

スクリプト部分

<!-- ツイッター -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
<!-- facebook -->
<div id='fb-root'/><script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<!-- google+1 -->
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;ja&#39;};
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<!-- はてぶ  -->
<script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>

基本になりそうな、『Twitter』『いいね』『Google+1』『はてブ』の４つのボタンをbloggerに合わせて、入れ込みました。表示とスクリプト部分を分けているのは好みです。同じボタンを何個も使うことがあるので、スクリプトを分けておいたほうが管理しやすいかなと思ってまして。

コードは、ページ毎のURLをとるようにしていますので、トップページならサイトのカウントを、個別記事なら記事毎のカウントが表示出来るはずです。

この2つのコード群は、両方とも『＜/body＞』手前に挿入して下さい。

位置の調整する

次はカスタムCSSの追加フォームに、

#social_box{
  background:#852e19 url(https://lh3.googleusercontent.com/-JD_Z2XXVJqs/T8mrpU0s3AI/AAAAAAAAB9s/EeWAMT5Gid0/s275/background1.jpg); 
  border:3px solid #852e19;
  width:60px;
  padding:10px;
  text-align:center;
  position:fixed;
  bottom:0px;right:0px;
  list-style-type:none;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;}

と追加します。

『background』は、好きな色を設定して下さい。画像もいらない場合は『url』部分は削除です。背景に使っているのは、私が作っているものなので、必要であればダウンロードしてお使いを。
『border』も、同様に色を変えたり、消したりしてみてください。
『padding』は、背景部分の大きさを変更出来ます。
『text-align』で、アイコンを中央揃えにしています。必要なければ削除です。
『position』は、スクロールしてもついてくる様にという部分ですのでそのままで。
『bottom』『right』部分で、表示位置を指定しています。数値を変えてみたり、『top』『left』などにして、自由に位置指定を。
『list-style-type』は、リスト表示した時の、傍点を使わない設定です。
『border-radius』は、ボックスに丸みを付ける指定です。■がいいとか、背景は背景も枠線もいらないって時は使いませんので削除を。『-webkit』で始まる方は主にChrome『-moz』開始の方はFirefoxでの指定という意味です。

背景はどうするか、枠線はつけるか、どのあたりに表示するか、お好みしだいで色々な見た目にすることが出来ると思いますので、是非挑戦してみてください。

あ、HTMLのバックアップは絶対忘れずに！

こんな感じです！

最後に、参考にさせて頂いたサイトの方、ありがとうございました！

ではまた！

Pages

2012/06/02