初めてブログにソーシャルボタンを設置してみて、えらい時間がかかってしまった。
もうこんな時間か。。今日こそは早く寝ようと思ったのだが。

まだデザインのカスタマイズなど、色々変更する余地はあるが、とりあえず設置することはできたようなので、今回やった作業をまとめておく。



■記事全体
・設置するボタン
ローソンガジェットのSNS。
先日話題になっていたblogのサイドに設置するガジェットで、かなり簡単に設置できるし、デザインもいい。

・設置方法
ローソンガジェットでGADGET02を選択し、設置。

・タグ
└<div id="container">の直下に設置。
<!-- ローソンガジェット -->
<div id="lawsonGadget11_02" colortype="5" did="85bc029b725b4af9f9e04b0750b62138"></div><script type="text/javascript" charset="UTF-8" src="http://gadget.lawson.jp/js/type02.js"></script>
<!-- ローソンガジェット END -->

 
■記事上部
・設置するボタン
TwitterはてなブックマークmixiEvernoteGoogle+1Facebookの5つ。
選定した理由は、基本的なボタンはこれで網羅していることと、何よりブログ記事の下部を便利にカスタマイズできるzenbackのソーシャルボタンがこれだから。
ぶっちゃけ上部にソーシャルボタンはいらない気がしなくもないが、ニュースサイトをReadability使って読んでると、この位置からSNSへの投稿をすることが自分だと多かったため、設置することに。

・設置方法
http://5509.meを使って一括で設置を行い、網羅されていないGoogle+1ボタンと、Facebookのsentボタン(Facebookでの共有ボタン)を追加。

・タグ
⇒header部分のどこでも適当にコピペ
<!-- 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>
<!-- Google+1ボタン END -->

⇒body直下部分にコピペ
<!-- Facebookボタン -->
<div id="fb-root"></div>
<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/ja_JP/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
!-- Facebookボタン END -->

⇒設置したい箇所にコピペ、今回はタイトルの下
※twitterボタンのタグのみ、他ブログとlivedoor blogで異なるので注意
<!-- Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
<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>

<!-- はてなブックマーク -->
<a href="http://b.hatena.ne.jp/entry/http%3A%2F%2Fblog.livedoor.jp%2Facacie%2F" class="hatena-bookmark-button" data-hatena-bookmark-title="%E3%83%9D%E3%82%B1%E3%83%A2%E3%83%B3%E3%81%AE%E3%81%8A%E6%B0%97%E3%81%AB%E5%85%A5%E3%82%8A%E3%83%91%E3%83%BC%E3%83%86%E3%82%A3%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%BE%E3%81%A7%E3%81%AF%E9%A0%91%E5%BC%B5%E3%82%8Bblog" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

<!-- mixiチェック -->
<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="69f4a445fa67fcb78346d985ab0ed00c8f9da6fb">Check</a> <script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

<!-- Evernote -->
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script><a href="#" onclick="Evernote.doClip({}); return false;"><img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" /></a>

<!-- Google+1ボタン -->
<g:plusone size="medium" href="<$ArticlePermalink$>"></g:plusone>
<!-- Google+1ボタン END -->

<!-- Facebook -->
<div class="fb-like" data-href="http://livedoor.blogcms.jp/blog/acacie/" data-send="true" data-layout="button_count" data-width="200" data-show-faces="true"></div>



■記事下部
・設置するボタン
TwitterはてなブックマークmixiEvernoteGoogle+1Facebookの5つ。
zenbackのソーシャルボタンをそのまま採用。

・設置方法
zenbackを利用。
Twitterやはてななどでの投稿内容は設定で省く。

・タグ
⇒記事下部の適当な場所にコピペ
<!-- ZenBackWidget -->
<script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//blog.livedoor.jp/acacie/&nsid=101550712210617232%3A%3A101550726974592347&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->
<!-- ZenBackWidget END -->


タグは他のブログで使うと、共有する際に本ブログのタイトルが出てしまうからそのままは使えないけど、上記に書いたやり方を踏襲すれば使えるようになるはず。
後、zenbackは便利でスタイリッシュだけど、やたら重いからうざがられる傾向にあるので注意。
私はとりあえず置いてみたかったので置いた。
反省しているが後悔はしていない。

もっと簡単に、適切にできるやり方もあるかもだけど、今日はここまでにしよう。
少しでも投稿されたら多分泣いて喜ぶな、うん。
と、あからさまな催促をしつつお休みなさい。