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

f:id:linuxdiary:20150510025435p:plain

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

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

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

この効果はてきめん！

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

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

設置方法

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

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

<a href="http://noraneko.jp.net/archives/337">フラットデザインの丸型ソーシャルアイコン | のらねこのつぶやき</a>

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>