ソーシャルボタンを好きな画像でカスタマイズ！（忍者おまとめボタンはちょっと重い）

ソーシャルボタンを一括で色々設置したい時、「忍者おまとめボタン」が便利で使っていました。

確かに、大小さまざまなタイプのアイコン100種類以上の組み合わせを簡単に作れて、数行のコードを貼り付けるだけ、
既に登録済みのカスタマイズを変更すれば、再度コードを生成しなくても反映される、

と、確かに便利です。

ただ、これが結構重いのですよね。

 
しかも、document.writeで書き出しているので、そこで読み込みが止まってしまうのも難点。

クリックの解析機能も付いているので、これが原因かと思い解析無しにしてみたもののあまり改善はせず。
我慢できなくもないレベルではあるのですが、PCでも表示が少しもたつく感を受けるので、スマホの混雑した時間帯だと尚更気になりました。
（記事の読み込みは進んでるのに、肝心なボタンの読み込みが終ってないこともしばしば。つまりシェアしてもらう機会を失ってる訳です）

結局、行き着く先は自分で各ボタンのコードを書く、と言う方針に。

各SNSで公式に公開されている方法だとアイコンの変更が出来なかったりするのですが、調べてみたらツイート数などを表示しないのであればアイコンの変更は結構簡単だったりするのですね。

簡単に言うと連携用のURLがそれぞれ存在するので、基本的にはそのURLに今見ているページを渡すリンクを作るだけ、あとはそれを使いたい画像リンクにすればOK。

むしろこれなら、ツイート数を取得するようなスクリプトが入っていない分さらに早いです。これでかなり快適になりました！


以下、SNSごとの設置例です。

Twitter、facebook、Google+、はてブ、Lineの例と、ついでに簡単に横並びにするCSS例として、liをinlineにするのが一番手っ取り早いかなと思います。

（ちなみに、これ以外で設置したい場合でも、他で設置されているページのソースを見たら大体分かる（URLを自分のページのものと置き換える）かと思います。笑）

<ul class="sns_botton">
	<li><a href="http://twitter.com/share?url=URL&text=タイトル" target="_blank"><img src="画像パス"></a></li>
	<li><a href="http://www.facebook.com/share.php?u=URL" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="画像パス"></a></li>
	<li><a href="https://plus.google.com/share?url=URL" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="画像パス"></a></li>
	<li><a href="http://b.hatena.ne.jp/entry/URL"><img src="画像パス"></a>
	<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
	<li><a href="http://line.naver.jp/R/msg/text/?タイトル%20URL" target="_blank"><img src="画像パス"></a></li>
</ul>

URL、タイトル、画像パスをそれぞれ自分のページになるように変更ください。
FC2ブログなら、<%topentry_link>、<%topentry_title>で、それぞれ記事のURLとタイトルになりますね。


横並びのCSS例

.sns_botton {
  list-style:none;
}
.sns_botton li {
  display:inline;
}

 
ご参考までに！