SNSボタンをオリジナルデザインにする方法

Cleator Clipでも採用しているSNSボタンをテキストリンクで設置する方法をご紹介します。

普通に設置する場合

普通のテキストリンクとして設置する場合には以下のコードを使用します。CSSは適宜調整して下さい。

※FacebookやGoogle+はogp設定をしていないと正しくシェアできません。opg設定については下記参考サイトが分かりやすいです。

facebook いいねボタン設置時のOGP設定方法♪ ｜ フリーランスWebデザイナーの仕事

Twitter ツイートボタン

<a href="http://twitter.com/share?url=共有したいＵＲＬ&text=ツイート内に含める文字&via=ツイート内に含まれるユーザー名&related=関連アカウント">ツイート</a>

Facebook シェアボタン

<a href="http://www.facebook.com/share.php?u=共有したいＵＲＬ" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">シェア</a>

Google+ +1ボタン

<a href="https://plus.google.com/share?url=共有したいＵＲＬ" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">Google Plus</a>

はてなブックマーク

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=ページＵＲＬ&title=ページタイトル">はてブ</a>

Pocketボタン

<a href="http://getpocket.com/edit?url=共有したいＵＲＬ&title=ページタイトル" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;">Pocket</a>

Feedly Followボタン

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2FページのＵＲＬ'  target='blank'>Follow on Feedly</a>

Feedlyボタンは以下の公式のFollowボタンを作成後、<img id="feedlyFollow"
>～を削除してテキストに変更しただけです。

feedly. your news. delivered.

WordPressで設置する場合

WordPressで設置する場合は以下のように設定します。

Twitter ツイートボタン

<a class="button-twitter" href="http://twitter.com/intent/tweet?text=<?php echo trim(wp_title( '', false); ?>&nbsp;|&nbsp;&amp;url=<?php echo get_permalink() ?>" onclick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1' ); return false;" target="_blank">ツイート</a>

Facebook シェアボタン

<a href="http://www.facebook.com/share.php?u=<?php echo trim(wp_title( '', false); ?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;">シェア</a>

Google+ +1ボタン

<a href="javascript:(function(){window.open('https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo get_permalink() ?>'+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title),'_blank');})();">+1</a>

はてなブックマーク

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo get_permalink() ?>&title=<?php echo trim(wp_title( '', false); ?>" target="_blank">はてブ</a>

Pocketボタン

<a href="http://getpocket.com/edit?url=<?php echo home_url(); ?>&title=<?php bloginfo('name'); ?>" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;">Pocket</a>

SNSボタンをフラットデザインにする。

私のブログで使用しているSNSボタンはアイコンフォントとCSS3を使ってリンクテキストをボタン風にしています。

<div id="share">
<ul class="clearfix">
<li class="twitter"><a class="button-twitter" href="http://twitter.com/intent/tweet?text=<?php echo trim(wp_title( '', false); ?>&nbsp;|&nbsp;&amp;url=<?php echo get_permalink() ?>" onclick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1' ); return false;" target="_blank"><i class="fontawesome-twitter"></i>ツイート</a></li>
<li class="facebook"><a href="http://www.facebook.com/share.php?u=<?php echo trim(wp_title( '', false); ?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;"><i class="fontawesome-facebook"></i>シェア</a></li>
<li class="googleplus"><a href="javascript:(function(){window.open('https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo get_permalink() ?>'+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title),'_blank');})();"><i class="fontawesome-google-plus"></i>+1</a></li>
<li class="pocket"><a href="http://getpocket.com/edit?url=<?php echo home_url(); ?>&title=<?php bloginfo('name'); ?>" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="zocial-pocket"></i>Pocket</a></li>
<li class="rss"><a href="ブログURL"><i class="fontawesome-rss
"></i>RSS</a></li>
<li class="feedly"><a href="http://cloud.feedly.com/#subscription%2Ffeed%2FRSSのURL"  target="blank"><img src="http://s3.feedly.com/img/follows/feedly-follow-logo-white_2x.png" alt="follow us in feedly" width="20" height="20">feedly</a></li>
<li class="hatebu">
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo get_permalink() ?>&title=<?php echo trim(wp_title( '', false); ?>" target="_blank">はてブ</a>
</ul>
</div><!-- / #share -->

/* アイコンフォント読み込み */
@import url(http://weloveiconfonts.com/api/?family=fontawesome|zocial);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

/* シェア */
#share ul {
	margin:0 auto;
}
#share li {
	float:left;
	width:12.5%;
	margin:0 2% 2% 0;
}
#share li a {
	position:relative;
	display:block;
	padding:1em 0;
	color:#fff;
	font-size:88%;
	border-radius:3px;
	text-align:center;
	line-height: 22px;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(255,255,255,0.3);
}
#share li a:hover {
	-webkit-transform: translate3d(0px, 5px, 1px);
	-moz-transform: translate3d(0px, 5px, 1px);
	transform: translate3d(0px, 5px, 1px);
	box-shadow:none;
}

/* ツイッター */
#share .twitter a {
	background:#00acee;
	box-shadow:0 5px 0 #0092ca;
}
#share .twitter a:hover {
	background:#0092ca;
}

/* Facebook */
#share .facebook a {
	background:#3b5998;
	box-shadow:0 5px 0 #2c4373;
}
#share .facebook a:hover {
	background:#2c4373;
}

/* グーグル */
#share .googleplus a {
	background:#db4a39;
	box-shadow:0 5px 0 #ad3a2d;
}
#share .googleplus a:hover {
	background:#ad3a2d;
}

/* Pocket */
#share .pocket a {
	background:#f03e51;
	box-shadow:0 5px 0 #c0392b;
}
#share .pocket a:hover {
	background:#c0392b;
}

/* はてぶ */
#share .hatebu {
	margin-right:0;
}
#share .hatebu a {
	background:#5d8ac1;
	box-shadow:0 5px 0 #43638b;
}
#share .hatebu a:hover {
	background:#43638b;
}

/* RSS */
#share .rss a {
	background:#e09900;
	box-shadow:0 5px 0 #ee802f;
}
#share .rss a:hover {
	background:#ee802f;
}

/* Feedly */
#share .feedly a {
	background:#87c040;
	box-shadow:0 5px 0 #74a436;
}
#share .feedly a:hover {
	background:#74a436;
}
#share li a i,
#share .feedly img {
	width:20px;
	height:20px;
	margin-right:5px;
	vettical-align:top;
}

/* clearfix */
.clearfix:after,
.fixed:after  {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix, .fixed {
	min-height: 1px;
}

* html .clearfix,
* html .fixed {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* スマホ向け */
@media screen and (max-width: 479px) {
#share li {
	float:left;
	width:22%;
	margin:0 4% 5% 0;
}
#share li:nth-child(4n) {
	margin-right:0;
}
/* スマホ向けここまで */ }

参考記事

新ツイートボタンの設置＆カスタマイズ方法まとめ | アイデアハッカー

【小窓編】SNSボタン設置方法マトメ facebook, Pin it (Pinterest), twitter, Googleプラス, Mixiチェック | Stronghold

はてブの「ブックマーク」ボタンをオリジナルデザインに変更する | indigonote

【SNSボタン】シェアボタンをオリジナルの画像にしたら超絶かっこよくなった件について【作り方】 | AppleMania 〜あぷまに〜