記事ページにバイラルメディアっぽいソーシャルボタンを追加

せっかく記事を投稿するのだから多くの人に読んでもらいたい、そう思っている人は多いのではないかと思います。そんな時、各種ソーシャルボタンを設置し、情報を拡散させることは有効な手段です。私の場合、これまでWordpressプラグイン「WP Social Bookmarking Light」を使っていたのだけれど、どうしても多くなりがちなプラグインを少しでも少なくするため、ソーシャルボタンをテンプレートに直書きし設置した。以下備忘録としてエントリ。

 
【やったこと】
→ 記事ページにのみ独自デザインのソーシャルボタンを設置した
→ ソーシャルボタンのアイコンはWEBフォントを使用
→ worrdpressで構築されておりテーマはSparklingを使用している
 

トップページやアーカイブページはタイトル＋本文を少しだけ表示させ「続きを読む」リンクを設置しているため、ソーシャルボタンは記事ページにのみ設置した。まずは記事ページのテンプレートである「content-single.php」に以下のコードを追加。

[code language=”html”]
<div class="snsshare2">
<a id="share_fb" href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>"onclick="window.open(this.href, ‘FBwindow’, ‘width=650, height=450, menubar=no, toolbar=no, scrollbars=yes’); return false;">f SHARE</a>
<a id="share_tw" href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=【Twitterアカウント】" target="blank">t TWEET</a>
</div>
[/code]

次にスタイルを適用していく。「style.css」に以下を追加。

[code language=”css”]
.snsshare2 {
padding: 10px 0px 0px 0px;
}
.snsshare2 a {
width: 50%;
padding: 13px 0;
float: left;
font-size: 14px;
font-weight: bold;
color: #ffffff;
text-align: center;
display: inline-block;
text-decoration: none;
}
.snsshare2 a:hover {
color: #ffffff;
text-decoration: underline;
}
.snsshare2 a#share_fb {
font-family: ‘fontello’;
content: ‘f’;
background-color: #3B5998;
border-bottom: 1px solid #3C5A98;
}
.snsshare2 a#share_tw {
font-family: ‘fontello’;
content: ‘t’;
background-color: #00ACEE;
border-bottom: 1px solid #0193CB;
}
[/code]

WEBフォントを使用しているので「header.php」に以下の記述を追加して終了。

[code language=”html”]
<style>
@font-face {
font-family: ‘fontello’;
src: url(‘https://dl.dropboxusercontent.com/u/8710420/tsubalog/icon/font/fontello.eot?56406730’);
src: url(‘https://dl.dropboxusercontent.com/u/8710420/tsubalog/icon/font/fontello.eot?56406730#iefix’) format(‘embedded-opentype’),
url(‘https://dl.dropboxusercontent.com/u/8710420/tsubalog/icon/font/fontello.woff?56406730’) format(‘woff’),
url(‘https://dl.dropboxusercontent.com/u/8710420/tsubalog/icon/font/fontello.ttf?56406730’) format(‘truetype’),
url(‘https://dl.dropboxusercontent.com/u/8710420/tsubalog/icon/font/fontello.svg?56406730#fontello’) format(‘svg’);
}
</style>
[/code]