【はてなブログカスタマイズ】２ステップでホーム画面にシェアボタン(あとで読む系)を表示させる - スマホからでも簡単カスタマイズ

Photo by Ben White on Unsplash

今回のはてなブログカスタマイズは、ホーム画面の記事一覧にシェアボタン(後で読む系)を搭載するカスタマイズです。

ホーム画面にシェアボタンを表示させる

当カスタマイズで表示させるシェアボタンは、はてなブックマーク・Pocketです。これらのボタンはシェア機能に加え後で読むための機能としても活用されています。多くのサイトでは記事ページにだけシェアボタンが設置されていますが、これらの後で読む系のボタンは記事一覧にも設置することで、利便性の向上、アクセスアップにつながると思われます。

※記事一覧を表示させる要素によっては表示されない可能性があります。

完成イメージ

ステップ１：jQueryを設置する

※既にjQueryを設定済みの方は不要

はてなブログダッシュボードから設定 ＞ 詳細設定 ＞ 検索エンジン最適化 ＞ headに要素を追加のテキストエリアにこちらのコードを追加します。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Copy

資料

jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】 - IT the Best

ステップ２：ホーム画面の記事一覧にボタンを追加する

ホーム画面、/archiveの記事一覧に適用されます。

デザイン ＞ スパナアイコン ＞ フッタ にこちらのコードを記入します。

<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()); // hatena var a=$(document.createElement("a")).attr({ "href":"https://b.hatena.ne.jp/entry/"+share_url,"class":"hatena-bookmark-button", "data-hatena-bookmark-layout":"vertical-normal","data-hatena-bookmark-lang":"ja", "title":"このエントリーをはてなブックマークに追加", }); var img=$(document.createElement("img")).attr({ "src":"https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png", "alt":"このエントリーをはてなブックマークに追加","width":"20","height":"20","style":"border: none;" }); a.append(img); $(e).append(a); $(e).append(" "); // pocket var a=$(document.createElement("a")).attr({ "href":"https://getpocket.com/save","class":"pocket-btn","data-lang":"en", "data-save-url":share_url,"data-pocket-count":"vertical","data-pocket-align":"left" }).html("Pocket"); $(e).append(a); }) // hatena if ($("script[src='https://b.st-hatena.com/js/bookmark_button.js'").length<1) { var script=$(document.createElement("script")).attr("type","text/javascript") .attr("src","https://b.st-hatena.com/js/bookmark_button.js") .attr("charset","utf-8").attr("async","async"); $("body").append(script); } // pocket var script=$(document.createElement("script")).attr("type","text/javascript") .html('!function(d,i)\ {if(!d.getElementById(i)){var j=d.createElement("script")\ ;j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";\ var w=d.getElementById(i);d.body.appendChild(j);}}\ (document,"pocket-btn-js");'); $("body").append(script); </script>

Copy

公式ドキュメント

• はてなブックマークボタンの作成・設置について
• Pocket for Publishers: Pocket Button

 スマホの場合(ブラウザ)

PC版表示にすることでカスタマイズができます。

1. ページ下部のPC版をタップします。

   

2. デザイン ＞ スパナアイコン ＞ フッタにコードを記入します。
   PC版表示にしてからの作業は同じです。

他のシェアボタンも表示させる

Facebook

１．シェアボタン

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

Copy

２．いいねボタン

<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 likebutton var div=$(document.createElement("div")).addClass("fb-like").attr({ "data-href":decodeURIComponent(share_url),"data-width":"","data-layout":"standard", "data-action":"like","data-size":"small","data-show-faces":"true","data-share":"true" }); $(e).append(div); }) // facebook likebutton 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>

Copy

公式ドキュメント

• シェアボタン - ソーシャルプラグイン - ドキュメンテーション - Facebook for Developers

• いいね！ボタン - ソーシャルプラグイン - ドキュメンテーション - Facebook for Developers

Twitter

<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()); // twitter tweetbutton var iframe=$(document.createElement("iframe")).attr({ "id":"twitter-widget-1", "scrolling":"no", "frameborder":"0", "allowtransparency":"true" , "class":"twitter-share-button twitter-share-button-rendered twitter-tweet-button" , "style":"position: static; visibility: visible; width: 60px; height: 20px;" , "title":share_title, "src":"https://platform.twitter.com/widgets/tweet_button.d6364fae9340b0be5f13818370141fd0.en.html#dnt=false&id=twitter-widget-0&lang=en&\ original_referer="+share_url+"&size=m&text="+decodeURIComponent(share_title)+"&time=1569956574478&type=share&url="+decodeURIComponent(share_url) }); $(e).append(iframe); }) </script>

Copy

公式ドキュメント

Guides — Twitter Developers

tumblr

公式ボタンがうまく動作しなかったため自作したデザインのボタンになります。

<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()); // tumblr postbutton var a=$(document.createElement("a")).attr({ "target":"_blank", "href":"http://www.tumblr.com/share?v=3&u="+share_url, }).css({ "background-color": "#001935","color":"white","padding":"3px", "padding": "3px 7px 3px 5px","font-size": "12px","border-radius": ".3em", "text-decoration":" none","font-weight": "bolder", }).html("Post").on("click",function(event){ event.preventDefault(); window.open($(this).attr("href") , "SNSWindow", "width=" + 524 + ",height="+ window.screen.height + ",left=" + 0 + ",top=" + 0); }).prepend($(document.createElement("span")).html("t").css({ "font-size":" 17px","vertical-align": "middle","padding": "0 5px 0 0" })) $(e).append(a); }) </script>

Copy

公式ドキュメント

1. Buttons | Tumblr
2. 共有ボタンドキュメンテーション | Tumblr

LINE

LINEで送るボタンのデザインも自作のものになります。

<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()); // LINE var a=$(document.createElement("a")).attr({ "target":"_blank", "href":"https://social-plugins.line.me/lineit/share?url="+share_url }).html("LINEで送る").css({ "background-color": "#00b900","border-radius": ".2em","color":"white","text-decoration":"none", "font-size":"11px","padding":"3px 5px 3px 7px" }) $(e).append(a); }) </script>

Copy

公式ドキュメント

LINE Social Plugins

レイアウトを変える 

Scriptコードのaタグの属性を変更することで、各SNSが公式で提供しているレイアウトに変更することができます。

例

Facebookシェアボタンのレイアウトを「box_count」から「button_count」に、サイズを「small」から「large」に変更する。

title box_count CSS button_count

 

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