IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

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

Photo by Ben White on Unsplash

Photo by Ben White on Unsplash


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

 

 

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

 

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

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

 

完成イメージ

f:id:Surprisedblog:20191001153301p:plain

 

ステップ1:jQueryを設置する

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

 

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

 

 

f:id:Surprisedblog:20191001160112p:plain

 

資料

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

 

 

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

f:id:Surprisedblog:20191002075022p:plain

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

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

公式ドキュメント

 

f:id:Surprisedblog:20191002020344p:plain

 

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

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

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

    f:id:Surprisedblog:20191001164911p:plain

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

 

 

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

Facebook

1.シェアボタン

f:id:Surprisedblog:20191002074203p:plain

 

2.いいねボタン

f:id:Surprisedblog:20191002074309p:plain

公式ドキュメント

 

Twitter

f:id:Surprisedblog:20191002074101p:plain

公式ドキュメント

Guides — Twitter Developers

 

tumblr

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

f:id:Surprisedblog:20191002074015p:plain

公式ドキュメント

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

 

LINE

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

f:id:Surprisedblog:20191002073433p:plain

公式ドキュメント

LINE Social Plugins

 

 

レイアウトを変える 

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

 

 

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

f:id:Surprisedblog:20191002074203p:plainf:id:Surprisedblog:20191002085457p:plain

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>