あるとたたん

あるとたたん

写真好きの前向き日誌〜只今、子育て奮闘中〜

思わず押したくなるシェアボタンを設置する方法

f:id:masami11662277:20170817163902p:plain

 

最初にカスタマイズしたことの一つで、このシェアボタンがあるだけで雰囲気ががらりと変わります!他のSNSへ拡散されるきっかけになるので、思わず押したくなるボタンにしたいですよね。シンプルだけどカーソルを合わせると色が変わるようになっているので、気に入っています。

 

今回は、4つのコードを4ヶ所へコピペします!今までの工程より多くなりますが、既に他のカスタマイズを行っている方は見たことのあるページも多いと思います。いつものように画像付きで説明していきますので、知識のある方は目次でコピペのページへどうぞ!

 

 

 

最初は、画像を紐付け

まずはアイコンに使用する画像を紐付けしなければなりません。そのため、以下のサイトから借りた画像を紐付けします。

fontawesome.io

 

以下のHTMLをコピーします。

 

 

▼貼る場所までの経路

「設定」⇛「詳細設定」。

アイキャッチ画像」「独自ドメイン」の下の方にスクロールしていくと「検索エンジン最適化」という項目があります。その下のほうに「headに要素を追加」という欄に貼り付けます。

 

f:id:masami11662277:20161009144857p:plain

 

f:id:masami11662277:20161009144914p:plain

 

※既に同じものが貼り付けてあるときは、この作業は不要です!

 

JQueryをペーストする場所

シェアボタンは、シェア数を数えるためのコードが必要になります。そのため、JQueryコードという文字列を指定の場所に貼付けます。とりあえず、場所を確認しましょう。

 

▼貼付け場所までの経路(クリックしていくだけ)

「デザイン」→「工具マーク」→「記事」→「記事下」→出てきた枠内に貼付け

 

f:id:masami11662277:20160821164908p:plain

 

f:id:masami11662277:20160821164925p:plain

 

f:id:masami11662277:20170817171105p:plain

 

f:id:masami11662277:20170817171127p:plain

 

f:id:masami11662277:20170812120206p:plain

 

JQueryをコピーする

場所が確認できたら、以下のコードをそのままコピー&ペースト!とっても簡単!

 

<!--JQueryを使用-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--シェア数の取得-->
<script>
//はてなブックマークのシェア数
function getHatenaBookmarkCount(entryUrl, selcter) {
entryUrl = 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(entryUrl)
$.ajax({
url:entryUrl,
dataType:'jsonp',
}).then(
function(result){ $(selcter).text(result || 0); },
function(){ $(selcter).text('0'); }
);
}
//Facebookのシェア数
function getFacebookCount(entryUrl, selcter) {
entryUrl = 'https://graph.facebook.com/' + encodeURIComponent(entryUrl)
$.ajax({
url:entryUrl,
dataType:'jsonp'
}).then(
function(result){ $(selcter).text(result.shares || 0); },
function(){ $(selcter).text('0'); }
);
}
$(function(){
getHatenaBookmarkCount('{Permalink}', '.hatena-bookmark-count');
getFacebookCount('{Permalink}', '.facebook-count');
});
</script>

<!--SNSシェアボタン-->
<div class="share-buttons">
<span style="font-size: 8px">シェアする</span>
<div class="inner">
<!--はてなブックマーク-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i> <span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br> <span class="share-text">Bookmark!</span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i> <span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br><span class="share-text">Facebook</span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i><br><span class="share-text">Twitter</span></a>
<!--Google+-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="share-text">Google+</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="share-text">Pocket</span></a>
</div>
</div>

 

CSSをペーストする場所

次に、ボタンのデザインのコード、CSSを貼付ける場所を確認します。「デザイン」画面の一番下にある「デザインCSS」に貼付けです。

 

▼経路(クリックしていくだけ)

「デザイン」→「工具マーク」→「デザインCSS」→「出てきた枠内に貼付け」

 

f:id:masami11662277:20160821164908p:plain

 

f:id:masami11662277:20170817113940p:plain

 

f:id:masami11662277:20170817114009p:plain

 

f:id:masami11662277:20170812120206p:plain

 

CSSをコピーする

このブログで使用しているデザインです。枠のあるボタンで、カーソルが載ると色が付くデザインになっています。

 

/*share-botton*/
.share-buttons{
margin-bottom: 10px;
text-align: left;
}
.share-buttons .inner a {
position: relative;
display: inline-block;
width: 15%;
height: 45px;
line-height: 25px;
font-size: 16px;
text-align: center;
text-decoration: none;
padding:5px;
}
.share-buttons .inner .share-text{
font-size: 15px;
}
.share-buttons .inner .hatena-bookmark-button{
color:#008fde;
border:1px solid #008fde;
background: #fff;
}
.share-buttons .inner .hatena-bookmark-button:hover{
color:#fff;
background: #008fde;
}
.share-buttons .inner .hatena-bookmark-button:active{
background: #5478A5;
}
.share-buttons .inner .facebook-button{
color:#305097;
border:1px solid #305097;
background: #fff;
}
.share-buttons .inner .facebook-button:hover{
color:#fff;
background: #305097;
}
.share-buttons .inner .facebook-button:active{
background: #213254;
}
.share-buttons .inner .twitter-button{
color:#55acee;
border:1px solid #55acee;
background: #fff;
}
.share-buttons .inner .twitter-button:hover{
color:#fff;
background: #55acee;
}
.share-buttons .inner .twitter-button:active{
background: #0285b7;
}
.share-buttons .inner .googleplus-button{
color:#db4a39;
border:1px solid #db4a39;
background: #fff;
}
.share-buttons .inner .googleplus-button:hover{
color:#fff;
background: #db4a39;
}
.share-buttons .inner .googleplus-button:active{
background: #a23629;
}
.share-buttons .inner .pocket-button{
color:#d3505a;
border:1px solid #d3505a;
background: #fff;
}
.share-buttons .inner .pocket-button:hover{
color:#fff;
background: #d3505a;
}
.share-buttons .inner .pocket-button:active{
background: #b5392c;
}

 

 

HTMLをペーストする場所

最後に、HTMLを貼る場所です。「デザイン」にある「記事」を開き、表示した場所へ貼付けます。このブログは「記事上」「記事下」の両方に設置してあります。

 

▼貼る場所までの経路 

「デザイン」→「工具マーク」→「記事」→「記事上」あるいは「記事下」→下に出てくる枠内

 

f:id:masami11662277:20160821164925p:plain

 

f:id:masami11662277:20170817171105p:plain 

 

f:id:masami11662277:20170817171105p:plain

f:id:masami11662277:20170817171127p:plain

 

f:id:masami11662277:20170812120206p:plain

 

 

HTMLをコピーする

記事の上下に設置したい場合は、同じものを2ヶ所に貼り付けてください。

 

<!--SNSシェアボタン-->
<div class="share-buttons">
<span style="font-size: 8px">シェアする</span>
<div class="inner">
<!--はてなブックマーク-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i> <span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br> <span class="share-text">Bookmark!</span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i> <span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br><span class="share-text">Facebook</span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i><br><span class="share-text">Twitter</span></a>
<!--Google+-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="share-text">Google+</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="share-text">Pocket</span></a>
</div>
</div>

 

参考ブログ

▼いつもお世話になっているブログ。PC版だけでなくスマホ版の設置方法も詳しく教えてくれているので、スマホ版もカスタマイズしたい方はこちらへ。

www.ituore.com