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

2016.2.21

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

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

対象ソーシャルメディア

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

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

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

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

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

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

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

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

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

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

B!

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;

}

最後に

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