【Blogger】画面をスクロールしてもついてくるソーシャルボタンを設置しました。自分のための備忘録。

こんにちわ、やむけい(@yamkei)です。
先ほどから当ブログの左端に、画面をスクロールしてもついてくるソーシャルボタンボックスを設置しました。


上から順に

・ページ上部へ移動
・Twitter
・Facebook
・Google+
・はてなブックマーク

という配置になっています。


なんでまた?


実は、最近よく読んでいる「○○ぞ!」でおなじみの"むねさだブログ"さんが、この動くソーシャルボックスを取り上げていたので、「前々から動くボタンいいなー」と思っていたこともあり、これを機に本気で導入することにしたのです。今回は自分のための備忘録ということで、導入手順をつらつらと書き溜めておきたいと思います。だから参考にはならないかも・・・。


Bloggerでスクロールしてもついてくるソーシャルボタンを導入する手順は?


Digital Grapherは独自ドメインで運営していますが、実は定番のWordPressではなくBloggerを利用しています。そこそこユーザー数もいるためTipsも豊富、またGoogleの強力なサーバーによりパンクも気にすることなく(そんなに人来ないけど)楽ちんなので、今のところはこのままBloggerのお世話になる予定です。そんなわけでBloggerで今回のボタンを導入する手順はどうかなーと探してみたところ、ありました。

先人の知恵に感謝・・・ということでありがたく流用させていただきます。


ボタン表示用コードとスクリプトはこんな感じになりました

<div id="wrap">
<ul id='social_box'>
<!-- ページのトップへ戻るー -->
<a href='#header'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTET5Gz39aBLhKFvQBFzOKdg-4v7sXeZsV4PUCpFZS025rlb77BgHulWyazvqjGt5S0vMyi6cOntUwfG06c0loD4qQXZ0J3LmKdSPs7KSdlDbKBorxArfK_uV9fGQh1evVOT3yE9lkiwQf/s1600/screenshot.1.png'/></a>
<!-- シェアしてねー -->
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BPufCAuZjq8gbk-S9jEKNhLznwRO0e7Bhal3jZAATn1wtHD4pC3YFFMofUcp7Aa1b3WEipjqUdOLVItPlR0JNOfQyIyXXrQAyYKvspRSJZifkkCawDVbC0JwsQCmQ51nFykkP3alolWr/s1600/%E3%82%B7%E3%82%A7%E3%82%A2%E3%81%97%E3%81%A6%E3%81%AD.png'/>
<!-- ツイッター -->
<li><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='yamkei' data-via='yamkei' 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='&quot;http://b.hatena.ne.jp/entry/&quot; + 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>
</div> 

<!-- ツイッター -->
<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'/>


これをHTMLの</body>の直前に記述します。
赤文字で書かれた部分はクリックすることで、ページ上部に移動するボタンと「シェアしてね!」という表記をついでに追加してみたところです。
もし流用する場合は、Twitterのアカウント部分などを書き換えてくださいね。


カスタムCSS

続いてカスタムCSSのフォームにはこちらを追加します。

#wrap{
  width:1000px;(←ここはブログにあわせて変更する。メインカラム+サイドカラム)
  margin:10px auto;
}
#social_box{
  background:#FFFFFF url(https://);
  border:3px solid #666666;
  width:70px;
  padding:10px;
  text-align:center;
  position:fixed;
  bottom:15px;
  list-style-type:none;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
}


出来た-!

これで設置完了です。
自分用なので無駄な記述も残していますが、これで使えるようになったと。
解像度の低い端末で見ると表示されないようにしてるので、この点についてはzenbackのソーシャルボタンを設置したままにすることでカバーしていこうかと。

これでもっと記事をシェアしてくれる人が増えたらいいな-。

コメント