[B!]ブックマークのグルグルとの格闘。無事に改善されました
ブログを軽くしたくて「SNSシェアボタン」のカスタマイズをしました。
なぜ、こうなった?
ぐるぐるとの格闘の記録です。
↑このグルグル
カスタマイズの目的はブログの軽量化
ブログを軽くしたくて、「シェアボタン」のカスタマイズをした。
ついでに「スター」も外してみた。という記事を書きました。
schizoid-personality.hatenablog.com
グルグルしてるけど、べつにイイかと放置してました(笑)←(いい加減なやつ)
師匠から、ありがたいお言葉!!を頂きました
すると師匠(←勝手に呼んでます)から
「はてブ数を取得のコード」もコピペが必要だと、
とても 優しいお言葉を頂きました!!
あと、先ほど言及頂いた記事の件ですが
— 阿豆らいち (@AzuLitchi) 2019年10月10日
「はてブ数を取得」のコードもコピペしないとはてブ数のとこがぐるぐるしたままになってしまいます。
この記事からコピペするなら『「記事下」に以下を追加』のところのコードでどうぞhttps://t.co/wXiBxREEUO
さっそく、やってみる!!
記事下にコードを追加した
<!--JQueryを使用-->
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>
<!--シェア数の取得-->
<script>
//はてなブックマークではてブ数を取得
function get_social_count_hatebu(url, selcter) {
jQuery.ajax({
url:'https://b.hatena.ne.jp/entry.count?callback=?',
dataType:'jsonp',
data:{
url:url
},
success:function(res){
jQuery( selcter ).text( res || 0 );
},
error:function(){
jQuery( selcter ).text('0');
}
});
}
jQuery(function(){
get_social_count_hatebu('{Permalink}', '.hatebu-count');
});
</script>
<!--シェアボタン-->
<div class="share-flat">
<span style="font-size: 8px">この記事をシェアする</span>
<div class="share-flat-inner">
<!--はてブ-->
<a href="https://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><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><i class="blogicon-facebook lg"></i><br><span class="small-text">Facebook</span></a>
<!--Twitter-->
<a href="https://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--Pocket-->
<a href="https://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
<!--LINE-->
<span class="line-hide">
<a href="https://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button" target="_blank"><i class="fa fa-comment"></i><br><span class="small-text">LINE</span></a>
</span>
</a>
</div>
</div>
記事上のシェアボタンを確認
おぉ~!!なおった♪
ぐるぐる回ってたのが「4」になった!!
早速、師匠にご報告を!…と思ったのですが…。
記事下のシェアボタンを確認
2つになった!!(笑)
に…二個もいらね~。。
もともとコピペしてあった、コードを削除する
1つになったー♪ わーい、わーい♪
すっきりして、とても気持ちがイイ!!
失敗の原因と勘違い
今回、記事下に追加したコードは、「数の取得だけをするコード」だと勘違いしてました…。
最初に「数の表示」は、べつになくてもイイや~。って思ってしまったので、華麗にスルーしてしまったんですね(笑)
「記事上」にコピペするコードを、勝手に「記事上・下」にコピペをして終了した(自分に必要な部分だけを、コピペしたつもり)
これが今回の「失敗」の原因です。
カスタマイズの師匠の紹介
おしゃれなカスタマイズをされる「らいち様」は、人間性も素晴らしいのでした♪
SNSシェアボタンのカスタマイズをされたい方は、こちらの記事の通りに設定してください↓
この記事を書く許可どころか、Twitterの埋め込み方法についての「アドバイス」までして頂き、本当にありがとうございました!!
はてなブログで、こんな交流が出来るなんて「なんか、いいなぁ♪」と思ったのでした。
サングラスをかけてみたけど、似合わないぜぇ~(←師匠のように、なろうとした…)
スターの設置についての考察
1週間、ブログ軽量化の為にスターを「非表示」にしてみました。
私が「スター」について感じた、よかったこと、悪かったことをお伝えします。
非表示にするメリット
よかったこと?は通知が減ったこと。通知のマークがあると気になって、ついつい見てしまうから。
ブックマークは、スターより気軽に押せない分、ちゃんと読んでくれた人がつけてくれるのかなと思った。
スターがない分、コメントを頂けるようになった。
非表示にしたデメリット
記事を見てくれた人がわからない。
スターから追いかけて、その人のブログを見ることが出来ない…。
良くも悪くも、ブックマークが付きやすくなって、人気・新着のエントリーに載る…。
はてなブックマークに載ること
不特定多数の目に触れるので、アクセスは増える。
正直、自分の記事が載ったことで「ネット社会の嫌な部分」を感じた。
私にとって、アクセス数は何の意味もなかった…。
はてなのブックマークには載りたくない。
(はてブ砲とやらは、本当にダメージを与えてくるぜ~)
◯◯な奴ら(←自粛)とは関わりたくない。でも、いつも読んでくれている人からのコメントは見たい。どうすればイイものか??
実際に自分が経験してみないと、わからないことでした。
という、複雑な理由でスターを復活させました。
今後のブログのあり方も、色々と考えないといけないな…。