SNSボタンをオリジナルデザインにする方法
- ライター：鹿
Cleator Clipでも採用しているSNSボタンをテキストリンクで設置する方法をご紹介します。
広告を表示できません。
普通に設置する場合
普通のテキストリンクとして設置する場合には以下のコードを使用します。CSSは適宜調整して下さい。
※FacebookやGoogle+はogp設定をしていないと正しくシェアできません。opg設定については下記参考サイトが分かりやすいです。
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"
>～を削除してテキストに変更しただけです。
広告を表示できません。
WordPressで設置する場合
WordPressで設置する場合は以下のように設定します。
Twitter ツイートボタン
<a class="button-twitter" href="http://twitter.com/intent/tweet?text=<?php echo trim(wp_title( '', false); ?> | &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); ?> | &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;
}
/* スマホ向けここまで */ }
参考記事
-
広告を表示できません。