WordPressで使えるソーシャル系ボタンを自前で追加

Wordpress
スポンサーリンク

以前、ソーシャル系のブックマーク追加ボタンを自前で設置という記事を書きました。

この記事は2011年に書いたものでその後状況も変わったと思うので、改めて調べてメモしておこうと思います。

対象ソーシャルメディア

今回は、以下のソーシャルメディアを対象にしようと思います。

  • Facebook
  • Twitter
  • はてなブックマーク
  • Pocket
  • Google+

1.Font Awesomeのコードを追加する

画像にしてもいいのでしょうけど、代表的なアイコンはFont Awesomeで揃っているので、今回はこちらを使おうと思います。

以下のコードをheadタグ内に記載します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

2.はてブ用にコードを追加

はてなブックマークを表示させるために、以下のコードを追加します。body閉じタグのあたりに追加するといいでしょう。

<script src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

3.ソーシャルのコードを追加する

以下のコードを設置したい場所に追加します。single.phpに追加してください。フラットな感じにしたいのと、微妙にずれたりするのが面倒だったのでw、今回はtableにいれてしまいます。

★の箇所には、twitterのアカウント(@を覗いた文字列)を記載します。

<table class="social">
<tr>
<td><a href="http://www.facebook.com/share.php?u=<?php the_permalink() ?>" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="socialbtn_fb"><i class="fa fa-facebook-f"></i></a></td>
<td><a href="https://twitter.com/share?url=<?php the_permalink() ?>&text=<?php the_title(); ?>&via=★" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="socialbtn_tw"><i class="fa fa-twitter"></i></a></td>
<td><a class="hatena-bookmark-button socialbtn_b" title="このエントリーをはてなブックマークに追加" href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" data-hatena-bookmark-layout="simple">B!</a></td>
<td><a href="http://getpocket.com/edit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>" onclick="window.open(this.href, 'PCwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="socialbtn_p"><i class="fa fa-get-pocket"></i></a></td>
<td><a 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;" class="socialbtn_g"><i class="fa fa-google-plus"></i></a></td>
</tr>
</table>

4.見た目を整える

以下のコードをコピペしてください

table.social {
    width: 100%;
    margin-bottom: 2em;
    table-layout:fixed;
}
table.social td {
    text-align: center;
    vertical-align: middle;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
}
table.social a {
    display: block;
    font-size: 1.5em;
    color: #fff;
    line-height: 50px;
    height: 50px;
    background-color: #666;
    font-weight: bold;
}
table.social a:hover {
    text-decoration: none;
}
.socialbtn_fb:hover {
    background-color: #405997;
}
.socialbtn_tw:hover {
    background-color: #55acee;
}

.socialbtn_b:hover {
    background-color: #248fde;
    font-weight: bold;
}
.socialbtn_p:hover {
    background-color: #ee4056;
}
.socialbtn_g:hover {
    background-color: #dd4b39;
}

最後に

いかがでしょうか?必要最低限ですが、十分目的は果たしていると思います。レスポンシブにも対応しているし、何より軽量です。ぜひ試してみてください。