Xhtmlファイル

<link href="sb.css" rel="stylesheet" type="text/css" />(ボタンの形や色などのスタイルシートファイル）
<link href="style.css" rel="stylesheet" type="text/css" />（アイコンフォントのスタイルシートファイル）
<a class="twitter-btn" href="http://twitter.com/?status= [記事のタイトル]%20%7C%20[サイト名]%20[記事のURL] %20by%20%40[Twitterのアカウント名]" title="Tweet This" onclick="javascript:window.open(this.href, '', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600'); return false; "><span class="icon-twitter"></span> </a>
<a class="fb-btn" href="http://www.facebook.com/sharer.php?u= [記事のURL]&t=[記事のタイトル]" title="Send to Facebook" onclick="javascript:window.open(this.href, '', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600'); return false; "> <span class="icon-facebook"> </span></a>
<a class="gplus-btn" href="https://plus.google.com/share?url= [記事のURL]" title="+1" rel="noreferrer" onclick="javascript:window.open(this.href, '', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600'); return false; "><span class="icon-googleplus"></span></a>
<a class="hatena-btn" href="http://b.hatena.ne.jp/add?mode=confirm& url=[記事のURL] &title=[記事のタイトル]" title="このエントリーをはてなブックマークに追加" onclick="javascript:window.open(this.href, '', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600'); return false; "><span class="icon-hatena"></span></a>

sb.cssファイル（ボタンのスタイル用）

a.twitter-btn{
    text-decoration:none;
    display: inline-block;
    width:25px;
    margin:5px;
    text-align:center;
    background-color:#55acee;
    height:25px;
    padding:3px;
    border:#55acee;
    border-radius:15px;
    color:gainsboro;
    font-size:medium;
}

a.fb-btn{
    text-decoration:none;
    display: inline-block;
    width:25px;
    margin:5px;
    text-align:center;
    background-color:#3b5998;
    height:25px;
    padding:3px;
    border:#3b5998;
    border-radius:15px;
    color:gainsboro;
}

a.gplus-btn{
    text-decoration:none;
    display: inline-block;
     width:25px;
    margin:5px;
    text-align:center;
    background-color:#dd4b39;
    height:25px;
    padding:3px;
    border:#dd4b39;
    border-radius:15px;
    color:gainsboro;
    font-size:medium;
}

a.hatena-btn{
    text-decoration:none;
    display: inline-block;
    width:25px;
    margin:5px;
    text-align:center;
    background-color:#0078c7;
    height:25px;
    padding:3px;
    border:#0078c7;
    border-radius:15px;
    color:gainsboro;
    font-size:medium;
}

.twitter-btn:hover {
  opacity: .7;
  filter: alpha(opacity=70);
}

.fb-btn:hover {
  opacity: .7;
  filter: alpha(opacity=70);
}

.gplus-btn:hover {
  opacity: .7;
  filter: alpha(opacity=70);
}

.hatena-btn:hover {
  opacity: .7;
  filter: alpha(opacity=70);
}