こんにちわ、やむけい(@yamkei)です。
先ほどから当ブログの左端に、画面をスクロールしてもついてくるソーシャルボタンボックスを設置しました。
上から順に
・ページ上部へ移動
・Twitter
・Facebook
・Google+
・はてなブックマーク
という配置になっています。
実は、最近よく読んでいる「○○ぞ！」でおなじみの"むねさだブログ"さんが、この動くソーシャルボックスを取り上げていたので、「前々から動くボタンいいなー」と思っていたこともあり、これを機に本気で導入することにしたのです。今回は自分のための備忘録ということで、導入手順をつらつらと書き溜めておきたいと思います。だから参考にはならないかも・・・。
Digital Grapherは独自ドメインで運営していますが、実は定番のWordPressではなくBloggerを利用しています。そこそこユーザー数もいるためTipsも豊富、またGoogleの強力なサーバーによりパンクも気にすることなく（そんなに人来ないけど）楽ちんなので、今のところはこのままBloggerのお世話になる予定です。そんなわけでBloggerで今回のボタンを導入する手順はどうかなーと探してみたところ、ありました。
先ほどから当ブログの左端に、画面をスクロールしてもついてくるソーシャルボタンボックスを設置しました。
上から順に
・ページ上部へ移動
・Google+
・はてなブックマーク
という配置になっています。
なんでまた？
実は、最近よく読んでいる「○○ぞ！」でおなじみの"むねさだブログ"さんが、この動くソーシャルボックスを取り上げていたので、「前々から動くボタンいいなー」と思っていたこともあり、これを機に本気で導入することにしたのです。今回は自分のための備忘録ということで、導入手順をつらつらと書き溜めておきたいと思います。だから参考にはならないかも・・・。
Bloggerでスクロールしてもついてくるソーシャルボタンを導入する手順は？
Digital Grapherは独自ドメインで運営していますが、実は定番のWordPressではなくBloggerを利用しています。そこそこユーザー数もいるためTipsも豊富、またGoogleの強力なサーバーによりパンクも気にすることなく（そんなに人来ないけど）楽ちんなので、今のところはこのままBloggerのお世話になる予定です。そんなわけでBloggerで今回のボタンを導入する手順はどうかなーと探してみたところ、ありました。
先人の知恵に感謝・・・ということでありがたく流用させていただきます。
<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='"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>
</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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- google+1 -->
<script type='text/javascript'>
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[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>の直前に記述します。
ボタン表示用コードとスクリプトはこんな感じになりました
<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='"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>
</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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- google+1 -->
<script type='text/javascript'>
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[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のアカウント部分などを書き換えてくださいね。
もし流用する場合は、Twitterのアカウント部分などを書き換えてくださいね。
カスタムCSS
続いてカスタムCSSのフォームにはこちらを追加します。
#wrap{
#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のソーシャルボタンを設置したままにすることでカバーしていこうかと。
これでもっと記事をシェアしてくれる人が増えたらいいな－。
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のソーシャルボタンを設置したままにすることでカバーしていこうかと。
これでもっと記事をシェアしてくれる人が増えたらいいな－。
コメント
コメントを投稿