ストライブ柄とステッチ風のかわいい?シェアボタンを作ってみました。ガーリーデザインなブログカスタマイズにぜひどうぞ。
このシェアボタンは過去にこのブログで公開したシェアボタンのHTMLと同じですので、CSSを変更するだけで着せ替え出来ます。レスポンシブデザイン対応。
blog.minimal-green.com
こんな感じのデザイン
FontAwesomeの呼び出し
headに貼り付けて下さい。既にどこかに記述済みの場合は必要ありません。管理画面→設定→詳細設定→「headに要素を追加に」以下のコード記述。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
記事上か下に貼り付けるHTMLコード
[追記]2019/05/21 GooglePlusを削除し、LINEボタンを追加しました。
管理画面→デザイン→カスタマイズ→記事上or記事下に以下のコードを追記してください。
<div class="sns-share">
<ul class="sns-area">
<li>
<a
href="http://b.hatena.ne.jp/entry/{Permalink}"
class="hatena-bookmark-button sns-bookmark sns-link"
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></a>
</li>
<li>
<a
class="sns-facebook sns-link"
href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}"
onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"
target="_blank">
<i class="fab fa-facebook-f"></i><span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span></a>
</li>
<li>
<a
class="sns-twitter sns-link"
href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank">
<i class="fab fa-twitter" aria-hidden="true"></i><span class="sns-txt">Twitter</span></a>
</li>
<li>
<a
class="sns-line sns-link"
href="https://social-plugins.line.me/lineit/share?url={URLEncodedPermalink}"
target="_blank">
<i class="fab fa-line"></i><span class="sns-txt">LINE</span></a>
</li>
<li>
<a
class="sns-pocket sns-link"
href="http://getpocket.com/edit?url={URLEncodedPermalink}"
onclick="window.open(this.href, 'pocket_window', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"
>
<i class="blogicon-chevron-down"></i><span class="sns-txt">Pocket</span></a>
</li>
</ul>
</div>
<!--jQueryを使用-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<!--シェア数の取得-->
<script>
//はてなブックマークのシェア数
function getHatenaBookmarkCount(entryUrl, selcter) {
entryUrl = 'https://b.hatena.ne.jp/entry.count?url=' + encodeURIComponent(entryUrl)
$.ajax({
url:entryUrl,
dataType:'jsonp',
}).then(
function(result){ $(selcter).text(result || 0); },
function(){ $(selcter).text('0'); }
);
}
//Facebookのシェア数を取得
function getFacebookCount(url, selector) {
$.ajax({
url:'https://graph.facebook.com/',
dataType:'jsonp',
data:{
id:url
}
}).done(function(res){
if ( res.share && res.share.share_count ) {
$( selector ).text( res.share.share_count );
} else {
$( selector ).text( 0 );
}
}).fail(function(){
$(selector).text('0');
});
}
$(function(){
getHatenaBookmarkCount('{Permalink}', '.hatena-bookmark-count');
getFacebookCount('{Permalink}', '.facebook-count');
});
</script>
デザインCSS
管理画面→デザイン→カスタマイズ→デザインCSSに以下のコードを追記してください。
/* social */ .sns-share { background: repeating-linear-gradient(90deg, #edf5f4, #edf5f4 10px, #f6faf9 0, #f6faf9 20px); text-align: center; margin: 10px auto; padding: 10px; box-sizing: border-box; } .sns-area { width: 100%; margin: 0px auto; padding: 10px; box-sizing: border-box; } .sns-area li { margin: 1%; list-style-type: none; display: inline-block; width: 16%; vertical-align: middle; } .sns-area li:last-child { margin-right: 0 } .sns-link { position: relative; display: block; color: #fff; text-align: center; text-decoration: none; outline: none;
overflow: hidden; height: 42px; line-height: 42px; }
.entry-header-html a.sns-link,
.entry-footer-html a.sns-link {
color: #fff;
text-decoration:none;
} a.sns-link:hover { color: #fff; opacity: 0.7; } .sns-twitter { color: #fff; background: #55acee; border-radius: 16px; box-shadow: 0 0 0 5px #55acee, 0 2px 3px 5px rgba(0,0,0,0.5); border: 2px dashed #fff; } .sns-facebook { color: #fff; background: #3a5795; border-radius: 16px; box-shadow: 0 0 0 5px #3a5795, 0 2px 3px 5px rgba(0,0,0,0.5); border: 2px dashed #fff; } .sns-bookmark { color: #fff; background: #00A5DE; border-radius: 16px; box-shadow: 0 0 0 5px #00A5DE, 0 2px 3px 5px rgba(0,0,0,0.5); border: 2px dashed #fff; } .sns-line { color: #fff;
background: #00B900;
border-radius: 16px;
box-shadow: 0 0 0 5px #00B900, 0 2px 3px 5px rgba(0,0,0,0.5);
border: 2px dashed #fff; } .sns-pocket { color: #fff; background: #EE4256; border-radius: 16px; box-shadow: 0 0 0 5px #EE4256, 0 2px 3px 5px rgba(0,0,0,0.5); border: 2px dashed #fff; } .blogicon-twitter, .blogicon-facebook, .blogicon-bookmark, .fa-line, .blogicon-chevron-down { margin-right: 5px; } .share-text { padding-left: 4px; } @media only screen and (max-width: 767px) {
.sns-area li {
margin: 2%;
width: 15%;
} .share-text, .sns-txt { display: none; } .blogicon-twitter, .blogicon-facebook, .blogicon-bookmark, .fa-google-plus, .blogicon-chevron-down { margin-right: 0; } .sns-area { padding: 0; } }
参考リンク
シェア数カウントのJavaScript:
コピペ一発!はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ! - いつ俺〜いつから俺ができないと錯覚していた?〜
はてなブログで使える変数について:
記事ページにブログパーツなどを配置するときに利用できる変数を追加しました - はてなブログ開発ブログ
はてなブックマーク件数取得API:
はてなブックマーク件数取得API - Hatena Developer Center
ガーリーデザイン関連記事:
blog.minimal-green.com
blog.minimal-green.com
blog.minimal-green.com