超軽快なソーシャルボタンをWordPressに設置する方法。外部JavaScriptと画像の読み込みが不要です。

公開: 更新:2016/10/16


twitter

JavaScriptや画像を読み込む必要がない、超シンプルなソーシャルボタンをワードプレスに設置する方法をご紹介します。
facebookのいいね数やtwitterのツイート数などは表示できないため機能は限られますが、動作はとても軽快です。

サイトの読み込み速度を重視する方には、有用だと思いますよ。

スポンサーリンク

フェイスブック、ツイッター、はてなブックマークのボタン

フェイスブック、ツイッター、はてなブックマークのボタンを設置するには、次のコードをsingle.phpの好きな場所に貼り付けます。

見た目は、こんな感じになります。

ソーシャルメディアのボタン

<style type="text/css">
.my-social{
margin-bottom:40px;
}
.my-social a{
padding-right:10px;
text-decoration:none;
}
.my-social-icon{
font-size:12px;
font-weight:bold;
border:solid 5px;
padding:7px 5px 7px 5px;
}
.my-social-text{
font-size:12px;
font-weight:normal;
color:white;
border:none;
padding:12px 5px 12px 0;
}
</style>
<div class="my-social">
<a href="https://twitter.com/share?url=<?php the_permalink(); ?>&amp;text=<?php the_title(); ?>" onclick="window.open(this.href, 'tweetwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;">
<span class="my-social-icon" style="color:#55acee;border-color:#55acee;">t</span><span class="my-social-text" style="background-color:#55acee;">ツイート</span>
</a>
<a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;">
<span class="my-social-icon" style="color:#3b5998;border-color:#3b5998;">f</span><span class="my-social-text" style="background-color:#3b5998;">いいね!</span>
</a>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;">
<span class="my-social-icon" style="color:#0075c2;border-color:#0075c2;">B!</span><span class="my-social-text" style="background-color:#0075c2;">はてブ</span>
</div>
</a>

ツイッターのフォローボタン

ついでに、ツイッターのフォローボタンもご紹介します。
これも、公式サイトで配布されているものだと外部のJavaScriptを読み込むので、結構遅いんですよね。

次のコードを貼り付けると、このように表示されます。

ツイッターのフォローボタン

<style type="text/css">
.my-follow{
margin:30px 0 30px 0;
}
.my-follow a{
padding-right:10px;
text-decoration:none;
}
.my-follow-icon{
font-size:12px;
font-weight:bold;
border:solid 5px;
padding:7px 5px 7px 5px;
}
.my-follow-text{
font-size:12px;
font-weight:bold;
color:white;
border:none;
padding:12px 10px 12px 5px;
}
</style>
<div class="my-follow">
<a href="https://twitter.com/intent/follow?screen_name=kumiko_jp" onclick="window.open(this.href, 'tweetwindow', 'width=550, height=600,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;">
<span class="my-follow-icon" style="color:DeepPink;border-color:DeepPink;">t</span><span class="my-follow-text" style="background-color:DeepPink;">twitterでフォロー</span>
</a>
</div>
スポンサーリンク
スポンサーリンク
卵が美味しく食べられるのは、産まれてから5日後。養鶏家が教える卵の食べ頃。

養鶏家の新井照久さんは、埼玉県秩父市にある「アクアファーム秩父」で、こだわりの卵を生産・販売されています。以前私は、このブログの別記事「日本...

ポロックは最期まで、野心家であり続けたか

「Number11, 1951」 ポロックのが晩年に描いた黒い絵 「生誕100周年 ジャクソン・ポロック展」には、ポロックが晩年に描いた黒を...

地中美術館の「モネの一室」が素晴らしい。オランジュリー美術館との比較。

「睡蓮」によって大装飾空間をつくり出す。晩年のモネのそうした構想をもとにつくられたのが、地中美術館のクロード・モネ室です。先日私はその場所...

ジャクソン・ポロックのドリッピングを科学する。

ジャクソン・ポロックが描いた「ドリップ・ペインティング」は、一見、子供が描き散らかした絵のようにも見えます。無秩序に絵具がちりばめられたか...

カレーの人気レシピ。おすすめ15品まとめ。

カレーの人気レシピを15品ご紹介します。当サイトでは、テレビで話題になった料理を中心に紹介していますが、今日は数あるカレーの中から、特に人気...