【「いいね」を共有しない？】今日のブログでの学び≪第4弾≫

は～い、どうもっす。

今日も元気に福助でござんす。

今日は会社の同僚と焼き肉へ行ってきました！

焼き肉を食べている家族のイラスト

カウンター10席、テーブル4台ほどの小さな店舗でしたが、

基本的に予約なくしては入れないほどの人気店☆彡

黒毛和牛を使用したお肉は非常に柔らかく、

美味しい！の言葉しか出ませんでした( *´艸｀)

え、、？写真、、、？

まぁええじゃないですか、、、( ﾟДﾟ)

記憶に残っていればいいのです笑

撮り忘れました笑

うん、美味しい焼肉食べて

「誰かに共有したいなぁ、、、」ってなった時に

ブログも共有するためのボタンがあるではないか！！！とひらめき～

てことでシェアボタンの設定方法を書いてくよ！

1.シェアボタン、、、？
2.シェアボタン設定
3.注意事項
4.参考させていただいた記事

1.シェアボタン、、、？

こんなボタンをブログでよく見かけませんか？

f:id:nm10abc:20200702232124p:plain

左から順に

はてなブログブックマーク
Facebook
Twitter
Pocket
LINE

Pocketだけ何のか知りません( ﾟДﾟ)

まぁシェアしてくれたらうれしいなって笑

みんなもシェアボタンを入れれるようにやっていくよ～！

2.シェアボタン設定

そのイチ

シェアボタンを追加するためには何点か設定をする必要があります。

管理画面「設定→詳細設定→検索エンジン最適化→headに要素を追加」

上記のコードを登録。

そのニ

管理画面「デザイン→カスタマイズ→記事」

☆記事上に下記コードを追加

☆記事下に下記コードを追加

<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>

<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>

<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>

<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>

<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>

※入れたい方に追加してください

そのサン

同じく「デザイン→スマートフォン」にて

f:id:nm10abc:20200703000928p:plain

レスポンシブデザインにチェックを入れておけばオッケー！

あとは記事を書く際にプレビューや記事確認をして、

設定した場所にあれば問題なく設定完了できています！

3.注意事項

この記事に貼っているコードを使用しても構いませんが、

サポートはしていませんので宜しくお願いします(^^)/

うまく反映されることを祈ってるぜ！

4.参考させていただいた記事

今回この記事を書く上で

こちらのウサキさんの記事を参考にさせていただきました！

schizoid-personality.hatenablog.com

色々と参考になりました、、、

ありがとうございました。

今日はここまで！

明日もよき日となるように頑張るぜ(*´▽｀*)

ではまた次の記事で！

暇な社会人daily

アラサー社会人の日々のおはなし