SNS共有ボタンを自作してTOPや投稿下に設置。WordPressにSNSバナー。

　SNSの共有ボタンを自作しています。
参考にしたサイトをご紹介。
好きな大きさや色などにアレンジできますよ。

SNS共有ボタン・共有バナーを自分で作る

　Twitter、Facebook、Google+など。
沢山のSNSがあります。

読みに来てくれた方が、好きなSNSで共有できるように、
なるべく数多くのバナーを置いておきたいですね。

　しかし、SNSサイト公式のバナーは、
読み込みに時間がかかります。
これはユーザー離脱につながりやすい。

という事で、自作しましょう。

　そんなに難しくは無かったと思うのですが、
あまり覚えていません。

幅をご自身のサイトに合わせる事は、重要です。
何度も見なおして、
キレイに表示されるようカスタムして下さい。

参考にしたサイト

SNSのシェアボタンの設置方法まとめ (サンプルコード付き)
https://syncer.jp/how-to-setting-share-button

【WordPress】8種類の自作SNSボタンのコードをご紹介！カウントも表示するよ
http://shufulife.com/8type-snsbutton/

SNSボタンをオリジナルデザインにする方法
http://creatorclip.info/2014/01/sns-btn-original-design/

　それぞれのサイトで、若干デザインが違います。
好きに組み合わせてもいいし、好きなものを選んでもいいし。
色々見てみて下さい。

　ちなみに、私はシェアカウント数を表示していません。
サイトがより軽い気がします。

カウント数を表示させたい方は
プラグインSNS Count Cacheが必要です。

　詳しくは上記サイトも見つつ、
いい感じに作成してみて下さい。

WordPress・SNS共有バナーの作り方・CSS

　まず、CSSを設定します。

元々のコード

/*--------------------------------
SNS
---------------------------------*/
.sns li {
margin: 5px 0;
}
.sns .snsb li {
float: left;
margin-right: 10px;
list-style-type: none;
}
.post .sns .snsb.clearfix {
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}

があれば、上書きしてください。

では、書き込むコードはこちらです。
子テーマへ、以下のコードを追加。

（このままコピーしないで下さい。UTF-8Nに変換して下さい。）

/*--------------------------------
SNS
---------------------------------*/
.share{
width:100%;
}
.share h4{
font-size:120%;
text-align:center;
}

.sns{
margin:0 auto;
text-align:center;

}
.sns ul {
list-style:none;

}
.sns li {
float:left;
width:48%;
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 .googleplus a {
background:#db4a39;
box-shadow:0 5px 0 #ad3a2d;
}
.sns .googleplus a:hover {
background:#ad3a2d;
}

/* はてぶ */
.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;
}

/* RSS */
.sns .rss a {
background:#ffb53c;
box-shadow:0 5px 0 #e09900;
}
.sns .rss a:hover {
background:#e09900;
}

/* Feedly */
.sns .feedly a {
background:#87c040;
box-shadow:0 5px 0 #74a436;
}
.sns .feedly a:hover {
background:#74a436;
}

PC部分のCSS

/*--------------------------------------
780px SNS
--------------------------------------*/
.share{
padding-bottom:10px;
}
.sns ul {
margin:0 auto;
list-style:none;
}
.sns li {
width:23%;
margin:0 2% 3% 0;
}
.sns li a {
font-size:75%;
padding:10px 2px;
}
.sns li:nth-child(4n) {
margin-right:0;
}

Stinger5共有バナー自作、TOPと個別記事ページ

これはお使いのテーマによって、設置場所が違いますね。

home.phpかもしれないし、
single.phpかも。

Stinger5の時はsns.phpです。
あとトップページ用はsns-top.phpです。

　まずは以下のコードをsns.phpに置き換え。

SNS Count Cacheプラグインをお使いの場合は、
シェア数を拾い、カウントするようになっています。

　カウント数が要らない方は、
FB、google+、はてブの

＜?php if(function_exist　～　～　(); ?>まで

を削除します。
ややこしければ、そのままでも問題ありません。

（このままコピーしないで下さい。UTF-8Nに変換して下さい。）

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title());
?>

