SNS Count Cacheでカウント付のSNSシェアボタンを設置する ~Lightningカスタマイズ第6回

この記事は約11分で読めます。

2016-11-20Lightning, WordPressプラグイン

質問者の写真

VK All in One Expansion UnitのSNSシェアボタンは綺麗だし、シェア数まで表示できるんだけど……

位置調整ができない!

VK All in One Expansion UnitのSNSシェアボタン自体は申し分ない

冒頭に述べた通りです。
しかしカスタマイズするなら位置調整ができないと困ったことになります。

現在の状態でプラグインを使うとこんな感じ

 

拡散を最重要視するなら、カスタマイズせず、このままでいいと思います。

カスタマイズする場合はこんな感じになります。

 

アドセンス上と下の両方で試してみましたが、アドセンス収益に有意な差はみられなかったので上に設置してます。

SNSシェアボタンをプラグイン無しで設置する

以下の記事を参考にしました。

デザインが綺麗で、数字も表示してくれます。

変更点は、

  • twitter、facebook、はてな、pocket、LINE(モバイルのみ)に絞っています。
  • 一列に変更しています。
  • モバイルについてpocketとLINEの位置を入れ替えています。

理由は、

①google+でシェアされたことない(自分も使っていない)
②記事下が重くなる
③レイアウトの関係

google+など他のSNSも設置したい場合は元記事を御参照ください。

数字が表示されない場合はこちらの記事を御参照ください。

デザインも非常に優れたかっこいいサイトです。

1 以下のコードを子ページのsingle.phpのボタンを表示したい場所に貼り付ける

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title());
?>
<div class="share">
<?php if (wp_is_mobile()) {  //以下スマホの場合 ?>
<div class="sns">
<ul class="snsf clearfix">
<!--ツイートボタン-->
<li class="twitter">
<a href="http://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=【@を除いたtwitterID】&tw_p=tweetbutton&related="【@を除いたtwitterID】"><i class="fa fa-twitter"></i>Twitter <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>
<!--Facebookボタン-->
<li class="facebook">
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>"><i class="fa fa-facebook"></i>
Facebook <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>
<!--はてブボタン-->
<li class="hatebu">
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>"><i class="fa fa-hatena"></i>はてなブックマーク  <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>
<!--ポケットボタン-->
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"><i class="fa fa-get-pocket"></i>Pocket  <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>
<!--LINEボタン--> <li class="line"> <a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">LINE</a> </li>
</ul>
</div>
<?php } else { //以下PCの場合?>
<div class="sns">
<ul class="snsf clearfix">
<!--ツイートボタン-->
<li class="twitter">
<a href="http://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=【@を除いたtwitterID】&tw_p=tweetbutton&related="【@を除いたtwitterID】" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;"><i class="fa fa-twitter"></i>Twitter <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>
<!--Facebookボタン-->
<li class="facebook">
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=1000');return false;"><i class="fa fa-facebook"></i>Facebook  <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>
<!--はてブボタン-->
<li class="hatebu">
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;" ><i class="fa fa-hatena"></i>はてなブックマーク  <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>
<!--ポケットボタン-->
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="blank"><i class="fa fa-get-pocket"></i>Pocket  <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>
</ul>
</div>
<?php } ?>
</div>

twitterの【】で囲んだ場所を御自身のIDに書き換えて下さい。

2 子テーマのCSSに次のコードを貼り付ける

/*--------------------------------
SNS
---------------------------------*/
.share{
width:100%;
}
.sns{
margin:0 auto;
text-align:center;
}
.sns ul {
padding:0 !important;
list-style:none;
}
.sns li {
float:left;
width:23%;
margin:0 2% 3% 0;
}
.sns li a {
font-size:80%;
position:relative;
display:block;
padding:10px;
color:#fff;
border-radius:6px;
text-align:center;
text-decoration: none;
text-shadow:1px 1px 0 rgba(255,255,255,0.3);
}
.sns li a:hover {
-webkit-transform: translate3d(0px, 5px, 1px);
-moz-transform: translate3d(0px, 5px, 1px);
transform: translate3d(0px, 5px, 1px);
box-shadow:none;
}
/* ツイッター */
.sns .twitter a {
background:#00acee;
box-shadow:0 5px 0 #0092ca;
}
.sns .twitter a:hover {
background:#0092ca;
}
/* Facebook */
.sns .facebook a {
background:#3b5998;
box-shadow:0 5px 0 #2c4373;
}
.sns .facebook a:hover {
background:#2c4373;
}
/* はてぶ */
.sns .hatebu a {
background:#5d8ac1;
box-shadow:0 5px 0 #43638b;
}
.sns .hatebu a:hover {
background:#43638b;
}
/* LINE */
.sns .line a {
background:#25af00;
box-shadow:0 5px 0 #219900;
}
.sns .line a:hover {
background:#219900;
}
/* Pocket */
.sns .pocket a {
background:#f03e51;
box-shadow:0 5px 0 #c0392b;
}
.sns .pocket a:hover {
background:#c0392b;
}



/* Font Awesome hatena bookmark */
.fa-hatena:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold
}

はてなブックマークのロゴをCSSでそれっぽく追加しています。
参考記事はこちら

さらに私は記事上にもはてなブックマークとpocketを配置しています。
この二つは「後で読む」の性質も併せ持つためです。

結論

解答者の写真
元のままでも十分なんだけど……配置を考えたい場合は使ってみてね!