超軽快なソーシャルボタンを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>
スポンサーリンク
スポンサーリンク
グローバルナビゲーションを、記事のカテゴリに応じて色付けする。wordpressのカスタムメニューが便利。

いろいろなブログで見かける「グローバルナビゲーション」。各カテゴリページへのリンクや、サイトマップなどの固定ページヘのリンクが、ずらっと横に...

イッタラの素敵なマグカップ「タイカ」。色違いのペアカップを購入しました。

北欧の食器メーカー「イッタラ」のマグカップ。インターネットでマグカップを検索していたときに、このユニークな絵柄のマグカップを偶然見つけました...

ヴェレダのアイリスシリーズ。「モイスチャーローション」の使用感をレポートします。

ヴェレダのアイリスシリーズ「モイスチャーローション」の使用感について、感想を書きます。ヴェレダの代表的なフェイスケア用品には、「アイリスシリ...

写真の位置情報(GPS)をWeb上で解析。スマホやデジカメで撮った画像の撮影場所をGoogleMapに表示します。

スマホやデジカメで撮った写真の位置情報(GPS)を解析して、GoogleMapで撮影場所を確認できるWebツールです。「あれ、この画像に写っ...

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

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