これ１つで驚くほどアクセス数が増えた！誰でも簡単にできる固定ソーシャルボタンの設置方法とは？

すでにお気づきの方も多いと思いますが、最近ブログのデザインを多少修正しています。

はてブやTwitter等のソーシャルボタンは各サービスごとにデザインが異なり、何となく統一感がありません。

今回のデザイン変更はソーシャルボタン周りのデザインを統一化し、よりユーザクリックを誘いやすいようボトム位置に固定化しました。

この効果はてきめん！

ブックマーク率は従来比で2倍以上に。

皆さんにも是非ご紹介したいと思いましたので、記事にしてみます。

設置方法

下記のソース群をあなたのブログに追加するだけです。

ソーシャルボタン画像はのらねこさんのページのものを使用させていただきました。

CSSソース

あなたのブログのCSSに下記を追加してください。

.social-button {
	display:none;
	width:90%;
	max-width:900px;
	height:0;
	margin:0 auto;
	position: fixed;
	bottom: 100px;
	left:auto;
	padding:1em 0 1em 50px;
	z-index:9999;
	filter:alpha(opacity=70);
  	-moz-opacity: 0.7;
	opacity: 0.7;
}

HTMLソース（PCビュー）

下記ははてなブログに追加する際のHTMLソース例です。

「～画像の場所」の欄は画像を保存したURLに置き換えて下さい。

自作ブログの方は、{Permalink}を記事URL、{Title}を記事タイトル、{BlogURL}をブログトップURLになるようにタグを置き換えて設置してください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">

// ソーシャルボタン　フェードイン・アウト
$(function(){
	$(window).bind("scroll", function() {
	if ($(this).scrollTop() > 150) { 
		$(".social-button").fadeIn();
	} else {
		$(".social-button").fadeOut();
	}

	// ソーシャルボタンリンクを右下に固定
	$(".social-button").css({"position":"fixed","bottom": "100px"});

	});
});

</script>

<p class="social-button">

<a href="http://b.hatena.ne.jp/entry/{Permalink}" title="この記事をはてなブックマークに追加" target="_blank">
<img src="はてブ画像の場所"></a> 

<a href="http://twitter.com/intent/tweet?url={Permalink}&text={Title} - {BlogTitle}" target="_blank">
<img src="Twitter画像の場所"></a> 

<a href="http://www.facebook.com/sharer.php?src=bm&u={Permalink}&amp;t={Title}" target="_blank">
<img src="Facebook画像の場所"></a> 

<a href="https://plus.google.com/share?url={Permalink}" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
<img src="Google+画像の場所"></a> 

<a href="http://line.me/R/msg/text/?{Title}%0D%0A{Permalink}>">
<img src="LINE画像の場所"></a> 

<a href="http://getpocket.com/edit?url={Permalink}&title={Title}" target="_blank">
<img src="Pocket画像の場所"></a> 

<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{BlogURL}feed" target="_blank">
<img src="Feedly画像の場所"></a></p>

スマホビューとPCビューの画像サイズを変えてそれぞれで適当な大きさになるように表示させます。

PCビュー

スマホビュー

たったこれだけのソースコード追加です。

誰でも簡単にできますので、あなたも今すぐにブログに設置しましょう！