KIYOS LOG

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

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

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

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

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

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

　ちなみに、テンプレートファイル[social-button.php]を作成し、個別記事用テンプレートファイル[single.php]の好きな所にテンプレートファイル[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 get_template_part('social-button'); ?>

　てなかんじで、あとはCSSで見た目をいじります。
　そして、これは長いので、閉じてます。

/* 　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;
	}

これを、style.css等にコピペ。
　class名とかは、各自の環境に合わせて変更しちゃってください。

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

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

/* 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;
}

これを、style.css等にコピペ。
　Webフォントは各自のサーバにアップロードしてから、お使いください。
　”WordPressのテーマディレクトリ”は、Webフォントをアップロードした所のパスに変更してください。

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

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

関連記事

• SNSカウント数を取得してみた
• WordPressとの各種連携等
• TwitterとFacebookの連携
• TwitterとFacebookとmixi
• Twitter Digest & brBrbrの変更