読者です 読者をやめる 読者になる 読者になる

だるろぐ

明日できることは、今日しない。

はてなブログの記事下に SNS で投稿するボタンを独自に追加する

f:id:daruyanagi:20170305121029p:plain

ちょっと長いけど、はてなブログの[デザイン設定]-[カスタマイズ]-[記事上下のカスタマイズ]-[記事下]に張り付けるだけで使える。グレースケールで目立たないデザインだけど、マウスホバーで色付きになるぜー(ぃぇーぃ

あと、はてなブログって標準で jQuery を使ってるのかな? だったらこの行は消した方がいいかもしれない(ローカルでテストするために使っていた)。

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

開発は Visual Studio Code + ASP.NET Core で行いました(なんとなく)。

コード

<style>
    a.sns-logo svg {
        height: 2.5em;
        width:2.5em;
        filter: grayscale(100%);
    }
    
    a.sns-logo svg:hover,
    a.sns-logo svg:active,
    a.sns-logo svg:focus {
        filter: grayscale(0);
    }

    #share {
        text-align: center;
    }

    #share ul {
        margin: 0;
        padding: 0;
    }

    #share ul li {
        display: inline-block;
        margin: 0.5em;
        padding: 0.5em;
        width: 4em;
    }

    #share ul li a {
        color: gray;
    }

    #share ul li a:hover,
    #share ul li a:active, 
    #share ul li a:focus {
        text-decoration: none;
    }

    #share ul li a span {
        
    }

    #share ul li div.counter {
        border: 1px solid gray;
        border-radius: 2px;
        font-size: 0.5em;
        padding: 0.25em;
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function get_social_count_facebook(url, selcter) {
  jQuery.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
      id:url
    },
    success:function(res){
      jQuery( selcter ).text( res.share.share_count || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}

function get_social_count_hatenabookmark(url, selcter) {
  jQuery.ajax({
    url:'http://api.b.st-hatena.com/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_facebook('{Permalink}', '.facebook-count');
  get_social_count_hatenabookmark('{Permalink}', '.hatenabookmark-count');
});
</script>

<div id="share">
    <ul>
        <li>
            <a class="twitter sns-logo" 
               href="https://twitter.com/intent/tweet?url={Permalink}&text={Title}">
                <svg viewBox="0 0 350 300">
                <path fill="#55acee" d="M350.001,35.509 C346.026,42.167 340.649,49.197 333.870,56.595 C328.493,62.513 321.944,68.556 314.231,74.720 C314.231,74.720 314.231,76.940 314.231,76.940 C314.231,76.940 314.231,79.530 314.231,79.530 C314.231,80.762 314.346,81.626 314.579,82.119 C314.579,82.119 314.579,84.708 314.579,84.708 C314.579,110.109 310.022,135.572 300.903,161.097 C291.785,186.620 278.809,209.494 261.975,229.715 C243.971,251.417 222.113,268.556 196.394,281.134 C170.674,293.711 141.917,299.999 110.122,299.999 C89.546,299.999 70.142,297.041 51.904,291.122 C33.201,285.202 15.899,276.818 -0.001,265.967 C0.936,266.214 2.337,266.338 4.208,266.338 C7.948,266.831 10.755,267.077 12.626,267.077 C12.626,267.077 17.183,267.077 17.183,267.077 C33.550,267.077 49.567,264.242 65.231,258.569 C79.727,253.144 93.403,245.253 106.263,234.895 C91.300,234.649 77.387,229.469 64.531,219.357 C51.904,209.494 43.486,197.040 39.279,181.997 C42.786,182.737 45.007,183.105 45.943,183.105 C45.943,183.105 49.447,183.105 49.447,183.105 C50.151,183.352 51.202,183.476 52.605,183.476 C54.708,183.476 56.346,183.352 57.516,183.105 C59.853,183.105 63.128,182.612 67.335,181.626 C67.801,181.626 68.505,181.502 69.439,181.256 C70.376,181.009 71.075,180.887 71.542,180.887 C54.941,177.434 41.265,168.679 30.509,154.622 C19.520,140.565 14.029,124.536 14.029,106.534 C14.029,106.534 14.029,106.163 14.029,106.163 C14.029,106.163 14.029,105.794 14.029,105.794 C14.029,105.794 14.029,105.424 14.029,105.424 C18.471,108.383 23.615,110.603 29.460,112.082 C35.538,114.054 41.265,115.042 46.644,115.042 C36.354,107.644 28.640,98.642 23.497,88.038 C17.651,77.187 14.729,65.102 14.729,51.786 C14.729,44.388 15.546,37.729 17.183,31.810 C18.120,27.617 20.457,21.576 24.198,13.685 C42.435,37.358 64.177,55.854 89.429,69.172 C115.382,83.475 142.969,91.366 172.195,92.847 C171.494,87.667 171.145,84.832 171.145,84.339 C170.674,80.886 170.441,78.051 170.441,75.830 C170.441,54.868 177.456,36.989 191.483,22.193 C205.512,7.396 222.462,-0.002 242.337,-0.002 C252.623,-0.002 262.325,2.094 271.444,6.286 C280.562,10.971 288.394,16.891 294.942,24.042 C302.423,22.315 310.372,19.850 318.788,16.644 C325.803,13.931 333.051,10.232 340.532,5.547 C337.729,14.424 333.634,22.439 328.260,29.591 C322.179,36.989 315.751,42.907 308.969,47.347 C315.984,46.113 322.999,44.634 330.010,42.907 C335.388,41.428 342.052,38.961 350.001,35.509 Z"></path>
                </svg>
            </a>
            <div class="counter"><a href="https://twitter.com/search?q={Permalink}">リスト</a></div>
        </li>
        <li>
            <a class="facebook sns-logo" href="https://www.facebook.com/sharer/sharer.php?u={Permalink}">
                <svg viewBox="0 0 300 300">
                <path fill="#3b5998" d="M283.000,-0.000 C283.000,-0.000 17.000,-0.000 17.000,-0.000 C7.853,-0.000 -0.000,7.854 -0.000,17.000 C-0.000,17.000 -0.000,283.000 -0.000,283.000 C-0.000,292.144 7.853,300.000 17.000,300.000 C17.000,300.000 161.000,300.000 161.000,300.000 C161.000,300.000 161.000,183.000 161.000,183.000 C161.000,183.000 121.000,183.000 121.000,183.000 C121.000,183.000 121.000,139.000 121.000,139.000 C121.000,139.000 161.000,139.000 161.000,139.000 C161.000,139.000 161.000,105.000 161.000,105.000 C161.000,66.251 183.432,45.000 218.000,45.000 C234.558,45.000 249.852,46.449 254.000,47.000 C254.000,47.000 254.000,88.000 254.000,88.000 C254.000,88.000 229.000,88.000 229.000,88.000 C210.201,88.000 207.000,96.891 207.000,110.000 C207.000,110.000 207.000,139.000 207.000,139.000 C207.000,139.000 252.000,139.000 252.000,139.000 C252.000,139.000 246.000,183.000 246.000,183.000 C246.000,183.000 207.000,183.000 207.000,183.000 C207.000,183.000 207.000,300.000 207.000,300.000 C207.000,300.000 283.000,300.000 283.000,300.000 C292.144,300.000 300.000,292.144 300.000,283.000 C300.000,283.000 300.000,17.000 300.000,17.000 C300.000,7.854 292.144,-0.000 283.000,-0.000 Z"></path>
                </svg>
            </a>
            <div class="counter"><a href="#"><span class="facebook-count">0</span></a></div>
        </li>
        <li>
            <a class="google sns-logo" href="https://plus.google.com/share?url={Permalink}">
                <svg viewBox="0 0 313 300">
                <path fill="#df4a32" d="M312.998,146.980 C312.998,146.980 270.864,146.980 270.864,146.980 C270.864,146.980 270.864,188.250 270.864,188.250 C270.864,188.250 246.788,188.250 246.788,188.250 C246.788,188.250 246.788,146.980 246.788,146.980  C246.788,146.980 205.657,146.980 205.657,146.980 C205.657,146.980 205.657,146.087 205.657,146.087 C205.657,146.087 205.397,146.087 205.397,146.087 C205.397,146.087 205.397,122.612 205.397,122.612 C205.397,122.612 246.788,122.612 246.788,122.612 C246.788,122.612 246.788,80.545 246.788,80.545 C246.788,80.545 270.864,80.545 270.864,80.545 C270.864,80.545 270.864,122.612 270.864,122.612 C270.864,122.612 311.995,122.612 311.995,122.612 C311.995,122.612 311.995,122.822 311.995,122.822 C311.995,122.822 312.998,122.822 312.998,122.822 C312.998,122.822 312.998,146.980 312.998,146.980 ZM141.721,14.218 C144.177,15.755 146.940,17.998 150.010,20.943 C152.955,24.019 155.843,27.799 158.668,32.283 C161.369,36.511 163.762,41.507 165.851,47.271 C167.568,53.038 168.430,59.763 168.430,67.451 C168.196,81.546 165.109,92.818 159.166,101.274 C156.251,105.376 153.163,109.153 149.902,112.613 C146.290,116.073 142.446,119.597 138.368,123.183 C136.037,125.619 133.883,128.370 131.903,131.446 C129.573,134.650 128.407,138.366 128.407,142.593 C128.407,146.694 129.602,150.087 131.993,152.778 C134.022,155.343 135.995,157.583 137.909,159.505 C137.909,159.505 151.175,170.458 151.175,170.458 C159.420,177.251 166.650,184.742 172.865,192.942 C178.721,201.271 181.771,212.161 182.009,225.614 C182.009,244.702 173.642,261.614 156.910,276.348 C139.557,291.595 114.518,299.474 81.798,299.988 C54.407,299.729 33.954,293.847 20.447,282.339 C6.814,271.595 -0.005,258.744 -0.005,243.784 C-0.005,236.493 2.212,228.374 6.647,219.422 C10.950,210.468 18.742,202.603 30.020,195.830 C42.687,188.539 55.992,183.681 69.930,181.251 C83.735,179.202 95.200,178.055 104.325,177.798 C101.505,174.063 98.992,170.069 96.787,165.817 C94.212,161.696 92.927,156.735 92.927,150.937 C92.927,147.461 93.415,144.560 94.397,142.242 C95.254,139.794 96.051,137.542 96.787,135.483 C92.342,135.996 88.155,136.251 84.222,136.251 C63.405,135.996 47.537,129.399 36.623,116.459 C25.198,104.418 19.487,90.392 19.487,74.379 C19.487,55.034 27.580,37.487 43.767,21.727 C54.884,12.506 66.436,6.485 78.421,3.665 C90.283,1.234 101.403,0.015 111.782,0.015 C111.782,0.015 189.990,0.015 189.990,0.015 C189.990,0.015 165.836,14.218 165.836,14.218 C165.836,14.218 141.721,14.218 141.721,14.218 ZM90.897,189.311 C82.802,190.463 74.523,192.319 66.058,194.883 C64.063,195.653 61.262,196.805 57.653,198.345 C54.040,200.009 50.368,202.382 46.633,205.456 C43.021,208.656 39.972,212.630 37.481,217.373 C34.616,222.371 33.186,228.392 33.186,235.441 C33.186,249.279 39.408,260.683 51.862,269.656 C63.690,278.625 79.878,283.238 100.423,283.496 C118.852,283.238 132.922,279.138 142.634,271.193 C152.096,263.374 156.829,253.314 156.829,241.015 C156.829,231.020 153.589,222.305 147.116,214.876 C140.267,207.825 129.561,199.178 114.991,188.926 C112.501,188.667 109.576,188.542 106.215,188.542 C104.220,188.284 99.115,188.542 90.897,189.311 ZM123.444,38.676 C119.746,31.102 114.879,24.940 108.840,20.190 C102.676,15.698 95.591,13.322 87.579,13.064 C76.982,13.322 68.168,17.623 61.145,25.967 C55.221,34.699 52.387,44.456 52.642,55.236 C52.642,69.486 56.779,84.317 65.059,99.721 C69.065,106.912 74.239,113.009 80.576,118.014 C86.912,123.024 94.155,125.524 102.304,125.524 C112.598,125.140 121.176,121.417 128.040,114.354 C131.349,109.348 133.477,104.215 134.422,98.950 C134.989,93.689 135.275,89.260 135.275,85.664 C135.275,70.130 131.331,54.468 123.444,38.676 Z"></path>
                </svg>
            </a>
            <div class="counter"><a href="#">-</a></div>
        </li>
        <li>
            <a class="hatenabookmark sns-logo" href="http://b.hatena.ne.jp/daruyanagi/add.confirm?url={URLEncodedPermalink}">
                <svg viewBox="0 0 300 300">
                <g>
                <path fill="#00a4de" d="M255.882,0H150H44.118C19.752,0,0,19.752,0,44.118V150v105.882
                        C0,280.248,19.752,300,44.118,300H150h105.882C280.248,300,300,280.248,300,255.882V150V44.118C300,19.752,280.248,0,255.882,0z"></path>
                <path fill="#008fde" d="M0,150v105.882C0,280.248,19.752,300,44.118,300H150h105.882 C280.248,300,300,280.248,300,255.882V150H0z"></path>
                <path fill="#fff" d="M194.123,83.824h30.883v88.238h-30.883V83.824z"></path>
                <path fill="#fff" d="M165.527,154.676c-5.225-5.841-12.492-9.125-21.813-9.833
                        c8.292-2.26,14.313-5.566,18.122-9.983c3.791-4.359,5.672-10.276,5.672-17.723c0-5.895-1.289-11.11-3.785-15.616
                        c-2.561-4.479-6.238-8.063-11.074-10.746c-4.229-2.327-9.256-3.968-15.116-4.936c-5.889-0.938-16.195-1.411-30.984-1.411H70.589
                        v131.145h37.048c14.884,0,25.617-0.521,32.18-1.518c6.557-1.031,12.059-2.766,16.512-5.145
                        c5.508-2.906,9.709-7.043,12.645-12.357c2.955-5.332,4.418-11.48,4.418-18.51C173.391,168.316,170.771,160.5,165.527,154.676z
                        M103.792,113.502h7.676c8.871,0,14.831,1,17.907,2.994c3.034,2.004,4.583,5.462,4.583,10.389c0,4.74-1.647,8.079-4.905,10.037
                        c-3.301,1.921-9.316,2.895-18.123,2.895h-7.138V113.502z M134.24,188.707c-3.492,2.145-9.51,3.199-17.954,3.199h-12.492v-28.654
                        h13.032c8.671,0,14.666,1.092,17.854,3.271c3.24,2.18,4.833,6.029,4.833,11.555C139.512,183.023,137.764,186.574,134.24,188.707z"></path>
                <path fill="#f9f9f9" d="M209.566,180.885c-9.75,0-17.648,7.893-17.648,17.643s7.898,17.65,17.648,17.65
                        c9.738,0,17.643-7.9,17.643-17.65S219.305,180.885,209.566,180.885z"></path>
                <path fill="#f9f9f9" d="M159.891,150H70.589v65.572h37.048c14.884,0,25.617-0.521,32.18-1.518
                        c6.557-1.031,12.059-2.766,16.512-5.145c5.508-2.906,9.709-7.043,12.645-12.357c2.955-5.332,4.418-11.48,4.418-18.51
                        c0-9.725-2.619-17.541-7.863-23.367C163.875,152.836,161.947,151.336,159.891,150z M134.24,188.707
                        c-3.492,2.145-9.51,3.199-17.954,3.199h-12.492v-28.654h13.032c8.671,0,14.666,1.092,17.854,3.271
                        c3.24,2.18,4.833,6.029,4.833,11.555C139.512,183.023,137.764,186.574,134.24,188.707z"></path>
                <path fill="#f9f9f9" d="M194.123,150h30.883v22.063h-30.883V150z"></path>
                </g>
                </svg>
            </a>
            <div class="counter"><a href="http://b.hatena.ne.jp/entry/{Permalink}"><span class="hatenabookmark-count">0</span></a></div>
        </li>
        <li>
            <a class="line sns-logo" href="line://msg/text/?{Permalink}">
                <svg viewBox="0 0 300 300">
                <g>
                <path fill="#00C300" d="M245.741,0L54.679,0C24.677-0.042,0.043,24.249,0,54.257v191.057 c-0.042,30.01,24.255,54.645,54.258,54.686H245.32c30.01,0.042,54.637-24.249,54.68-54.265l-0.001-191.06 C300.041,24.671,275.749,0.041,245.741,0z"></path>
                <path fill="#fff" d="M259.877,136.778c0-48.99-49.115-88.846-109.482-88.846 c-60.365,0-109.482,39.856-109.482,88.846c0,43.917,38.949,80.702,91.563,87.659c3.563,0.769,8.416,2.354,9.644,5.4 c1.104,2.766,0.724,7.1,0.354,9.896c0,0-1.279,7.727-1.562,9.375c-0.476,2.767-2.201,10.823,9.483,5.901 c11.686-4.922,63.047-37.127,86.016-63.568h-0.005C252.273,174.045,259.877,156.385,259.877,136.778z M107.537,165.925H85.785 c-3.164,0-5.74-2.575-5.74-5.744v-43.505c0-3.166,2.576-5.741,5.74-5.741c3.166,0,5.739,2.576,5.739,5.741v37.764h16.013 c3.169,0,5.741,2.576,5.741,5.742C113.277,163.35,110.706,165.925,107.537,165.925z M130.037,160.182 c0,3.168-2.575,5.744-5.737,5.744c-3.164,0-5.739-2.575-5.739-5.744v-43.505c0-3.166,2.575-5.741,5.739-5.741 c3.162,0,5.737,2.576,5.737,5.741V160.182z M182.402,160.182c0,2.479-1.573,4.667-3.924,5.446 c-0.591,0.198-1.207,0.298-1.824,0.298c-1.791,0-3.505-0.858-4.587-2.298l-22.293-30.359v26.914 c0,3.168-2.573,5.744-5.741,5.744c-3.166,0-5.742-2.575-5.742-5.744v-43.505c0-2.474,1.579-4.662,3.924-5.445 c0.591-0.199,1.206-0.296,1.823-0.296c1.791,0,3.509,0.856,4.584,2.295l22.3,30.362v-26.917c0-3.166,2.578-5.741,5.74-5.741 c3.167,0,5.739,2.576,5.739,5.741V160.182z M217.602,132.688c3.169,0,5.742,2.576,5.742,5.743c0,3.163-2.573,5.739-5.742,5.739 h-16.008v10.27h16.008c3.164,0,5.742,2.576,5.742,5.742c0,3.168-2.578,5.744-5.742,5.744h-21.754c-3.16,0-5.74-2.575-5.74-5.744	v-21.738c0-0.007,0-0.007,0-0.013v-21.755c0-3.166,2.575-5.741,5.74-5.741h21.754c3.169,0,5.742,2.576,5.742,5.741 c0,3.166-2.573,5.741-5.742,5.741h-16.008v10.271H217.602z"></path>
                </g>
                </svg>
            </a>
            <div class="counter">-</div>
        </li>
    </ul>
</div>

最初は Ligature Symbols という Web フォントを使って組んでいたのだけど、クロスドメインで読み込めなかったので(ローカルサーバーでは動いたのに……orz)、SVG を拝借して書き直しました。なので、いろいろ残骸が残ってて、微妙に無駄の多い感じになってる気もするけど、まぁ、とりあえず動いたのでいいかな、みたいな。

参考

theorthodoxworks.com

SVG のアイコンは、ここからいただいた。ぜひ Pocket のも作ってほしいなー。

nelog.jp

共有数をカウントするコートはここから拝借した(Facebook が動かなかったんだけど、typo があるみたい。Chrome デベロッパーツールがなかったら見つけられなかったゼ……)。Twitter と Google+ はめんどいので割愛。