ソーシャルのシェア数を取得・高速表示するWordPressプラグイン「SNS Count Cache」

当ブログにおける実装コード

一応、どういうコードで実装しているのかも紹介しておきます。
うちのブログではfunciton.phpにコードを記述し、テンプレート側で呼び出すようにしています。

functions.phpの記述コードは以下。

function socialbutton()
{ ?>
<div class="share-btn-container">
	<div class="share_btn fb-hbutton">
		<div>
		<span id="facebook-count"><?php if(function_exists('get_scc_facebook')) echo get_scc_facebook(); ?></span>
		<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fa fa-facebook"></i></a>
		</div>
	</div>
	<div class="share_btn tw-hbutton">
		<div>
		<span id="twitter-count"><?php if(function_exists('get_scc_twitter')) echo get_scc_twitter(); ?></span>
		<a href="https://twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&url=<?php the_permalink(); ?>" target="_blank"><i class="fa fa-twitter"></i></a>
		</div>
	</div>
	<div class="share_btn hb-hbutton">
		<div>
		<span id="hatebu-count"><?php if(function_exists('get_scc_hatebu')) echo get_scc_hatebu(); ?></span>
		<a href="https://b.hatena.ne.jp/add?&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank"><i class="btn-icon-hatebu icon-hatebu"></i></a>
		</div>
	</div>
	<div class="share_btn gp-hbutton">
		<div>
		<span id="gplus-count"><?php if(function_exists('get_scc_gplus')) echo get_scc_gplus(); ?></span>
		<a type="button"
		class="g-interactivepost"
		data-contenturl="<?php the_permalink(); ?>"
		data-clientid="106745659070.apps.googleusercontent.com"
		data-cookiepolicy="single_host_origin"
		data-prefilltext=""
		data-calltoactionlabel="RECOMMEND"
		data-calltoactionurl="<?php the_permalink(); ?>?action=gplus_article"
		data-calltoactiondeeplinkid="/pages/create"><i class="fa fa-google-plus"></i></a>
		</div>
	</div>
	<div class="share_btn pt-hbutton">
		<div>
		<span id="pocket-count"><?php if(function_exists('get_scc_pocket')) echo get_scc_pocket(); ?></span>
		<a href="http://getpocket.com/edit?url=<?php the_permalink();?>&title=<?php the_title_attribute(); ?>" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="icon-pocket"></i></a>
		</div>
	</div>
</div>
<?php }

あとはテンプレートの呼び出したい箇所に、<?php socialbutton(); ?>と記述すればOK。

ちなみにGoogle+のコードは、インタラクティブ投稿で実装しています。

なお、CSSは以下のような感じになっております。

.share-btn-container {
    display: -webkit-box;
    display: box;
    -webkit-box-pack: center;
    -ms-box-pack: center;
    box-pack: center;
    width: 640px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.share-btn-container a {
    display: block;
    cursor: pointer;
}

.share-btn-container .share_btn i {
    font-size: 20px;
    font-size: 1.25rem;
    color: #fff;
    vertical-align: middle;
}

.share-btn-container .share_btn i.fa {
    width: auto;
    margin: 0;
}

.share_btn {
    width: 100%/5;
    width: -webkit-calc(100% / 5);
    width: -moz-calc(100% / 5);
    width: -o-calc(100% / 5);
    width: calc(100% / 5);
    height: 82px;
    margin: 0;
    padding: 18px 0 0;
}

.share_btn i.fa {
    width: 40px;
    margin: 18px 0 0;
}

@-moz-document url-prefix() {
    .share_btn {
        width: 100%/5;
        width: -webkit-calc(100% / 5);
        width: -moz-calc(100% / 5);
        width: -o-calc(100% / 5);
        width: calc(100% / 5);
        height: 82px;
        margin: 0;
        padding: 18px 0 0;
        float: left;
    }

    .share_btn i.fa {
        width: 40px;
        margin: 18px 0 0;
    }
}

.fb-hbutton {
    background: #3b5998;
}

.tw-hbutton {
    background: #00aef1;
}

.hb-hbutton {
    background: #156fc3;
}

.gp-hbutton {
    background: #dd4b39;
}

.pt-hbutton {
    background: #ea4654;
}

.feedly-hbutton {
    background: #72c640;
}

.share_btn div {
    display: block;
}

.share_btn div span {
    position: relative;
    display: block;
    width: 44px;
    height: 31px;
    margin: 0 auto 6px;
    padding: 2px 4px 0;
    font-family: Arial;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 31px;
    text-align: center;
    background: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.share_btn div span:before {
    position: absolute;
    top: 33px;
    right: 40%;
    border: solid transparent;
    border-width: 5px;
    content: "";
}

.share_btn div span:after {
    position: absolute;
    top: 31px;
    right: 40%;
    border: solid transparent;
    border-width: 5px;
    border-top-color: #fff;
    content: "";
}

#facebook-count {
    border: 1px solid #344e86;
}

#facebook-count:before {
    border-top-color: #344e86;
}

#twitter-count {
    border: 1px solid #009cd7;
}

#twitter-count:before {
    border-top-color: #009cd7;
}

#hatebu-count {
    border: 1px solid #1362ac;
}

#hatebu-count:before {
    border-top-color: #1362ac;
}

#gplus-count {
    border: 1px solid #d73925;
}

#gplus-count:before {
    border-top-color: #d73925;
}

#pocket-count {
    border: 1px solid #e72f3f;
}

#pocket-count:before {
    border-top-color: #e72f3f;
}