超軽快なソーシャルボタンを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>
スポンサーリンク
スポンサーリンク