SNSシェアボタン-スタイルシートでオリジナルボタン

今やSNSボタンはアクセスアップには欠かせなく、ほとんどのサイトで見ることができます。しかしJavaScript、CSS、画像ファイルを外部サーバーから 取り込む方法では、表示が遅くなってしまいます。表示スピードが遅いということは検索エンジンの評価も下がりますし、閲覧者に迷惑をかけてしまいます。

そこでコンテンツを表示するまで、JavaScript、CSS、画像ファイルを外部サーバーからリクエストしない方法をご紹介します。SNSボタン画像ファイルの 代わりにスタイルシートで表現しているのでシンプルすぎますが、取り急ぎ記事投稿します。

SNSの代表格であるTwitter、Facebook、Google+、はてなブックマーク、Pocket、LINEのSNSシェアボタン設置方法を解説します。 それではご紹介します。

【HTML】

	<a class="sc-facebook" href="http://www.facebook.com/sharer.php?u=[投稿したいURL]&t=[投稿したいタイトル]" title="Send to Facebook" target="_blank" onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">Facebook</a>
	
	

[投稿したいURL][投稿したいタイトル]を設定してください。

【CSSスタイルシート】

	a.sc-facebook {
	background:#3b5998;
	box-shadow:0 5px 0 #2c4373;
}
a.sc-facebook:hover {
	background-color:#7D96CE;
}
	
	

【HTML】

	<a class="sc-google" href="https://plus.google.com/share?url=[投稿したいURL]" title="Send to Google+" rel="noreferrer" target="_blank" onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">Google+</a>
	
	

[投稿したいURL]を設定してください。

【CSSスタイルシート】

	a.sc-google {
	background:#db4a39;
	box-shadow:0 5px 0 #ad3a2d;
}
a.sc-google:hover {
	background-color:#ffffff;
	color:#737373;
}
	
	

【HTML】

	<a class="sc-hatena" href="http://b.hatena.ne.jp/add?mode=confirm&url=[投稿したいURL]&title=[投稿したいタイトル]" title="このエントリーをはてなブックマークに追加" target="_blank" onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">はてブ</a>
	
	

[投稿したいURL][投稿したいタイトル]を設定してください。

【CSSスタイルシート】

	a.sc-hatena {
	background:#5d8ac1;
	box-shadow:0 5px 0 #43638b;
}
a.sc-hatena:hover {
	background-color:#87C8DD;
}
	
	

フォローボタン【HTML】

	<a class="sc-follow-hatena" href="http://b.hatena.ne.jp/[アカウント]" target="_blank">はてブ</a>
	
	

[アカウント]を設定してください。

フォローボタン【CSSスタイルシート】

	a.sc-follow-hatena {
	background-color:#5d8ac1;
	box-shadow:0 5px 0 #43638b;
}
a.sc-follow-hatena:hover {
	background-color:#87C8DD;
	text-decoration:none;
}
	
	

【HTML】

	<a class="sc-pocket" href="http://getpocket.com/edit?url=[投稿したいURL]&title=[投稿したいタイトル]" title="Save to Pocket" target="_blank" onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">Pocket</a>
	
	

[投稿したいURL][投稿したいタイトル]を設定してください。

【CSSスタイルシート】

	a.sc-pocket {
	background:#f03e51;
	box-shadow:0 5px 0 #c0392b;
}
a.sc-pocket:hover {
	background-color:#f79eaa;
}
	
	

【HTML】

	<a class="sc-twitter" href="http://twitter.com/share?url=[投稿したいURL]&text=[投稿したいタイトル]&via=[ユーザー名]&related=[関連したアカウント]" title="Tweet This" target="_blank" onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">Twitter</a>
	
	

[投稿したいURL][投稿したいタイトル][ユーザー名][関連したアカウント]を設定してください。

【CSSスタイルシート】

	a.sc-twitter {
	background:#00acee;
	box-shadow:0 5px 0 #0092ca;
}
a.sc-twitter:hover {
	background-color:#e1e8ed;
	color:#737373;
}
	
	

フォローボタン【HTML】

	<a class="sc-follow-twitter" href="https://twitter.com/intent/follow?original_referer=[投稿したいURL]&ref_src=twsrc%5Etfw&region=follow_link&screen_name=[関連したアカウント]&tw_p=followbutton target="_blank">Twitter</a>
	
	

[投稿したいURL][関連したアカウント]を設定してください。

フォローボタン【CSSスタイルシート】

	a.sc-twitter {
	background:#00acee;
	box-shadow:0 5px 0 #0092ca;
}
a.sc-twitter:hover {
	background-color:#e1e8ed;
	color:#737373;
	text-decoration:none;
}
	
	

【HTML】

	<a href="http://line.me/R/msg/text/[エンコードされたテキストまたはURL]"></a>
	
	

【CSSスタイルシート】

	a.sc-line{
	background:#25af00;
	box-shadow:0 5px 0 #219900;
}
a.sc-line:hover {
	background-color:#ffffff;
	color:#737373;
}
	
	

【HTML】

	<a class="sc-follow-feedly" href="http://cloud.feedly.com/#subscription%2Ffeed%2F[フィードのURL]" target="_blank">Feedly</a>
	
	

[フィードのURL]を設定してください。

【CSSスタイルシート】

	a.sc-follow-feedly{
	background-color:#87c040;
	box-shadow:0 5px 0 #74a436;
}
a.sc-follow-feedly:hover {
	background-color:#ffffff;
	color:#737373;
	text-decoration:none;
}
	
	

【HTML】

	<a class="sc-follow-rss" href="[フィードのURL]/" target="_blank">RSS</a>
	
	

[フィードのURL]を設定してください。

【CSSスタイルシート】

	a.sc-follow-rss{
	background-color:#ffb53c;
	box-shadow:0 5px 0 #e09900;
}
a.sc-follow-rss:hover {
	background-color:#ffffff;
	color:#737373;
	text-decoration:none;
}