シェアボタンをオリジナルにしてみた

　各SNSのシェアボタンを、オリジナルにしてみた（笑）。

　といっても、「流行りに乗れ！WordPressにバイラルメディア風のSNSボタンを設置する方法 – 副業ハック」こちらのページを参考に、ちょこっと変更しただけなんですけどね（笑）。

　個別記事の下の方に表示されてます。

　で、表示させてるのは、PCでFacebook、Twitter、mixi、Google+の4つ。

　Media Queriesをつかって、モバイル環境では上記の4つにLINEも表示させてます。
　というより、ノーマル（PC）では非表示で、モバイル環境で表示させてると言った方がいいのかな？

　上に記載してる参考ページに、ソースがあるのですが、念の為に僕が改変したソースを記載して置きます。


　ちなみに、テンプレートファイル[social-button.php]を作成し、個別記事用テンプレートファイル[single.php]の好きな所にテンプレートファイル[social-button.php]を呼び出す事で、表示させてます。
[php title=”social-button.php”]
<!– ▼▼▼Facebook シェアボタン▼▼▼–>
<a class="facebook-iine" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&amp;t=<?php the_title(); ?>"
onClick="window.open(encodeURI(decodeURI(this.href)),
‘sharewindow’,
‘width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!’
); return false;"><span class="lsf-icon" title="facebook"></span> Facebookでシェア</a>

<!– ▼▼▼Twitterボタン▼▼▼–>
<a class="twitter-tweet" href="http://twitter.com/intent/tweet?text=【<?php the_title(); ?> | <?php bloginfo(‘name’); ?>】 | <?php the_permalink(); ?>"
onClick="window.open(encodeURI(decodeURI(this.href)),
‘tweetwindow’,
‘width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!’
); return false;"><span class="lsf-icon" title="twitter"></span> twitterでツイート</a>

<!– ▼▼▼Google+ +1ボタン▼▼▼–>
<a class="gplusbtn" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="window.open(this.href, ‘Gwindow’, ‘width=650, height=450, menubar=no, toolbar=no, scrollbars=yes’); return false;"><span class="lsf-icon" title="google"></span> Google＋でシェア</a>

<!– ▼▼▼mixi「チェック」ボタン▼▼▼–>
<a class="mixibtn" href="javascript:void(0);" onclick="window.open(‘http://mixi.jp/share.pl?u=<?php the_permalink(); ?>&k=4a9d3296b02cb58738a182c61efe0292c131fa5c’,’share’,[‘width=632′,’height=456′,’location=yes’,’resizable=yes’,’toolbar=no’,’menubar=no’,’scrollbars=no’,’status=no’].join(‘,’));"><span class="lsf-icon" title="mixi"></span> mixiでチェック</a>

<!– ▼▼▼LINEで送るボタン▼▼▼–>
<a class="linebtn" href="line://msg/text/%e3%80%90<?php the_title(); ?>%20%7c%20<?php bloginfo(‘name’); ?>%e3%80%91%0D%0A<?php the_permalink(); ?>"><span class="lsf-icon" title="line"></span> LINEで送る</a>
[/php]
　そして、呼び出すコードが…
[php title=”single.phpのお好みの場所へ”]
<?php get_template_part(‘social-button’); ?>
[/php]
　てなかんじで、あとはCSSで見た目をいじります。
　そして、これは長いので、閉じてます。
[css titele=”CSS” collapse=”true”]
/* 　SNSボタン
———————————————– */
#sns-single{
margin-top: 2em;
margin-bottom: 2em;
}

a.facebook-iine{
width:48%;
padding:20px 0;
color:#fff;
text-align:center;
background-color:#3b5998;
height:20px;
display:block;
text-decoration:none;
font-size:20px;
float:left;
margin-left: 1%;
margin-right: 1%;
margin-bottom:10px;
/*border-radius*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}

a.facebook-iine:hover{
background-color:#6277a1;
}

a.twitter-tweet{
width:48%;
padding:20px 0;
color:#fff;
text-align:center;
background-color:#00acee;
height:20px;
display:block;
text-decoration:none;
font-size:20px;
float:left;
margin-left: 1%;
margin-right: 1%;
margin-bottom:10px;
/*border-radius*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}

a.twitter-tweet:hover{
background-color:#6aafca;
}

a.gplusbtn{
width:48%;
padding:20px 0;
color:#fff;
text-align:center;
background-color:#DD4B39;
height:20px;
display:block;
text-decoration:none;
font-size:20px;
float:left;
margin-left: 1%;
margin-right: 1%;
margin-bottom:10px;
/*border-radius*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}

a.gplusbtn:hover{
background-color:#E05D4C;
}

a.linebtn{
width:48%;
padding:20px 0;
color:#fff;
text-align:center;
background-color:#5ae628;
height:20px;
display:block;
text-decoration:none;
font-size:20px;
float:left;
margin-left: 1%;
margin-right: 1%;
margin-bottom:10px;
/*border-radius*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
display:none;
}

a.linebtn:hover{
background-color:#B2F39A;
}

a.mixibtn{
width:48%;
padding:20px 0;
color:#fff;
text-align:center;
background-color:#d1ad59;
height:20px;
display:block;
text-decoration:none;
font-size:20px;
float:left;
margin-left: 1%;
margin-right: 1%;
margin-bottom:10px;
/*border-radius*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}

a.mixibtn:hover{
background-color:#E5D1A3;
}
[/css]
これを、style.css等にコピペ。
　class名とかは、各自の環境に合わせて変更しちゃってください。

　あ、あとWebフォントでアイコンを追加してます。
　ですので、上記のCSSをそのままコピペしても、同じ表示にはなりません。

　WebフォントはLigature kudakurage Symbolsを使っています。

[css titele=”WebフォントのCSS”]
/* LigatureSymbols */
@font-face {
font-family: ‘LigatureSymbols’;
src: url(‘WordPressのテーマディレクトリ/LigatureSymbols-2.11.eot’);
src: url(‘WordPressのテーマディレクトリ/LigatureSymbols-2.11.eot?#iefix’) format(‘embedded-opentype’),
url(‘WordPressのテーマディレクトリ/LigatureSymbols-2.11.woff’) format(‘woff’),
url(‘WordPressのテーマディレクトリ/LigatureSymbols-2.11.ttf’) format(‘truetype’),
url(‘WordPressのテーマディレクトリ/LigatureSymbols-2.11.svg#LigatureSymbols’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
[/css]
これを、style.css等にコピペ。
　Webフォントは各自のサーバにアップロードしてから、お使いください。
　”WordPressのテーマディレクトリ”は、Webフォントをアップロードした所のパスに変更してください。

　こんな感じで、下のような、シェアボタンが出来上がりです。

【参考】
流行りに乗れ！WordPressにバイラルメディア風のSNSボタンを設置する方法 – 副業ハック
Ligature kudakurage Symbols