<div class="share">
<h4>共有☆</h4>

<?php if(is_mobile()) { //以下スマホの場合 ?>
<div class="sns">
<ul class="clearfix">

<li class="twitter">
<a href="http://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=【ツイッターアカウント名（＠なし）】&tw_p=tweetbutton&related="【ツイッターアカウント名（＠なし）】"><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>


<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="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" ><i class="fa fa-google-plus"></i>Google+ <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></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="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">LINE</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>


<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss"></i>RSS</a></li>


<li class="feedly">
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【ドメイン名（例：shufulife.com)】%2Ffeed%2F" target="blank"><i class="fa fa-rss"></i>feedly  <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>
</ul>
</div>

<?php } else { //以下PCの場合?>

<div class="sns">
<ul class="clearfix">

<li class="twitter">
<a href="http://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=【ツイッターアカウント名（＠なし）】&tw_p=tweetbutton&related="【ツイッターアカウント名（＠なし）】" 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>


<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="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;"><i class="fa fa-google-plus"></i>Google+ <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></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="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="blank">LINE</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>


<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2" target="blank"><i class="fa fa-rss"></i>RSS</a></li>


<li class="feedly">
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【ドメイン名（例：shufulife.com)】%2Ffeed%2F" target="blank"><i class="fa fa-rss"></i>feedly  <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>
</ul>
</div>
<?php } ?>
</div>

　次に、トップページ用です。

sns-top.phpに以下のコードを記入。

（このままコピーしないで下さい。UTF-8Nに変換して下さい。）

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title());
?>

<div class="share">

<?php if(is_mobile()) { //以下スマホの場合 ?>
<div class="sns">
<ul class="clearfix">

<li class="twitter">
<a href="http://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=【ツイッターアカウント名（＠なし）】&tw_p=tweetbutton&related="【ツイッターアカウント名（＠なし）】"><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( array( post_id => 'home')); ?></a>
</li>


<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(array( post_id => 'home')); ?></a>
</li>


<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" ><i class="fa fa-google-plus"></i>Google+ <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(array( post_id => 'home')); ?></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(array( post_id => 'home')); ?></a>
</li>


<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">LINE</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(array( post_id => 'home')); ?></a></li>


<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss"></i>RSS</a></li>


<li class="feedly">
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【ドメイン名（例：shufulife.com)】%2Ffeed%2F" target="blank"><i class="fa fa-rss"></i>feedly  <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>
</ul>
</div>

<?php } else { //以下PCの場合?>

<div class="sns">
<ul class="clearfix">

<li class="twitter">
<a href="http://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=【ツイッターアカウント名（＠なし）】&tw_p=tweetbutton&related="【ツイッターアカウント名（＠なし）】" 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(array( post_id => 'home')); ?></a>
</li>


<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(array( post_id => 'home')); ?></a>
</li>


<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;"><i class="fa fa-google-plus"></i>Google+ <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(array( post_id => 'home')); ?></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(array( post_id => 'home')); ?></a>
</li>


<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="blank">LINE</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(array( post_id => 'home')); ?></a></li>


<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2" target="blank"><i class="fa fa-rss"></i>RSS</a></li>


<li class="feedly">
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【ドメイン名（例：shufulife.com)】%2Ffeed%2F" target="blank"><i class="fa fa-rss"></i>feedly  <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>
</ul>
</div>
<?php } ?>
</div>

以上です。

　あとは、細かい部分のCSSを変更して
キレイに調整して下さい。

スクロール固定・追尾させるSNS共有ボタンを設置

　ちょっとテイストが違う感じで、
画面端に、スクロールしても追尾するように設置もできます。

お好みでどうぞ。

コピペでOK！スクロールしてもついてくるオリジナルソーシャルボタンをブログに設置する方法
http://mama-hack.com/scroll-snsbox

　こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。

　当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。

必ずデータは最新のバックアップを取っておいて下さい。

　WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。

当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。

詳細はWordPressヘルプを参照下さい。

　ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）

スポンサードリンク

ページ

2016年1月19日