WordPressのオリジナルシェアボタン簡単作成。ソースコード有りという記事を見て

先日、久々にWordpressで使えるコードがないか、本当は自分でコツコツと組めばいいのだが、チャチャッと組み込めるコードをと思い、少しウェブを徘徊してみました。

そうしたら、

WordPressのオリジナルシェアボタン簡単作成。ソースコード有り

という記事を見つけました。

FacebookやTwitterといった最近では当たり前に設置されているシェアボタンをオリジナルで作ってしまおうというものでした。

そのサイトが、ここ

http://tsuchiyashutaro.com/archives/2992

 結構使えるコードで、綺麗なコードでした。

早速、使ってみようと思ったのですが、少々、私のサイトのイメージと合わないので、少し、コードを変更して、サイトのイメージに合う感じにしてから貼り付けてみようかなと思っています。

とりあえず、貼り付けて使ってみたい方は、お試し下さい。

左サイドバーの
【外観】⇒【テーマ編集】をクリック
その後、右側の青丸のほうから
【single.php】をクリックします。
その後はテキスト内の<?php the_content(); ?>
を探しその下に以下のソースコードを貼り付けます。
ブラウザによっては改行がおかしいですが、全部コピーしてもらえればと思います。

<ul class="share_btn">
<li><a class="facebook_btn" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&amp;t=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span class="fontawesome-facebook social_icon"></span>いいね</a></li>
<li><a class="twitter_btn" href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span class="fontawesome-twitter social_icon"></span>ツイート</a></li>
<li><a class="hatebu_btn" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span class="hatebu_icon">B!</span><span class="hatebu_chara">はてブ<span></a></li>
</ul>

次はCSSです。
右側の青丸の中から【style.css】を開いて下記のコードをスタイルシートの一番下に挿入します。

ul.share_btn {
margin: 36px 0 25px 0;
padding: 0;
}
 
.share_btn li {
float: left;
width: 32%;
margin: 0 4px 0 0;
list-style: none !important;
}
 
.share_btn a {
display: block;
color: #fff;
text-decoration: none;
font-weight: bold;
text-align: center;
height: 45px;
line-height: 45px;
padding: 0;
font-size: 13px;
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-o-transition-duration: 500ms;
transition-duration: 500ms;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
}
 
.share_btn a:hover {
color: #fff;
position: relative;
top: -3px;
}
 
span.social_icon {
margin-right: 3px;
font-size: 16px;
}
 
.share_btn li:last-child {
margin-right: 0;
}
 
.share_btn:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
 
a.facebook_btn {
background: #3B5998;
}
 
.facebook_btn:hover {
background: #5979be;
}
 
a.twitter_btn {
background: #33CCFF;
}
 
.twitter_btn:hover {
background: #88e1ff;
}
 
a.hatebu_btn {
background: #aaa;
}
 
.hatebu_btn:hover {
background: #d4d4d4;
}
 
span.hatebu_icon {
font-family: Verdana;
margin-right: 3px;
font-size: 16px;
}
 
a.hatebu_btn span {
position: relative;
top: -1px;
}
 
ul.share_btn_bottom {
margin: 20px 0 30px 0;
}

これでいいんですって。

でも、やっぱり詳細は、実際に説明をしているサイト

http://tsuchiyashutaro.com/archives/2992

をを見て下さい。