IT the Best
今回のはてなブログカスタマイズは、ホーム画面の記事一覧にシェアボタン(後で読む系)を搭載するカスタマイズです。
ホーム画面にシェアボタンを表示させる
当カスタマイズで表示させるシェアボタンは、はてなブックマーク・Pocketです。これらのボタンはシェア機能に加え後で読むための機能としても活用されています。多くのサイトでは記事ページにだけシェアボタンが設置されていますが、これらの後で読む系のボタンは記事一覧にも設置することで、利便性の向上、アクセスアップにつながると思われます。
※記事一覧を表示させる要素によっては表示されない可能性があります。
完成イメージ
ステップ１：jQueryを設置する
※既にjQueryを設定済みの方は不要
はてなブログダッシュボードから設定 ＞ 詳細設定 ＞ 検索エンジン最適化 ＞ headに要素を追加のテキストエリアにこちらのコードを追加します。
資料
jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】 - IT the Best
ステップ２：ホーム画面の記事一覧にボタンを追加する
ホーム画面、/archiveの記事一覧に適用されます。
デザイン ＞ スパナアイコン ＞ フッタ にこちらのコードを記入します。
公式ドキュメント
PC版表示にすることでカスタマイズができます。
- ページ下部のPC版をタップします。
- デザイン ＞ スパナアイコン ＞ フッタにコードを記入します。
PC版表示にしてからの作業は同じです。
他のシェアボタンも表示させる
１．シェアボタン
２．いいねボタン
公式ドキュメント
公式ドキュメント
tumblr
公式ボタンがうまく動作しなかったため自作したデザインのボタンになります。
公式ドキュメント
LINE
LINEで送るボタンのデザインも自作のものになります。
公式ドキュメント
レイアウトを変える
Scriptコードのaタグの属性を変更することで、各SNSが公式で提供しているレイアウトに変更することができます。
Facebookシェアボタンのレイアウトを「box_count」から「button_count」に、サイズを「small」から「large」に変更する。
<script>
$(".archive-entries section").each(function(i,e){
var share_url = encodeURIComponent($(e).find(".entry-title-link").attr("href"));
var share_title = encodeURIComponent($(e).find(".entry-title-link").text());
// facebook sharebutton
var div=$(document.createElement("div")).addClass("fb-share-button").attr({
"data-href":decodeURIComponent(share_url),
"data-layout":"box_count","data-size":"small"
});
var a=$(document.createElement("a")).attr({
"href":"https://www.facebook.com/sharer/sharer.php?u="+share_url+"&src=sdkpreparse",
"class":"fb-xfbml-parse-ignore","target":"_blank"
}).html("シェア");
div.append(a);
$(e).append(div);
})
// facebook sharebutton
if($("#fb-root").length<1){
$("body").append($(document.createElement("script")).attr("async","").attr("defer","").attr("crossorigin","anonymous")
.attr("src","https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v4.0"));
}
</script>
<script>
$(".archive-entries section").each(function(i,e){
var share_url = encodeURIComponent($(e).find(".entry-title-link").attr("href"));
var share_title = encodeURIComponent($(e).find(".entry-title-link").text());
// facebook sharebutton
var div=$(document.createElement("div")).addClass("fb-share-button").attr({
"data-href":decodeURIComponent(share_url),
"data-layout":"button_count","data-size":"large"
});
var a=$(document.createElement("a")).attr({
"href":"https://www.facebook.com/sharer/sharer.php?u="+share_url+"&src=sdkpreparse",
"class":"fb-xfbml-parse-ignore","target":"_blank"
}).html("シェア");
div.append(a);
$(e).append(div);
})
// facebook sharebutton
if($("#fb-root").length<1){
$("body").append($(document.createElement("script")).attr("async","").attr("defer","").attr("crossorigin","anonymous")
.attr("src","https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v4.0"));
}
</script>
