IMUZA.com

Xserver << WordPress(ConoHa) << はてなブログ

はてなブログ／カウントなし SVG 軽量ソーシャル（SNS）シェアボタン

unsplash-logoFrankie

はてなブログ／カウントなし SVG 軽量ソーシャル（SNS）シェアボタン

2018.06.04 WebTips, はてなブログ

はてなブログ／カウントなし SVG 軽量ソーシャル（SNS）シェアボタン

ブログのソーシャルボタンを見直してみようと思います。シェアカウントもたくさんあればいいのですが、大した数ではありませんので（笑）、それよりも軽さを求めようと思います。なお、Google+はやめました。

01はてなブックマーク

<!-- はてなブックマーク -->
<a href="https://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button hatebu" data-hatena-bookmark-layout="simple" target="_blank" title="このエントリーをはてなブックマークに追加">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
        <rect class="cls-1" width="500" height="500" rx="101.9" ry="101.9" />
        <g class="cls-2">
            <path d="M278.2,258.1q-13.6-15.2-37.8-17c14.4-3.9,24.8-9.6,31.4-17.3s9.8-17.8,9.8-30.7A55,55,0,0,0,275,166a48.8,48.8,0,0,0-19.2-18.6c-7.3-4-16-6.9-26.2-8.6s-28.1-2.4-53.7-2.4H113.6V363.6h64.2q38.7,0,55.8-2.6c11.4-1.8,20.9-4.8,28.6-8.9a52.5,52.5,0,0,0,21.9-21.4c5.1-9.2,7.7-19.9,7.7-32.1C291.8,281.7,287.3,268.2,278.2,258.1Zm-107-71.4h13.3q23.1,0,31,5.2c5.3,3.5,7.9,9.5,7.9,18s-2.9,14-8.5,17.4-16.1,5-31.4,5H171.2V186.7Zm52.8,130.3c-6.1,3.7-16.5,5.5-31.1,5.5H171.2V273h22.6c15,0,25.4,1.9,30.9,5.7s8.4,10.4,8.4,20S230.1,313.4,223.9,317.1Z"/>
            <path d="M357.6,306.1a28.8,28.8,0,1,0,28.8,28.8A28.8,28.8,0,0,0,357.6,306.1Z"/>
            <rect x="332.6" y="136.4" width="50" height="151.52"/>
        </g>
    </svg>
    <div class="txt">ブックマーク</div>
</a>
  • https://b.hatena.ne.jp/entry/{URL} を呼ぶ。
    はてなブログの場合は、記事上や記事下では {URLEncodedPermalink} がその記事の URL を持っている。
  • はてなブログの場合は、class="hatena-bookmark-button" を指定しておけば、記事がロードされた時に aタグにクリックイベントが追加され専用関数が呼ばれる（多分）。
  • data-hatena-bookmark-layout="simple" を simple にしておけばブックマーク数をカウントしない。
  • title はあってもなくても変わらない（と思う）。

SVG ロゴのダウンロード先： 素材集 – 株式会社はてな

02Facebook

<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}" class="fb" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path class="cls-1" d="M483.74,0H28.26A28.26,28.26,0,0,0,0,28.26V483.74A28.26,28.26,0,0,0,28.26,512H273.5V314H207V236.5h66.5v-57c0-66.13,40.39-102.14,99.38-102.14,28.25,0,52.54,2.11,59.62,3V149.5l-40.81,0c-32,0-38.19,15.24-38.19,37.62V236.5h76.74l-10,77.5H353.5V512H483.74A28.26,28.26,0,0,0,512,483.74V28.26A28.26,28.26,0,0,0,483.74,0Z"/>
    </svg>
    <div class="txt">Facebook</div>
</a>
  • https://www.facebook.com/sharer/sharer.php?u={URL} を呼ぶ。
  • onclick でポップアップウィンドウを立ち上げる。
  • ポップアップの立ち上げ位置をクリックポイントにするには Javascript が必要。

SVG ロゴのダウンロード先： Facebook Brand Resources

Facebook のロゴのガイドラインはかなり厳しいですね。あらためて見てみますと、ほとんどのサイトが違反しています。

03Twitter

<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?url={URLEncodedPermalink}&amp;text={Title}" class="tw">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
        <path class="cls-2" d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"/>
    </svg>
    <div class="txt">Twitter</div>
</a>
  • https://twitter.com/intent/tweet?url={URL}&amp;text={TEXT} を呼ぶ。
    はてなブログの場合は、記事上や記事下では {Title} がその記事のタイトルを持っている。
  • ポップアップは画面中央に表示される。

SVG ロゴのダウンロード先： Twitterのブランドリソース

04LINE

<!-- LINE -->
<a href="https://social-plugins.line.me/lineit/share?url={URLEncodedPermalink}" class="line" onclick="window.open(this.href, 'LINEwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
        <path class="fill_1" 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 class="fill_2" 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"/>
    </svg>
    <div class="txt">LINEで送る</div>
</a>
  • https://social-plugins.line.me/lineit/share?url={URL} を呼ぶ。
  • onclick でポップアップウィンドウを立ち上げる。
  • ポップアップの立ち上げ位置をクリックポイントにするには Javascript が必要。

SVG ロゴのダウンロード先： 公式の SVG データはないので、SNSのアイコンやロゴをSVGで作った(ダウンロードあり) | UNORTHODOX WORKBOOK | Blog からいただきました。

公式 から AIファイルをダウンロードし、SVG で書き出せばできるのかもしれませんが、後日試してみます。

05サンプルCSS

サンプルCSS の画像です。 

/* Socials ボタン */
.socials {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    margin-bottom: 30px;
    /* コンテンツ幅の最大値を指定しているだけなので自由に */
    max-width: 660px;
}


.socials a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 24.5%;
    color: #fff;
    text-decoration: none;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}


.socials svg {
    width: 33%;
    vertical-align: bottom;
}


.socials .txt {
    width: 67%;
    font-size: 1.2vw;
    text-align: center;
}


.socials .hatebu {
    background: #00a4de;
}


.socials .hatebu .cls-1 {
    fill: #00a4de;
}


.socials .hatebu .cls-2 {
    fill: #fff;
}


.socials .hatebu .txt {
    font-size: 1vw;
}


.socials .fb {
    background: #4267b2;
}


.socials .fb svg {
    width: 20%;
    margin: 0 auto;
}


.socials .fb svg .cls-1 {
    fill: #fff;
}


.socials .tw {
    background: #1da1f2;
}


.socials .tw .cls-2 {
    fill: #fff;
}


.socials .line {
    background: #00C300;
}


.socials .line .fill_1 {
    fill: #00C300;
}


.socials .line .fill_2 {
    fill: #fff;
}


.socials .line .txt {
    font-size: 1vw;
}
Twitter
Facebook
ブックマーク
LINEで送る