cssのみでFacebookシェアボタン、twitterツイートボタンをカスタマイズする方法

最新更新日：2017年4月10日(月曜日)

公開日：2014年2月14日(金曜日)

Pocket

シェアボタン・ツイートボタン

公式のシェアボタン・ツイートボタンを設置してみたけど、もうちょっと良い感じにしたい。

そんなあなたのためにコピペでカスタマイズできるコードをご紹介します。

PHP（htmlに直書きだとダメです。）

<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;">
Facebookでシェア
</a>
<a class="twitter-tweet" href="http://twitter.com/intent/tweet?text=【<?php the_title(); ?> | <?php the_permalink(); ?>】"
      onClick="window.open(encodeURI(decodeURI(this.href)),
      'tweetwindow',
      'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!'
      ); return false;">
    twitterでツイート
</a>

CSS

a.facebook-iine{
width:50%;
padding:20px 0;
color:#fff;
text-align:center;
background-color:#3b5998;
height:30px;
display:block;
text-decoration:none;
font-size:20px;
float:left;
margin-bottom:10px;
}
 
a.facebook-iine:hover{
background-color:#6277a1;
}
 
a.twitter-tweet{
width:50%;
padding:20px 0;
color:#fff;
text-align:center;
background-color:#00acee;
height:30px;
display:block;
text-decoration:none;
font-size:20px;
float:left;
margin-bottom:10px;
}
 
a.twitter-tweet:hover{
background-color:#6aafca;
}